Extjs Grid ApplyState 未反映更改 |隐藏问题

Question

当我们有多个父子网格并希望在加载调用后重新配置网格时，如下所示：

listeners: {
     'afterrender': function (grid) {      
      var state =grid.getState();
      state.columns[1].hidden= true;
      grid.applyState(state); 
    }
}

这种行为甚至在 ExtJS 6.5.1 上仍然可以重现。

例如 https://www.sencha.com/forum/showthread.php?306941-Apply-state-after-grid-reconfigure

Answer 1

这是我一直用来解决隐藏列问题的覆盖。我使用的是 6.6，所以不确定这是否适用于 4.4。另外，您可能不需要暂停/恢复布局，但也不确定。

Ext.define('MyApp.overrides.Grid', {
            override: 'Ext.grid.Panel',

            applyState: function () {
                this.callParent(arguments);

                Ext.suspendLayouts();
                Ext.each(this.getColumns(), function (column) {
                    if (column.hidden) {
                        column.show();
                        column.hide();
                    }
                });
                Ext.resumeLayouts(true);
            }
    });

Answer 2

这仍然是 applyState 的问题。当网格有多个隐藏列并且我们使用 applyState 函数时，它会导致网格崩溃。因此，我们跳过了隐藏属性部分，尽管它在宽度更改、过滤器等方面工作顺利。

listeners: {
     'afterrender': function (grid) {      
      var state =grid.getState();
      state.columns[1].hidden= false;
      grid.applyState(state); 
      grid.columns[3].hidden = true;
    }
}

如果您手动设置列的隐藏属性，它将隐藏它。

Answer 3

我在 ExtJS 6.2.2 下也遇到了这个问题。

我确定了如果列的隐藏状态已经渲染则无法正确应用的地方

Ext.grid.Panel.applyState()

->

Ext.panel.Table.applyState()

->

Ext.grid.header.Container.applyColumnsState() / Ext.grid.locking.HeaderContainer.applyColumnsState()

->

Ext.grid.column.Column.applyColumnState()

以下覆盖将解决此问题（请参阅添加的 4 行）：

Ext.override(Ext.grid.column.Column, {
    applyColumnState: function(state, storeState) {
        var me = this,
            sorter = me.getSorter(),
            stateSorters = storeState && storeState.sorters,
            len, i, savedSorter, mySorterId;
        // If we have been configured with a sorter, then there SHOULD be a sorter config
        // in the storeState with a corresponding ID from which we must restore our sorter's state.
        // (The only state we can restore is direction).
        // Then we replace the state entry with the real sorter. We MUST do this because the sorter
        // is likely to have a custom sortFn.
        if (sorter && stateSorters && (len = stateSorters.length)) {
            mySorterId = sorter.getId();
            for (i = 0; !savedSorter && i < len; i++) {
                if (stateSorters[i].id === mySorterId) {
                    sorter.setDirection(stateSorters[i].direction);
                    stateSorters[i] = sorter;
                    break;
                }
            }
        }
        // apply any columns
        me.applyColumnsState(state.columns);
        // Only state properties which were saved should be restored.
        // (Only user-changed properties were saved by getState)
        if (state.hidden != null) {
            if (me.rendered) { // added
                me[!state.hidden ? 'show' : 'hide'](); // added
            } else { // added
            me.hidden = state.hidden;
            } // added
        }
        if (state.locked != null) {
            me.locked = state.locked;
        }
        if (state.sortable != null) {
            me.sortable = state.sortable;
        }
        if (state.width != null) {
            me.flex = null;
            me.width = state.width;
        } else if (state.flex != null) {
            me.width = null;
            me.flex = state.flex;
        }
    }
});