Extjs gridpanel 加入全选列

我们在用Extjs的gridpanel时,往往会用到选择列,该选择列最好带有全选和取消全选功能。

具体代码如下:

var tableCheckboxModel = Ext.create('Ext.selection.CheckboxModel', {
    mode:"SIMPLE",
    showHeaderCheckbox: true
});

Ext.define('BaseDataGeneApp.view.TableReleationList', {
    extend: 'Ext.grid.Panel',
    alias: 'widget.tableReleationList',
    title: '关联表',
    store: 'BaseDataTableRelations',
    selModel: tableCheckboxModel,
    allowDeselect: true,
    columns :[
        {header: '字段名',dataIndex: 'columnName',width: 120},
        {header :'关联表名',dataIndex :'releatedTable',width :120}
    ]
});

我们首先定义一个CheckboxModel,然后在定义gridPanel时,加入

selModel: tableCheckboxModel,
allowDeselect: true

这样就可以得到如下图所示的gridpanel

Extjs gridpanel 加入全选列

var selectedTableRelations = Ext.ComponentQuery.query('tableReleationList')[0].
   getSelectionModel().getSelection();

通过上述代码,可以得到选中的数据。


你可能感兴趣的:(ExtJs,gridPanel,全选取消全选列)