ExtJS 3 多个状态网格（但具有不同的 stateIds）
Posted
技术标签:
【中文标题】ExtJS 3 多个状态网格（但具有不同的 stateIds）【英文标题】：ExtJS 3 multiple stateful grids (but with different 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
有什么想法吗？
【问题讨论】：
【参考方案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 需要在第二次渲染网格时加载列的状态。那么我们如何获取当前状态并在需要时加载呢？以上是关于ExtJS 3 多个状态网格（但具有不同的 stateIds）的主要内容，如果未能解决你的问题，请参考以下文章