Extjs grid添加多选按钮

妖狐艹你老母 2022-06-05 11:54 407阅读 0赞

# 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><<返回<<</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的值了，接下来就能操作了。