CODEWITHSUNDEEP
extjssencha-touchsencha-touch-2sencha-touch-2.1
Narain
Narain

Reputation: 43

Change pages inside Sencha panel

I am new with Sencha.

My aim is to show different pages based on some conditions inside a panel(not a tab panel, but Ext panel).

I have created 2 pages (id:M1_PG1_S2_P1,id:M1_PG1_S1_P2) and linked them into another panel(id:ScreenType1).

I tried to switch the pages inside the panel using the below code, but its not working. I have also tried with the setActiveItem, but that too didnt helped. How can I achieve this?

Code snippet is highly appreciated.

switch (localStorage.getItem('currentPage')) 
{
    case 'M1_PG1_S1_P2_Result_Panel':
        Ext.getCmp('M1_PG1_S2_P1').hide();
        Ext.getCmp('M1_PG1_S1_P2').show();
        break;
    case 'M1_PG1_S2_P1_Transactions': 
        Ext.getCmp('M1_PG1_S1_P2').hide();
        Ext.getCmp('M1_PG1_S2_P1').show();
        break;
        case 'M1_PG1_S2_P1_Orders':  
        Ext.getCmp('M1_PG1_S2_P1').hide();
        Ext.getCmp('M1_PG1_S1_P2').show();
        break;
    default:
        Ext.getCmp('M1_PG1_S2_P1').hide();
        Ext.getCmp('M1_PG1_S1_P2').show();
        break;
}

My Panel code is like

Ext.define
('MyApp.view.ScreenType1',
{
    extend: 'Ext.Container',
    alias: 'widget.ScreenType1',
    requires: 
    [
        'MyApp.view.MainMenuToolbar',
        'MyApp.view.HeaderToolbar',
        'MyApp.view.M1_PG1_S1_P2_Result_Panel',
        'MyApp.view.M1_PG1_S2_P1_Transactions'
    ],
    config: 
    {
        id: 'ScreenType1',
        itemId: 'ScreenType1',
        autoDestroy: false,
        items: 
        [
            {
                xtype: 'MainMenuToolbar'
            },
            {
                xtype: 'headertoolbar'
            },
            {
                xtype: 'toolbar',
                docked: 'top',
                id: 'ChildToolBar'
            },
            {
                xtype: 'M1_PG1_S1_P2_Result_Panel',
                itemId: 'M1_PG1_S1_P2'
            },
            {
                xtype: 'M1_PG1_S2_P1_Transactions'
            }
        ],
        listeners: 
        [
            {
                fn: 'onPanelActivate',
                event: 'activate'
            },
            {
                fn: 'onPanelInitialize',
                event: 'initialize'
            },
            {
                fn: 'onScreenType1ActiveItemChange',
                event: 'activeitemchange'
            }
        ]
    }
}
);

Upvotes: 0

Views: 859

Answers (2)

Narain
Narain

Reputation: 43

This worked well for me

    Ext.Viewport.removeAll(true,true);
    ScreenType1.removeAll(true,true);
    ScreenType1 = Ext.create("MyApp.view.ScreenType3");
    Ext.Viewport.add(ScreenType1);
    Ext.Viewport.setActiveItem(ScreenType1);
    var pnlToAdd = Ext.create("MyApp.view.M1_PG1_S1_P2_Result_Panel");
    ScreenType1.add(pnlToAdd);
    ScreenType1.setActiveItem(0);

Upvotes: 1

Viswa
Viswa

Reputation: 3211

Give it an itemId like this

    {
        xtype: 'M1_PG1_S1_P2_Result_Panel',
        itemId: 'S1_P2'
    },
    {
        xtype: 'M1_PG1_S2_P1_Transactions',
        itemId : 'S2_P1'
    }

And try like this inside switch

        ScreenType1.getComponent('S2_P1').hide();
        ScreenType1.getComponent('S1_P2').show();

Upvotes: 0

Related Questions