還原分機面板狀態

Question

如何在Ext 4中恢復collapsiple面板的狀態？

我用下面的，但它無法還原：

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 }, 
     }); 

Answer 1

我不知道的ext4，但在Ext3的，我們有Ext.Component（等Ext.Panel）：

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

因此，您似乎必須通過覆蓋此applyState來自行恢復崩潰，大小，位置等。

我再次談論了Ext3。

Answer 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); 
       } 
      } 
     } 
    }