【问题标题】:ExtJS 3 multiple stateful grids (but with different stateIds)ExtJS 3 多个状态网格(但具有不同的 stateIds)
【发布时间】:2013-02-07 11:36:23
【问题描述】:

我有我的网格,它会覆盖 Ext.grid.GridPanel

我在我网站的 2 个地方使用了这个网格。我为他们生成了 2 个不同的 stateId:

构造函数:

TasksGrid.superclass.constructor.call(this, {
    id: genId,
    cls: 'tasks-grid',
    border: false,
    loadMask: {msg: 'Loading...'},
    sm: sm,
    stateful: true,
    stateId: 'tasks-grid'+(config.booClientTab ? '-clients-tab' : ''), // depending on config.booClientTab I setup one or other stateId
...

我在现场 2 个地方调用此代码来创建 2 个网格:

this.TasksGrid = new TasksGrid(this, {
    region: 'west',
    split: true,
    width: tasksGridWidth ? tasksGridWidth : defaultWidth,
    booShowToolbar: true,
    booClientTab: !empty(config.clientId) // if true, 1 stateId will be setup, false - other
});

但是,当我测试时,状态仅应用于 2 个生成的网格中的第一个!!我检查了 cookie:似乎一切正常:创建了 2 个具有 2 个不同名称的 cookie。但是...状态仅适用于“this.TasksGrid = new TasksGrid”的第一次调用!!!

ExtJS 版本:3.0

有什么想法吗?

【问题讨论】:

    标签: extjs grid state extjs3


    【解决方案1】:

    我遇到了同样的问题。状态只能在初始化期间而不是在初始化之后应用于组件。因此它第一次起作用,但之后不起作用。幸运的是,您使用的是 EextJs 3,以下代码在 ExtJS 3 中为我工作,但在 4 中没有。基本上,当您将新/其他状态应用于网格时,只需调用

    MyGrid = Ext.extend(Ext.grid.GridPanel,
    {
        /* @private */
        constructor: function(config)
        {
            MyGrid.superclass.constructor.call(this, config);
        },
        initComponent: function()
        {
            var cfg =
            {
                border: true,
                bodyBorder: false,
                stateful: true,
                stateId: 'grid',
                tbar:
                    [{
                        text: 'View name'
                    },{
                        xtype: 'combo',
                        width: 80,
                        typeAhead: true,
                        triggerAction: 'all',
                        mode: 'local',
                        forceSelection: true,
                        hiddenName: 'stateId',
                        selectOnFocus:true,
                        displayField:'name',
                        ref: '../stateCombo',
                        valueField: 'id',
                        listeners:
                        {
                            scope: this,
                            change: function(combo, newValue, oldValue)
                            {
                                newValue = parseInt(newValue, 10); var grd = this;
                                grd.el.mask('Applying the view please wait');
                                var data = combo.store.data.items;
                                Ext.each(data, function(d)
                                {
                                    d.data.id = parseInt(d.data.id, 10);
                                    if(d.data.id === newValue)
                                    {
                                        Ext.util.Cookies.set('reportStateName', d.data.machineName);
                                        grd.applyState(MyStateProvider.decodeState(d.data.value));
                                        var conf = grd.getColumnModel().config;
                                        grd.getColumnModel().setConfig(conf);
                                        grd.doLayout();
                                        grd.getView().updateAllColumnWidths();
                                        grd.getView().refresh(true);
                                        return;
                                    }
                                });
                                grd.el.unmask();
                                grd = null;
                            }
                        },
                        store: new Ext.data.JsonStore
                            ({
                                fields:
                                    [{
                                        name: 'id',
                                        type: 'int'
                                    }],
                                proxy : new Ext.data.HttpProxy
                                    ({
                                        method: 'GET',
                                        url: BASEURL + 'getsavedstate'
                                    }),
                                idProperty: 'id'
                            })
                    }]
            };
            //we use applyIf for configuration attributes that should be left configurable
            Ext.applyIf(this, cfg);
            //ensure that any extra configurations that are set in initComponent method are applied to initialConfig:
            Ext.applyIf(this.initialConfig, cfg);
            /*
             * Properties specified here are safe/protected from being overridden
             * by an instance, so any 'private' default properties might be specified here.
             */
            //some attributes we may want to keep unaltered, so we use Ext.apply non-alterable configurables
            cfg =
            {
                sm: new Ext.grid.RowSelectionModel({singleSelect:true}),
                stripeRows: true,
                loadMask: true
            };
            Ext.apply(this, cfg);
            //need this to work sometimes:
            Ext.apply(this.initialConfig, cfg);
            MyGrid.superclass.initComponent.apply(this, arguments);
            this.on
                ({
                    afterrender: function(grid)
                    {
                        var grd = this;
                        this.stateCombo.getStore().load
                            ({
                                callback: function(data, options, success)
                                {
                                    grd.saveAsStateBtn.enable();
                                    var applied = false;
                                    var setStateValue = Ext.util.Cookies.get('reportStateName');
                                    Ext.each(data, function(d)
                                    {
                                        //meaning no cookie was set so first time.
                                        if(setStateValue === null)
                                        {
                                            if(d.data.machineName === 'default')
                                            {
                                                if(d.data.value !== '')
                                                {
                                                    grd.applyState(MyStateProvider.decodeState(d.data.value));
                                                    applied = true;
                                                    grd.stateCombo.setValue(d.data.id);
                                                    return;
                                                }
                                                applied = true;
                                                grd.stateCombo.setValue(d.data.id);//Here value should be fetched from cookie
                                                return;
                                            }
                                        }
                                        else//Cookie was set
                                        {
                                            if(d.data.machineName === setStateValue)
                                            {
                                                if(d.data.value !== '')
                                                {
                                                    var s = MyStateProvider.decodeState(d.data.value);
                                                    grd.applyState(s);
                                                    applied = true;
                                                    grd.stateCombo.setValue(d.data.id);//Here value should be fetched from cookie
                                                    return;
                                                }
                                                else
                                                {
                                                    return;
                                                }
                                            }
                                        }
                                    });
                                    //grd.doLayout();
                                    if(data.length !== 0)
                                    {
                                        grd.stateCombo.enable();
                                        grd.saveStateBtn.enable();
                                    }
                                    var conf = grd.getColumnModel().config;
                                    grd.getColumnModel().setConfig(conf);
                                    grd.doLayout();
                                    grd.getView().updateAllColumnWidths();
                                    grd.getView().refresh(true);
                                    grd.doLayout();
                                    grd.el.unmask();
                                }
                            });
                        this.el.mask('Applying the saved view please wait');
                    },
                    scope: this
                });
        },
        onRender: function (container, position)
        {
            MyGrid.superclass.onRender.apply(this, arguments);
            var el = this.el;
            var grd = this;
            this.saveStateWindow = new MySaveStateWindow
                ({
                    grid: grd,
                    renderTo: el
                });
        },
        // template method
        /* @private */
        initEvents: function()
        {
            MyGrid.superclass.initEvents.apply(this, arguments);
        },
        afterRender: function()
        {
            MyGrid.superclass.afterRender.apply(this, arguments);
        },
        // template method
        /* @private */
        beforeDestroy: function()
        {
            //Call parent
            MyGrid.superclass.beforeDestroy.apply(this, arguments);
        },
        onDestroy: function()
        {
            this.saveStateWindow.destroy();
            MyGrid.superclass.onDestroy.apply(this, arguments);
        }
    });
    

    【讨论】:

    • 对不起,但似乎没有帮助......或者我没有正确使用您的代码。我在“this.TasksGrid = new TasksGrid”块之后复制/粘贴了您的代码,用我的 var this.TasksGrid 替换了您的 var 网格
    • 您必须在应用状态后应用代码,例如 grid.applyState(state);在网格本身的初始化过程中,不需要上面的代码。
    • 我也有同样的问题,你能(nicholasnet)向我们展示完整的工作示例吗?
    • 例如感谢@nicholasnet。但是我不清楚 - 您将网格设置为有状态并且以后没有使用该状态 ID。您仅从您保存在组合框项目中的信息(以及之前从服务器加载)中加载和设置信息。据我了解-fcunited 需要在第二次渲染网格时加载列的状态。那么我们如何获取当前状态并在需要时加载呢?
    猜你喜欢
    • 2011-11-01
    • 2011-10-10
    • 2012-09-26
    • 1970-01-01
    • 1970-01-01
    • 2017-11-23
    • 2013-05-29
    • 2012-11-02
    • 1970-01-01
    相关资源
    最近更新 更多