GridPanel列頭帶有複選框的列

因爲工做須要,封裝了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 });
相關文章
相關標籤/搜索