Ext --Grid复选框列
在网上找了好多但是都是所问非所答，最后找到了两篇比较好的文章，记录下
今天我们主要介绍一下grid的单选、多选功能，并告诉小伙伴们如何显示一个选择框列
extjs grid默认支持单选
在前面几节的例子中，我们已经见识了extjs grid的强大。今天说到单选和多选，我们不妨打开前面的例子，其实在grid默认的情况下已经可以进行单选的，如图：
extjs grid的行选择
在extjs grid的配置项中，有两个配置项和选择有关：
- selModel：选择类型的对象，或者选择类型的配置对象，可以进行更多的配置（单选、多选，多选框的位置等）
- selType：选择类型的字符串，不能进行更多的设置
selModel示例：
xtype: "grid",
store: myStore,
selModel: {
selection: "rowmodel",
mode: "MULTI"
},
columns: [
{ xtype: "rownumberer", text: "行号", width: 50 },
{ text: "姓名", dataIndex: "Name" },
{ text: "年龄", dataIndex: "Age" }
]selType示例：
xtype: "grid",
store: myStore,
selType: "checkboxmodel",
columns: [
{ xtype: "rownumberer", text: "行号", width: 50 },
{ text: "姓名", dataIndex: "Name" },
{ text: "年龄", dataIndex: "Age" }
]extjs grid 多行选则
上面已经介绍了如何进行选择，下面就是实际的多选了。默认情况下extjs grid的选择模型为rowmodel，我们可以通过rowmodel进行行选择（还有一个cellmodel，是用来进行单元格选择的）。
rowmodel默认的选择模型为单行的选择，也就是我们最开始看到的，只能选中一行，要想让它支持多行选择，就要进行相应的配置：
selModel: {
selection: "rowmodel",
mode: "MULTI"
}注意配置项mode，这家伙用来控制是单行选择还是多行选择的，可用的值有3个：
- SINGLE：单行选择
- SIMPLE：多行选择，单击选中/取消选中行
- MULTL：多行选择，支持CTRL、SHIFT功能键，如果要进行多选，需要按住ctrl键。用shift可以进行区域选择
extjs grid 使用多选框
使用选择框的选择模型是checkboxmodel，来看看下面的代码：
xtype: "grid",
store: myStore,
selModel: Ext.create("Ext.selection.CheckboxModel", {
injectCheckbox: 1,//checkbox位于哪一列，默认值为0
mode: "single",//multi,simple,single；默认为多选multi
checkOnly: true,//如果值为true，则只用点击checkbox列才能选中此条记录
allowDeselect: true,//如果值true，并且mode值为单选（single）时，可以通过点击checkbox取消对其的选择
enableKeyNav: true
}),
columns: [
{ xtype: "rownumberer", text: "行号", width: 50 },
{ text: "姓名", dataIndex: "Name" },
{ text: "年龄", dataIndex: "Age" }
]效果如下：
extjs grid 获取选中行
要得到选中行，我们首先要找到grid，然后得到grid的selectionModel，然后再找到选择行，代码如下：
var grid = win.down("grid");
var records = grid.getSelectionModel().getSelection();
Ext.MessageBox.alert("提示", records.length);大家都知道GridPanel是一个非常好用的控件，但是没有像C#一样的自定义的复选框。那我们就手工给它加一个复选框列，并实现全选清除获取选中的数据。以下GridPanel简称GP。
第一种：自己增加一个CheckColumn来实现选中与否
1.首先在GP的Store里面增加一个是否选中的字段源：
2.在GP的ColumnModel里，增加我们的第一行复选框：
3.实现点击复选框的时候界面能够实现选中状态。在GP的事件里增加CellClick，我们命名为：clickOne。
4.function clickOne(gridview, td, value, data, tr) {
if (data.data.IsSelect)
data.data.IsSelect = 1;
else data.data.IsSelect = 0;
App.GP.store.commitChanges();
App.GP.view.refresh();
}。其实就是改变数据源的IsSelect字段的值，然后在刷新GP，界面上看到的就是选中状态了。
那么接下来我们实现全选和清除全选就简单多了。在GP增加2个全选和清除按钮。调用的事件如下：
//清除所有选择
function clear() {
var dataList = App.GP.store.data.items;
if (dataList.length > 0) {
for (var i = 0; i < dataList.length; i++) {
var data = dataList[i].data;
if (data.IsSelect == 1) {
data.IsSelect = 0;
}
}
}
App.GP.store.commitChanges();
App.GP.view.refresh();
}
//全部选择
function selectAllMasterial() {
var dataList = App.GP.store.data.items;
if (dataList.length > 0) {
for (var i = 0; i < dataList.length; i++) {
var data = dataList[i].data;
if (data.IsSelect == 0) {
data.IsSelect = 1;
}
}
}
App.GP.store.commitChanges();
App.GP.view.refresh();
}
即可。
得到选中的数据则更简单了：
var dataList = App.GP.store.data.items;
if (dataList.length > 0) {
for (var i = 0; i < dataList.length; i++) {
var data = dataList[i].data;
if (data.IsSelect == 1) {
//这里就是你要获取得到的数据，然后执行你自己的操作了
}
}
}
第二种：就是EXT.NET自带的SelectionModel
1.在GP里增加一个选中模板：
//这里，可以加一系列的选中事件，这里只列出了3个，其他自己去看看还有哪些
2.如果需要特殊处理，就在选中模板里添加自己的事件。
3.获取选中的数据：App.gpContractList.selModel.selected;即可。
-------------------------------------------------------------------------------------------------------------------------------------------------------------------------
转自：https://blog.csdn.net/evilcry2012/article/details/52918064
转自：https://blog.csdn.net/lijingrong_ljr/article/details/50555336