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

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

 

在线演示  /  示例代码

 

主要内容如下：

1. 可以点击行选中记录与只能点击多选框选中记录
2. 选中Grid中数据加载到Form
3. 获取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]);
    }
}