extjs grid选择框默认全选_ExtJS4.2 Grid知识点六：自动选中指定记录、自动选中全部记录、反向选择...

本节主要学习ExtJS4.2 Grid自动选中指定记录、自动选中全部记录、反向选择，即在表格Grid加载数据后自动将符合条件的记录行选中，示例图片：

本例是通过监听Grid的afterrender事件来实现自动选择指定记录行，代码如下实现自动选中性别为男性的记录行：

自动选中指定记录代码

'userlist': {

afterrender: function(testGrid){//侦听goodslistview渲染

// 选中所有记录

//testGrid.getSelectionModel().selectAll();

var records=testGrid.getStore().getRange();

for(var i=0;i

var record=records[i];

if(record.get('type')==1) {

testGrid.getSelectionModel().select(record,true);

}

}

}

}

自动选中全部记录代码

'userlist': {

afterrender: function(testGrid){//侦听goodslistview渲染

// 选中所有记录

testGrid.getSelectionModel().selectAll();

}

}

在Grid顶部添加“反向选择”按钮，实现反向选择功能。

dockedItems: [{

xtype: 'toolbar',

items: [{

text:'反向选择',

tooltip:'反向选择',

action: 'selectOthers'

}]

}]

给“反向选择”按钮添加事件，点击“反向选择”按钮可以取消选中当期已选中的记录，并同时选中当前所有未选中的记录。

'userlist[id=testGrid] button[action=selectOthers]': {

click: this.selectOthers

}

selectOthers: function(button) {

var testGrid=Ext.getCmp('testGrid');

var records=testGrid.getStore().getRange();

var selectModel=testGrid.getSelectionModel();

for(var i=0;i

var record=records[i];

if(selectModel.isSelected(record)) {

selectModel.deselect(record);

}else {

selectModel.select(record,true);

}

}

}

点击“反向选择”按钮后结果图片如下