Ext自定義事件

在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);
    }
});