Ext自定义事件

最新推荐文章于 2020-09-07 20:15:45 发布

原创最新推荐文章于 2020-09-07 20:15:45 发布 · 1.1k 阅读

1 ·

CC 4.0 BY-SA版权

文章标签：

#extjs #extjs6 #spring mvc #框架 #经验分享

extjs6常见问题专栏收录该内容

6 篇文章

订阅专栏

本文介绍了ExtJS框架中两种自定义事件监听的方法：一种是在GridPanel行数据中添加自定义按钮并实现其事件响应；另一种是在重写组件时自定义对象属性与行为。这两种方法能够增强ExtJS应用的交互性和功能性。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

在ext中常见的2中自定义事件监听.

1、在gridpanel中行数据中增加自定义的按钮，图标的事件操作。例如：

代码如下：注意: action-col-css

{xtype:'grid',
	columns:[
		{text: '编写说明',flex: 1,dataIndex: 'caseid',align: 'center',renderer:function(v, m, r){
			return '<span key="uploadimg" class="action-col-css x-fa fa-upload" style="font-size: 18px;cursor:pointer;"></span>';
		}}
	],
	processEvent : function(type, view, cell, recordIndex, cellIndex, e, record, row){
		if(type === 'click'){
			var target = e.getTarget(),
	            actionIdRe = 'action-col-css';
			if(target.className.indexOf(actionIdRe)!=-1){
				var key = target.attributes.key.value;
				console.log(key);  //key 就是uploadimg
			}
		}
		return Ext.callback(this.superclass.processEvent,this,[type, view, cell, recordIndex, cellIndex, e, record, row]);
	}
}

2. 重写组件时自定义对象

例如:

Ext.define('app.expand.ux.IconClsField', {
    extend: 'Ext.form.field.Picker',
    xtype: 'iconclsfield',

    beforeBodyEl: [
        '<div style="position: absolute;width: 24px;height: 24px;left: 4px;top: 0px;bottom: 0px;margin: auto;text-align:center;font-size:16px;" >' +
            '<div id="{id}-swatchEl" data-ref="swatchEl" class="fa fa-expand" ' +
            	'style="width:24px;height:24px;text-align:center;line-height:24px;font-size:16px;float:left;color:#5fa2dd;">' + 
            '</div>' +
        '</div>'
    ],
	
	childEls: [
        'swatchEl' //data-ref
    ],
	
	setValue:function(v){
       var me = this;
       if(me.swatchEl)me.swatchEl.setCls(v);  //直接获取me.swatchEl对象
       me.superclass.setValue.call(me,v);
    }
});