思路
1.定義grid的selType的屬性值爲checkboxmodel
2.定義一個全局的數組屬性arrayChecks來存入每次選擇的數據的id
3.設置監聽,監聽勾選和取消勾選時從數組arrayChecks中加入勾選數據和移除勾選數據
4.設置selModel屬性處理checkboxmodel,包括:
4.1:設置是否只能通過checkbox來選擇
4.2:設置是否允許回顯
4.3:對全選的操作,只要全選,就選擇當前頁全部數據,翻頁時,未被全選,如果翻頁全選時,全選框會默認勾選
代碼如下
Ext.define('yourGridUrl', {
extend: 'Ext.grid.Panel',
xtype: 'yourGrid',
alias: 'widget.yourGrid',
store: 'yourStores',
selType: 'checkboxmodel', // cellmodel
plugins : [ 'tbarbtncontrol' ],
border: false,
overflowX: 'auto',
layout: 'fit',
width: 50,
height : 400,
stripeRows: true,
arrayChecks: [],
columns: [{
dataIndex: 'id',
text: '唯一標識',
hideable : false,
width: 70,
hidden: true
}, {
dataIndex: 'name',
text: '名稱',
width: 70
}],
//分頁組件
bbar: {
xtype: 'pagingToolbar',
store: 'yourStores',
displayInfo: true
},
listeners: {
select: function (data, receder, index) {
var me = this;
me.arrayChecks.push(receder.raw.id);
},
deselect : function (data, receder, index) {
var me = this;
var arrayChecks= me.arrayChecks;
//根據元素進行刪除數組中的數據
var index = arrayChecks.indexOf(receder.raw.id);
arrayChecks.splice(index,1);
}
},
selModel: {
checkOnly: false, //只能通過checkbox選擇
pruneRemoved: false,
onHeaderClick: function (headerCt, header, e) {
isChecked = false;
if (header.isCheckerHd) {
e.stopEvent();
var me = this,
isChecked = header.el.hasCls(Ext.baseCSSPrefix + 'grid-hd-checker-on');
me.preventFocus = true;
if (isChecked) {
for (var i = 0; i < this.store.data.items.length; i++) {
this.deselect(this.store.data.getAt(i), null);
}
} else {
me.selectAll();
header.el.addCls(Ext.baseCSSPrefix + 'grid-hd-checker-on');
}
delete me.preventFocus;
}
}
}
});