因爲工做須要,封裝了ExtJS4,GridPanel列頭帶有複選框的列,dom
代碼以下:ui
1 /** 2 * 列頭帶有複選框的列 3 * 4 */ 5 Ext.define("org.pine.widget.CheckBoxColumn", { 6 extend : "Ext.grid.column.Column", 7 xtype : 'xcc_cfets_checkboxcolumn', 8 requires:[ 9 ], 10 /** 屬性定義 */ 11 config:{ 12 }, 13 14 constructor: function (config) { 15 console.info(this.$className+'==>'+arguments.callee.name); 16 var self = this; 17 self.initConfig(config);//初始化配置 18 self.callParent(arguments);//調用父類構造方法 19 }, 20 initComponent: function () { 21 console.info(this.$className+'==>'+arguments.callee.name); 22 var self = this; 23 self.addEvents('xcc_cfets_checkboxcolumn_checked'); 24 var renderTpl = 25 '<div id="{id}-titleEl" {tipMarkup}class="' + Ext.baseCSSPrefix + 'column-header-inner">' + 26 "<input type='checkbox'>"+ 27 '<span id="{id}-textEl" class="' + Ext.baseCSSPrefix + 'column-header-text' + 28 '{childElCls}">' + 29 '{text}' + 30 '</span>' + 31 '<tpl if="!menuDisabled">'+ 32 '<div id="{id}-triggerEl" class="' + Ext.baseCSSPrefix + 'column-header-trigger' + 33 '{childElCls}"></div>' + 34 '</tpl>' + 35 '</div>' + 36 '{%this.renderContainer(out,values)%}'; 37 self.renderTpl=renderTpl; 38 self.renderSelectors= { 39 checkbox: "input[type='checkbox']" 40 }; 41 self.callParent(arguments); 42 self.on('afterrender',function(comp, eOpts ){ 43 var checkboxDom = comp.checkbox.dom;//複選框 44 checkboxDom.onclick = function (event) { 45 console.info("複選框選中狀態==>"+checkboxDom.checked); 46 comp.fireEvent('xcc_cfets_checkboxcolumn_checked',comp,checkboxDom,checkboxDom.checked); 47 event.stopPropagation();//中止事件向上傳播 48 }; 49 }); 50 }, 51 /** 52 * 獲取複選框的選中狀態 53 */ 54 isChecked: function () { 55 return this.checkbox.dom.checked; 56 }, 57 /** 58 * 設置複選框的選中狀態 59 * @param checked 是否選中 60 */ 61 setChecked: function (checked) { 62 this.checkbox.dom.checked = checked; 63 } 64 });