ExtJS4.2 Grid知识点五：多选行（可以点击行选中记录与只能点击多选框选中记录）

本节主要学习ExtJS4.2 Grid多选行知识，示例图片：




在线演示 / 示例代码

主要内容如下：

可以点击行选中记录与只能点击多选框选中记录

选中Grid中数据加载到Form

获取Grid中多行数据，生成JSON格式

1.可以点击行来选中记录，此时多选Grid只需要配置selType: 'checkboxmodel'，此时有一个缺陷，当你通过多选框勾选多条记录时，如果不小心点击某行，则当前点击行被选中，其它选中的记录行都被取消选择了。

2.只能点击多选框选中记录，此时多选Grid需要配置selModel: new Ext.selection.CheckboxModel({checkOnly:true})，将checkOnly设为true，此时点击行记录时该行不会被选中，只能通过点击每行左边的多选框来选中行。

核心代码如下：

app.js

Ext.onReady(function(){
//开启悬浮提示功能
Ext.QuickTips.init();
//开启动态加载
Ext.Loader.setConfig({
enabled: true
});
//创建应用程序的实例
Ext.application({
//这里的requires需要是个数组，extjs源码没处理好只有一个requires的情况
requires: ['Ext.container.Viewport'],
name: 'Itdatum',
appFolder: 'app',

controllers: [
'UserController'
],

launch: function() {
Ext.create('Ext.panel.Panel', {
width:750,
layout: 'fit',
renderTo:'form-itdatum',
items: {
xtype: 'userlist',
id:'testGrid1',
title: '多选表格-可以点击行记录选中',
selType: 'checkboxmodel'
}
});

Ext.create('Ext.panel.Panel', {
width:750,
layout: 'fit',
renderTo:'form-itdatum-checkbox',
items: {
xtype: 'userlist',
id:'testGrid2',
title: '多选表格-只能点击多选框选中',
selModel: new Ext.selection.CheckboxModel({checkOnly:true})
}
});
}
});
});

为id=testGrid1的Grid上的按钮添加事件：

this.control({
'userlist[id=testGrid1] button[action=save]': {
click: this.saveUser
},
'userlist[id=testGrid1] button[action=edit]': {
click: this.editUser
}
});

在saveUser中获取选中行，并将数据组织成JSON格式：

saveUser: function(button) {
var testGrid1=Ext.getCmp('testGrid1');
var records=testGrid1.getSelectionModel().getSelection();
if(records.length==0) {
Ext.MessageBox.alert('提示','请选择记录');
}else {
alert(Itdatum.net.grid.encodeRecords(records));
}
}

在editUser中获取选中行，并将数据加载到FormPanel中：

editUser: function(button) {

var testGrid1=Ext.getCmp('testGrid1');
var records=testGrid1.getSelectionModel().getSelection();
if(records.length==0) {
Ext.MessageBox.alert('提示','请选择记录');
}else if(records.length>1){
Ext.MessageBox.alert('提示','只能选择一条记录');
}else {
Ext.widget('useredit').down('form').loadRecord(records[0]);
}
}

本文出自 “Itdatum” 博客，请务必保留此出处http://itdatum.blog.51cto.com/1152235/1540268