Restore Ext panel state

How is the state of a collapsiple panel restored in Ext 4?

I use the following, but it's not restored:

    var panel = Ext.create('Ext.panel.Panel', {
        id: 'panel',
        stateful: true,
        stateId: 'panelState',
        stateEvents: ['collapse', 'expand'],
        getState: function () {
            Console.log('get state' + this.collapsed);
           开发者_JS百科 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 },
      });

I don't know about Ext4 but in Ext3, we have for Ext.Component (and so Ext.Panel):

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

So it seems like you have to restore the collapse, size, position, etc by yourself by overriding this applyState.

Once again, I'm talking about Ext3.

I'm using the above state configs for a portal panel. I want to capture the x and y positions after the drag and drop of the panel is done. For this I have done this:

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