Extjs grid添加多选按钮

Extjs grid添加多选按钮

我们在用extjs开发gird列表时很多时候我们都会面临向列表添加一个多选的按钮，在extjs中这个功能要实现比较简单，extjs内部已经考虑到这个问题具体我们以下面的代码来解读。

Ext.create('Ext.container.Viewport', {layout: 'border',renderTo: Ext.getBody(),items: [{region: 'center', id: 'plCenter', xtype: 'grid', title: "【文章】" + _json_base.FolderName, header: true, forceFit: false, autoScroll: true,store: Ext.create('Ext.data.Store', {storeId: 'storeid_grid', autoLoad: false,model: 'model_grid',pageSize: 30,proxy: {type: 'ajax',url: 'url',reader: {type: 'json',root: 'items',totalProperty: 'total'},startParam: 'start',limitParam: 'limit'}}),selType: 'checkboxmodel',columns: [{header: '文章标题', dataIndex: 'ItemTitle', width: 300}, {header: '提交时间', dataIndex: 'CreatedDate', width: 120}, {header: '权重', dataIndex: 'OrderNum', width: 80}, {header: '显示方式', dataIndex: 'ViewType', width: 150}],dockedItems: [{xtype: 'toolbar',dock: 'top',items: [{text: '&gt;&gt;刷新&lt;&lt;',handler: function () {location.reload();}}, '关键字:', {xtype: 'textfield', id: 'id_search_kw', width: 88, hideLabel: true, value: ''}, {text: '&gt;&gt;查找',handler: function () {LoadItems();}}, '-', {text: '[新建文章]',handler: function () {AddUpdate(this, '');}}, '-', {text: '[删除选中]',handler: function () {DeleteSelect('删除选中，只有状态为草稿的才会删除');}}, '->', {text: '<b>&lt;&lt;返回&lt;&lt;</b>',handler: function () {location.href = _json_base.path_news;}}]}, {xtype: 'pagingtoolbar', id: 'grid_pagingtoolbar',store: Ext.getStore('storeid_grid'),dock: 'bottom',displayInfo: true}],listeners: {afterrender: function () {LoadItems();}}}, {region: 'south', hidden: true}]});

我们创建了一个viewport里面再创建了一个gridpanel，在panel中我们定义了这么一个属性

selType: ‘checkboxmodel’

定义好后就自动在列表加上了全选属性，通常这个是配套selModel这个属性的

selModel: {injectCheckbox: 0,  //默认在第一列添加复选框checkOnly: true     //只能通过checkbox选择
}

更多的配置属性可以参考extjs的Ext.selection.CheckboxModelView的各项配置
当我们选择了我们想要的行后怎么来获取选中的值呢？具体有两种方式

1、var selectModels = Ext.getCmp(‘plCenter’).selModel.getSelection();
2、var selectModels = Ext.getCmp(‘plCenter’).getSelectionModel().getSelection();

下一步就是获取选中的值

selectModels[i].data[‘ItemTitle’]

就能获得列名为ItemTitle的值了，接下来就能操作了。