向ext的form表单元素添加click监听事件

首先有这么一个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();}
	   		}
		]
	});

可以看到form表单里面有多种元素,包括textfield、textarea、combo,其中在“SP号码”这里写click响应事件,该listener如下:

listeners:{render:function(p){Ext.getCmp('sp_id').getEl().on('click', setSpID); }}(见上述代码),click时,响应事件为函数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号码”表单项设入随机数了,其他语句可以忽略。

当然,稍稍用另一种风格写listener,也是可以的,如下:

listeners:{
'render':function(){
Ext.EventManager.on("sp_id", 'click', function(){
	              alert("test");
	          })
	 }
}

combo组建的监听器可以稍稍参考:

listeners:{'select':function(){Ext.getCmp('xxxid1').setValue(Ext.getCmp('xxxid1').getValue());}}  


你可能感兴趣的:(ExtJS,前端开发)