GridPanel列头带有复选框的列

Posted 2022-01-02 thaipine

由于工作需要，封装了ExtJS4，GridPanel列头带有复选框的列，

代码如下：

 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" tipMarkupclass="‘ + 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 );