extjs4当中的gridpanel，翻页后保持复选框内容。

最新推荐文章于 2016-09-13 15:00:39 发布

原创最新推荐文章于 2016-09-13 15:00:39 发布 · 1.3k 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#extjs4 #翻页 #复选

extjs 同时被 3 个专栏收录

2 篇文章

订阅专栏

翻页

1 篇文章

订阅专栏

复选

1 篇文章

订阅专栏

本文介绍如何在ExtJS中实现数据网格的选择状态与数组之间的同步，包括加载数据时的状态保持及选择操作的响应机制。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

这还真意外的花了一些时间，赶紧写下来有助于记忆……

说真的对extjs控件命令了解的太少了，还得多下点功夫才行……

Ext.extend(DsTruck.FinanceOut, Ext.Panel, {
    PageSize: 6,//用于控制每页的行数
    ChangePage: false,//用于判断此次deselect是点击触发的还是由翻页触发的
    //array: new Array(),


    initUIComponents: function () {
        this.FOBodyDel = [];
        this.array = [];

        //定义数据集
        this.storeList = Ext.create('Ext.data.Store', {
            model: 'Mainmb',
            remoteSort: false,
            pageSize: this.PageSize,
            proxy: {
                type: 'ajax',
                url: '/Import/FinanceOut/GetMainList',
                reader: {
                    idProperty: 'ContractNo' + 'HTH',
                    root: 'data',
                    totalProperty: 'totalCount'
                }
            }

这个js代码段基于一个基础js文件DsTruck。首先定义一个数据集

然后需要给它加上listener

        var _this = this;//个人感觉这个意思是将作用域定义向下传递了一层。不这样写的话，listener内就无法引用this.array。

//其实我这个理解可能不准确，希望有高手能解答我这个疑问……

        this.storeList.addListener('load', function (store, rds, opts) {
            var grid = Ext.getCmp('gridList');
            var sm = _this.MainGridCheckBoxModel;
            var total = store.getCount(); //数据行数  
            //var Tarray = Ext.getCmp('array');
            //alert(_this.array.length);
            for (var i = 0; i < total; i++) {
                var row = store.getAt(i);
                var contractno = row.get('ContractNo');
                if (Ext.Array.indexOf(_this.array, contractno, 0) > -1) {
                    grid.selModel.select(i, true,false);
                    
                }
            }
            grid.getSelectionModel().addListener('deselect', sm, this); //添加checkboxModel的deselect事件,第三个参数this 可不写,下同
            _this.ChangePage = false;
        });


        this.storeList.addListener('beforeload', function () {
            var grid = Ext.getCmp('gridList');
            var sm = _this.MainGridCheckBoxModel;
            _this.ChangePage = true;
            //grid.getSelectionModel().removeListener('deselect', sm, this);
        });


	//此段没有如预料中起作用，原因不明

        //这一段以及注掉的那行，作用是消除“翻页触发的deselect”的影响

这样其实就是让显示的列表中，合同号处于array数组内的行保持被选中的状态。

还需要维护这个array的内容，让被选的加入，取消选择的删除。

    this.gridList.getSelectionModel().on('deselect', function (sm, rec) {
        //alert('取消勾选的name:'+record.data.ContractNo); 

        //alert(Ext.Array.include(this.array, '100')); undifine
        if (!_this.ChangePage) {//如果不是翻页 那么从array中删除这个合同号
            Ext.Array.remove(this.array, rec.data.ContractNo);
        }
    },
    this);

    this.gridList.getSelectionModel().on('select',
        function (model, record, index) {
            this.C_contractno = record.data.ContractNo;//还有别处用得着这个“最后选中的合同号”
            this.array.push(record.data.ContractNo);//把合同号放进array
……………………

gridList就是使用storeList数据集的那个gridpanel，这两个段落可以看作给它加上select和deselect方法……姑且这么认为吧
后台用的是C#.net2010 ，如上所见，这点东西和后台一点关系都没有……