ExtJS入门教程08，grid单选、多选，显示选择框列

ExtJS入门教程08，grid单选、多选，显示选择框列

 2014-04-10      3114

关于extjs grid的内容，已经进行了4篇，分别是：

• ExtJS入门教程04，这是一个超级好用的grid
• ExtJS入门教程05，grid的异步加载数据
• ExtJS入门教程06，grid分页的实现
• ExtJS入门教程07，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);