Ext.grid.Panel是个非常强大的数据表格组件，可以轻松的实现数据的增、删、改、查、过滤、排序等等，用来操作和管理数据非常方便。很多童鞋经常问到grid数据初始化时如何默认全选、默认选中指定的数据等等一些简单而又无从下手的问题，说白了其实就是懒得看api。
本文将介绍grid数据表格中数据选择的各种操作。
首先先创建一张简单的数据表格（直接使用api文档中grid的示例代码加以修改）：
var userStore=Ext.create('Ext.data.Store', {
storeId: 'simpsonsStore',
fields:[ 'name', 'email', 'phone'],
data: [
{ name: 'Lisa', email: 'lisa@simpsons.com', phone: '555-111-1224' },
{ name: 'Bart', email: 'bart@simpsons.com', phone: '555-222-1234' },
{ name: 'Homer', email: 'homer@simpsons.com', phone: '555-222-1244' },
{ name: 'Marge', email: 'marge@simpsons.com', phone: '555-222-1254' }
]
});
var userGridPanel=Ext.create('Ext.grid.Panel', {
title: 'Simpsons',
selModel: {
selType: 'checkboxmodel',
injectCheckbox: 0,
mode: "MULTI", //"SINGLE"/"SIMPLE"/"MULTI"
checkOnly: true //只能通过checkbox选择
},
store: userStore,
columns: [
{ text: 'Name', dataIndex: 'name' },
{ text: 'Email', dataIndex: 'email' },
{ text: 'Phone', dataIndex: 'phone' }
],
tbar:[
{
text:'全选',
handler:function(btn){
var grid = btn.up('grid') || btn.up('gridpanel');
//selectAll 可传入 suppressEvent 参数，suppressEvent为true时将会忽略监听选中事件
grid.getSelectionModel().selectAll();
}
},
{
text:'取消全选',
handler:function(btn){
var grid = btn.up('grid') || btn.up('gridpanel');
grid.getSelectionModel().deselectAll();
}
},
{
text:'选中第二个',
handler:function(btn){
var grid = btn.up('grid') || btn.up('gridpanel');
//可以通过索引选中
grid.getSelectionModel().select(1);
}
},
{
text:'选中Bart,Marge',
handler:function(btn){
var grid = btn.up('grid') || btn.up('gridpanel');
//可以直接找出数据对象再选中
var records=userStore.queryRecordsBy(function(rec){
return rec.get('name')=='Bart' || rec.get('name')=='Marge';
});
grid.getSelectionModel().select(records);
}
}
]
});
看看结果：
好，想要的效果已经出来了，那么来看看具体的代码。
各种选中按钮的实现代码，代码很少很简单：
使用grid.getSelectionModel() 可以获取到grid绑定的数据选择模型Ext.selection.Model ，通过这个模型，可以跟踪和操作组件中的数据选择记录，
通过查询api，不难发现Ext.selection.Model 这个东西中有很多很实用的方法：
selectAll：全选，选择视图中的所有记录
select ：按实例数据对象或者索引选中数据
deselectAll ：取消全选，取消选择视图中的所有记录
deselect：按实例数据对象或者索引取消选中数据
等等……
更多的就需要在实际应用中去合理运用，更重要的是多查询api,去发现更多的使用方式
