Question

我是Sencha的新手。

我的目标是根据面板内的某些条件显示不同的页面（不是选项卡面板，而是Ext面板）。

我创建了2个页面（id：M1_PG1_S2_P1，id：M1_PG1_S1_P2）并将它们链接到另一个面板（id：ScreenType1）。

我尝试使用下面的代码在面板内切换页面，但它不起作用。我也尝试过setActiveItem，，但这也没有帮助。我怎样才能做到这一点？

我们非常感谢您的代码段。

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

我的面板代码就像

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

Answer 1

这对我很有用

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

Answer 2

给它一个像这样的项目

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

并在开关内尝试这样

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

更改Sencha面板内的页面

2 个答案: