恢复 Ext 面板状态答案

【问题标题】：Restore Ext panel state恢复 Ext 面板状态
【发布时间】：2011-06-02 09:13:13
【问题描述】：

Ext4 中折叠面板的状态如何恢复？

我使用了以下，但没有恢复：

    var panel = Ext.create('Ext.panel.Panel', {
        id: 'panel',
        stateful: true,
        stateId: 'panelState',
        stateEvents: ['collapse', 'expand'],
        getState: function () {
            Console.log('get state' + this.collapsed);
            return {

                collapsed: this.collapsed
            }
        },
        applyState: function (state) {
            Console.log('apply state' + this.collapsed);
            if (state) {
                Ext.apply(this, state);
            }
        },
        saveState: function() {
            Console.log('save state' + this.collapsed);
            debugger;
            var me = this,
                id,
                state;
            if (me.stateful !== false) {
                id = me.getStateId();
                if (id) {
                    state = me.getState();
                    if (me.fireEvent('beforestatesave', me, state) !== false) {
                        Ext.state.Manager.set(id, state);
                        me.fireEvent('statesave', me, state);
                    }
                }
            }
        },
        height: 100,
        border: false,
        style: { zIndex: 100 },
      });

【问题讨论】：

标签： extjs4

【解决方案1】：

我不知道 Ext4，但在 Ext3 中，我们有 Ext.Component（以及 Ext.Panel）：

applyState : function(state){
    if(state){
        Ext.apply(this, state);
    }
}

所以看起来你必须通过覆盖这个 applyState 来自己恢复折叠、大小、位置等。

我再说一遍 Ext3。

【讨论】：

【解决方案2】：

我将上述状态配置用于门户面板。我想在面板的拖放完成后捕获 x 和 y 位置。为此，我已经这样做了：

listeners : {
            'close' : Ext.bind(this.onPortletClose, this)
        },
stateEvents: ['collapse', 'expand'],
  getState: function () {                              
      return {
          collapsed: this.collapsed
      }
  },       
  getPosition: function(local) {        
        var el = this.el,xy;
    if (local === true) {return [el.getLeft(true), el.getTop(true)];
        }xy = this.xy || el.getXY();         
         if (this.floating && this.floatParent) {
           var o = this.floatParent.getTargetEl().getViewRegion();
             xy[0] -= o.left;
            xy[1] -= o.top; }
            xy[2]=this.collapsed;
             return xy;
            },          
  applyState: function (state) {                               
      if (state) {
          Ext.apply(this, state);
      }
  },
  saveState: function() {               
      debugger;          
      var me = this,
          id,
          state,pos;            
      if (me.stateful !== false) {
          id = me.getStateId();
          if (id) {
              state = me.getState();                  
              // saveAllPosition();
                 saveUserPosition();// gets fired three times. i want it only once after drag drop completed
              if (me.fireEvent('beforestatesave', me, state) !== false) {
                  Ext.state.Manager.set(id, state);
                  me.fireEvent('statesave', me, state);
              }
          }
      }
  }

【讨论】：