Extjs grid添加多选按钮

Extjs grid添加多选按钮

我们在用extjs开发gird列表时很多时候我们都会面临向列表添加一个多选的按钮，在extjs中这个功能要实现比较简单，extjs内部已经考虑到这个问题具体我们以下面的代码来解读。

Ext.create('Ext.container.Viewport', {
        layout: 'border',
        renderTo: Ext.getBody(),
        items: [{
            region: 'center', id: 'plCenter', xtype: 'grid', title: "【文章】" + _json_base.FolderName, header: true, forceFit: false, autoScroll: true,
            store: Ext.create('Ext.data.Store', {
                storeId: 'storeid_grid', autoLoad: false,
                model: 'model_grid',
                pageSize: 30,
                proxy: {
                    type: 'ajax',
                    url: 'url',
                    reader: {
                        type: 'json',
                        root: 'items',
                        totalProperty: 'total'
                    },
                    startParam: 'start',
                    limitParam: 'limit'
                }
            }),
            selType: 'checkboxmodel',
            columns: [{
                header: '文章标题', dataIndex: 'ItemTitle', width: 300
            }, {
                header: '提交时间', dataIndex: 'CreatedDate', width: 120
            }, {
                header: '权重', dataIndex: 'OrderNum', width: 80
            }, {
                header: '显示方式', dataIndex: 'ViewType', width: 150
            }],
            dockedItems: [{
                xtype: 'toolbar',
                dock: 'top',
                items: [{
                    text: '>>刷新<<',
                    handler: function () {
                        location.reload();
                    }
                }, '关键字:', {
                    xtype: 'textfield', id: 'id_search_kw', width: 88, hideLabel: true, value: ''
                }, {
                    text: '>>查找',
                    handler: function () {
                        LoadItems();
                    }
                }, '-', {
                    text: '[新建文章]',
                    handler: function () {
                        AddUpdate(this, '');
                    }
                }, '-', {
                    text: '[删除选中]',
                    handler: function () {
                        DeleteSelect('删除选中，只有状态为草稿的才会删除');
                    }
                }, '->', {
                    text: '<b>&lt;&lt;返回&lt;&lt;</b>',
                    handler: function () {
                        location.href = _json_base.path_news;
                    }
                }]
            }, {
                xtype: 'pagingtoolbar', id: 'grid_pagingtoolbar',
                store: Ext.getStore('storeid_grid'),
                dock: 'bottom',
                displayInfo: true
            }],
            listeners: {
                afterrender: function () {
                    LoadItems();
                }
            }
        }, {
            region: 'south', hidden: true
        }]
    });

我们创建了一个viewport里面再创建了一个gridpanel，在panel中我们定义了这么一个属性

selType: ‘checkboxmodel’

定义好后就自动在列表加上了全选属性，通常这个是配套selModel这个属性的

selModel: {
    injectCheckbox: 0,  //默认在第一列添加复选框
    checkOnly: true     //只能通过checkbox选择
}

更多的配置属性可以参考extjs的Ext.selection.CheckboxModelView的各项配置
当我们选择了我们想要的行后怎么来获取选中的值呢？具体有两种方式

1、var selectModels = Ext.getCmp(‘plCenter’).selModel.getSelection();
2、var selectModels = Ext.getCmp(‘plCenter’).getSelectionModel().getSelection();

下一步就是获取选中的值

selectModels[i].data[‘ItemTitle’]

就能获得列名为ItemTitle的值了，接下来就能操作了。