在ExtJS中使用重新配置创建有状态网格

时间:2014-07-22 14:43:53

标签: extjs grid stateful

我们一直试图实现这一目标,但似乎不可能。

是否有办法创建有状态网格(即保存列的状态等),同时使用reconfigure: true加载数据?

基本上我们所拥有的是组合框,用于决定网格具有的

我们希望用户能够为每个组合框选项自定义网格的外观。每当组合框值更改时,我们使用reconfigure: true加载网格以使不同的进入。但是我们不知道如何保存这些列的状态。

状态保存在数据库中,stateId取决于组合框选项,以便我们知道我们正在查看哪种配置以及根据组合选择加载状态。但是从我们已经理解的情况来看,状态首先被应用,然后是重新配置,所以它总是混淆状态。

有人对此有任何想法吗?

如果你不完全理解我正在尝试做什么,那么我可以详细说明。

编辑:我们发现了一些关于所有这些过程是如何工作但仍然没有答案的东西。我们将尝试编辑ExtJS的核心代码,但我们更愿意找到不同的解决方案。

现在,当您创建有状态的可重配置网格时,会发生以下情况: 1.网格被创建 2.状态得到应用(来自数据库的那个) 3.网格被渲染,但由于它没有数据/列,因此它具有“空”状态 这个状态被保存回来(基本上破坏了我们原来正确的状态) 5.存储器被加载并且列被添加但是存在部分渲染(网格本身不会被重新渲染)。 6.状态现在是带有列的默认状态,它将保存回数据库

即使手动应用状态也不会执行任何操作,因为它不会被渲染。我们已经尝试了许多“渲染”选项,但似乎没有任何效果。有什么想法吗?

1 个答案:

答案 0 :(得分:4)

您可以覆盖getState和applyState函数以准确反映您的需求。

在getState中(获取当前状态,以便您的提供者可以将其保存到数据库中),例如:

getState: function() {
    var me = this;
    var state = me.callParent();
    var storeState = me.store.getState();

    if (storeState) state.storeState = storeState;

    var columns = me.getColumnManager().getColumns();
    var stateColumns = [];
    columns.forEach(function(e) {
      stateColumns.push({
        text: e.text,
        dataIndex: e.dataIndex,
        hidden: e.hidden,
        flex: e.flex,
      });
    });

    state = me.addPropertyToState(state, 'columns', stateColumns);
    return state;
}

您可以灵活地将组件的任何状态保存到state属性。 在setState方法中,您只需检索已保存的属性并根据它重新配置网格。

applyState: function(state) {
    var columns = state.columns;
    this.callParent(arguments);
    if (columns) {
      this.reconfigure(undefined, columns);
    }
}

Voila,你有一个“动态网格”(列是通过数据库中保存的状态定义的),它是有状态的。