EXT JS 4.1.1 Ext.State.Manager not working anymore

[A.Wagner]

REQUIRED INFORMATION




Ext version tested:

• Ext 4.1.1

Browser versions tested against:

• Chrome 20

Description:

• Ext.state.Manager don't work at all

Steps to reproduce the problem:

• Setiing Ext.state.Manager with a CookieProvider and set up a panel with stateful:true and a stateId
• Set up a BeforeStateSave event to test if something happens
• Collapse panel and reload
• Panel is not collapsed

The result that was expected:

• After collapse the panel and reload the panel should be collapsed

The result that occurs instead:

• Nothing happens. After reload the panel is not collapsed

Test Case:

    Ext.define('MyApp.view.MyViewport', {
    extend: 'Ext.container.Viewport',


    layout: {
        type: 'fit'
    },


    initComponent: function() {
        var me = this;


        Ext.applyIf(me, {
            items: [
                {
                    xtype: 'panel',
                    stateId: 'myPan',
                    collapsible: true,
                    title: 'My Panel',
                    listeners: {
                        beforestatesave: {
                            fn: me.onPanelBeforeStateSave,
                            scope: me
                        }
                    }
                }
            ],
            listeners: {
                afterrender: {
                    fn: me.onViewportAfterRender,
                    scope: me
                }
            }
        });


        me.callParent(arguments);
    },


    onPanelBeforeStateSave: function(stateful, state, options) {
        alert("state");
    },


    onViewportAfterRender: function(abstractcomponent, options) {
        Ext.state.Manager.setProvider(new Ext.state.CookieProvider());
    }


});

HELPFUL INFORMATION


Debugging already done:

• none

Possible fix:

• not provided

Additional CSS used:

• only default ext-all.css

Operating System:

• Win7 Pro 64bit

[evant]

You're missing the stateful config:

Ext.define('MyApp.view.MyViewport', {
    extend: 'Ext.container.Viewport',

    layout: 'fit',

    initComponent: function() {
        var me = this;

        me.items = [{
            xtype: 'panel',
            stateful: true,
            stateId: 'myPan',
            collapsible: true,
            title: 'My Panel'
        }];

        me.callParent(arguments);
    }
});

Ext.require('*');

Ext.onReady(function() {
    Ext.state.Manager.setProvider(new Ext.state.CookieProvider());
    new MyApp.view.MyViewport();
});

[A.Wagner]

I used Sencha Architect 2 to implement the code above.

I guess that the stateful: true is the default value, isn't it???

[A.Wagner]

So I put the stateful config manually and now it works. So may the Sencha Architect should be changed that way.

Thanks for your help.

[bpmportal]

Hello,

I was testing this issue mentioned. The collapse state is maintained and it's working fine as expected.
But if I click on expand button it's not getting expanded.

Steps followed:
1) Opened the page.
2) Collapsed the panel.
3) Reload the page.
Now the panel is rendered in collapsed state (since the previous state was collapsed) as expected.
4) Click on expand button.

I have faced the same issue with the different test code as follows.

Ext.onReady(function() {


Ext.state.Manager.setProvider(new Ext.state.CookieProvider());
    var panel1 = Ext.create('Ext.Panel', {
        title: 'TestTitle',
        collapsible: true,
        stateful: true,
        stateId: 'teststateid',
        stateEvents: ['collapse', 'expand'],
        getState: function() {
          this.isCollapsedBefore =  this.collapsed;
          return {
             isCollapsed: this.collapsed
          };
        },
        applyState: function(state) {
            if(state.isCollapsed) {
                this.collapse();
            }        
        },
        items: [{xtype:'button', text: 'button1'}, {xtype:'button', text: 'button2'}],
        renderTo: Ext.getBody()    
    });
    
});

Note:
- I'm not sure whether I'm doing the correct way to do it. Please suggest me the best way to do that.

Please check the code and provide the best solution to reach this requirement.


Thanks,
Amal

[Jan (HL)]

Tip: Check your domain's cookie size. There exists several different size limits in the browsers.