GridPanel列头带有复选框的列

由于工作需要,封装了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" {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 });

原文地址:https://www.cnblogs.com/thaipine/p/10998732.html

时间: 2024-10-10 22:23:35

GridPanel列头带有复选框的列的相关文章

DateGridView标题列头添加复选框

第一:添加列标题时,添加两个空格--用于显示复选框: 第二:实现列标题添加复选框,代码如下: private void AddCheckeBoxToDGVHeader(DataGridView dgv) { for (int i = 0; i < this.dgvList.Columns.Count; i++) { System.Windows.Forms.CheckBox ckBox = new System.Windows.Forms.CheckBox(); //ckBox.Text = &qu

实现在DevExpress.XtraGrid.GridControl的列头绘制复选框以实现全选的功能

首先新建一个Win Form测试项目,拖一个GridControl控件到窗体上. 1 public partial class Form1 : Form 2 { 3 public Form1() 4 { 5 InitializeComponent(); 6 } 7 8 private Rectangle checkBoxColumnHeaderRect = Rectangle.Empty; 9 private GridColumn checkBoxColumn = null; 10 privat

【VC编程技巧】控件?4.4ListBox控件(打造带有复选框的ListBox)

4.4ListBox控件(打造带有复选框的ListBox) 下面通过两种方式构建复选框ListBox 1.对话框中插入ListBox控件(IDC_LIST1,IDC_LIST2),如下设置属性 图1 方式一: 2.对ListBox控件(IDC_LIST1)关联控件变量m_checkListBox1,将控件变量类型CListBox -> CCheckListBox(需要手动完成). //修改控件变量类型:CListBox -> CCheckListBox CCheckListBox m_chec

gridview列前加复选框需要注意的一点

前言 获取gridview每一列前面的复选框,然后获取选中的这一行的id.aspx页面,我不喜欢用这个,有的公司用自己封装的,基本上都是用封装的,这是我知道的.也有用Repeater的.可能是因为gridview微软该给提供的都提供了吧.很强大,不该要的也有了.废话说了不少,说说我自己做的时候问题吧. 过程 自己简单实现了一些,只是为了说明注意的那个问题. 前台代码 后置代码: 总结 我就考虑到绑定数据和获取checkbox是否被选中,数据显示出来了,这没问题了,然后就获取复选框的代码也对.但是

element-ui的树型结构图,带有复选框的,没有子项的,横排展示

// 修改树形图样式,如果不含有下箭头的块,要变成行内样式 treeChildInline(){ let hasCaretRight = $("#permission_panel").find(".is-leaf"); $.each(hasCaretRight,(index:number,item:any)=>{ let hasChildNodeList= item.closest('.el-tree-node'); item.closest('.el-tre

GridControl 选择列、复选框全选

说明: GirdControl 中添加一列,这一列不是写在数据库中的,而是代码中添加的. 图示: 底层类代码: #region GridControl 全选 /// <summary> /// 是否选中 /// </summary> private static bool chkState = false; //复选框列名称 private static string chkFileName = ""; //复选框列宽 private static int ch

Bootstrap之表格checkbox复选框全选

效果图: HTML中无需添加额外的一列来表示复选框,而是由JS完成,所以正常的表格布局就行了: [html] view plain copy <table class="table table-bordered table-hover"> <thead> <tr class="success"> <th>类别编号</th> <th>类别名称</th> <th>类别组<

Bootstrap之表格checkbox复选框全选 [转]

转自: http://blog.csdn.net/shangmingchao/article/details/49761315 效果图: HTML中无需添加额外的一列来表示复选框,而是由JS完成,所以正常的表格布局就行了: [html] view plain copy <table class="table table-bordered table-hover"> <thead> <tr class="success"> <

Dev+Grid复选框

public class GridControlHelp { /// <summary> /// 是否选中 /// </summary> private static bool chkState = false; //复选框列名称 private static string chkFileName = ""; //复选框列宽 private static int chkWidth = 30; //GridView public static DevExpress