ext의form 폼 요소에 클릭 감청 이벤트 추가

우선 이런 form이 있습니다.
authform = new Ext.form.FormPanel({
		id:'authform',
		xtype:'form',
		url:fullpath+'/esb/EsbServiceAuthAction!authApply.do' ,
 		baseCls:"x-plain",
		style:"padding:5px",
		items:[{
	          	xtype:'textarea',fieldLabel:' ', id:'applyreason',
	          	height:90,anchor:'98%',readOnly:true,style:'background:#E6E6F1;'
	    	},{
	        	xtype: "textfield",fieldLabel: " ",id:'apply_time',
        		anchor:'98%',readOnly:true,style:'background:#E6E6F1;'
		 	},{
	        	xtype: "textfield",fieldLabel: " ",id:'apply_times',
        		anchor:'98%',readOnly:true,style:'background:#E6E6F1;'
		 	},{
		 		xtype : 'combo',fieldLabel:' ', id:'reply_times',
		  		store : new Ext.data.SimpleStore({  
		  			data: [[' ','1'],[' ','2'],[' ','3'],[' ','4'],[' ','99']],  
		   			fields:['text', 'value']  
		  		}),  
		  		displayField:'text', valueField:'value',  
	  			mode : 'local', editable : false,  
		  		triggerAction:'all',  
		  		anchor:'98%',emptyText:' '  
		 	},{
	          	xtype:'textfield',fieldLabel:' IP', id:'apply_ip',
	          	anchor:'98%'
	      	},{
	          	xtype:'textfield',fieldLabel:'SP ', id:'sp_id',
	          	anchor:'98%',readOnly:true,allowBlank:false,emptyText:' ',
	          	listeners:{render:function(p){Ext.getCmp('sp_id').getEl().on('click', setSpID); }}
	      	},{
		xtype : 'combo',fieldLabel:' ', id:'apply_status',
		store : new Ext.data.SimpleStore({  
		data: [[' ','agree'],[' ','rejected']],  
		fields:['text', 'value']  
		}),  
		displayField:'text', valueField:'value',  
	  	mode : 'local', editable : false,  
		triggerAction:'all',  
		anchor:'98%',emptyText:' ',allowBlank:false
}
        ],
        buttons: [{
			   text: ' ',
			   type:'button',
			   id:'login',
			   handler:function(){textarea
			   		if( authform.getForm().isValid()) {
		   				authform.getForm().submit({
     		  		  		waitTitle:" .....",
     		 		   		waitMsg:" , .....",
     		 		   		failure:function(){
     		 		   	        Ext.Msg.alert(' ', '  , !');   
     		 		   		authwin.hide();
			   		},
     		 		   		success:function(_form,_action){
     		 		   	    	Ext.Msg.alert(' ', ' !');
     		 		   	      	authwin.hide();
			   		        store.load({params:{start:0, limit:20}});
     		 	 	   		}
     	 	 			});
                  	}
		   		}
			},{
			   text: ' ',
			   type:'button',
			   id:'clear',
			   handler: function(){authwin.hide();}
	   		}
		]
	});

폼 폼에는 textfield,textarea,combo를 포함한 여러 가지 요소가 있습니다. "SP 번호"에 클릭 응답 이벤트를 적습니다. 이 listener는 다음과 같습니다.
listeners:{render:function(p){Ext.getCmp('sp_id').getEl().on('click', setSpID); }}(위 코드 참조), 클릭 시 응답 이벤트는 함수 setSpID입니다. 이 함수는 다음과 같습니다.
function setSpID(){	// (sp )
	if(authform.getForm().findField('apply_status').getValue()=='agree'){
		 Ext.MessageBox.alert(' ',' , SP '); 
		 return;
	}
	var randNum = new Date().getTime()+""+ Math.floor(Math.random()*100000);
	Ext.MessageBox.confirm(' ', ' SP ', function(e){
if(e=='yes') Ext.getCmp('sp_id').setValue(randNum);
});
}

여기서 중요한 것은 이 실행 문장: Ext.getCmp('sp_id')입니다.setValue(randNum);//이렇게 하면 "SP 번호"양식 항목에 무작위 수를 설정할 수 있고 다른 문장은 무시할 수 있습니다.
물론 조금 다른 스타일로 리스너를 써도 된다. 다음과 같다.
listeners:{
'render':function(){
Ext.EventManager.on("sp_id", 'click', function(){
	              alert("test");
	          })
	 }
}

combo로 구성된 감청기는 참고할 수 있습니다.
listeners:{'select':function(){Ext.getCmp('xxxid1').setValue(Ext.getCmp('xxxid1').getValue());}}  

좋은 웹페이지 즐겨찾기