没有显示sencha hbox面板

Question

我正在尝试创建一个显示2个面板的hbox。它工作正常，直到我决定将左面板的布局设为“CARD”。 我用的代码是

Ext.define("InfoImage.view.WorkItems", {
    layout:'hbox',
    extend:'Ext.Container',
    requires:[
        'Ext.TitleBar',
        'Ext.layout.HBox',
        'Ext.List'
    ],
    xtype:'workitems',
    id:'workitems',
   // layout:'fit',
    config:{
        //scrollable:'true',
        fullscreen:true,
        layout:'fit',
        cls:'hboxpanel',
        items:[
            {
                xtype:'leftPanel'
            },
            {
                xtype:'documentPanel'
            }
        ]

    }

});

左面板代码如下：

Ext.define('InfoImage.view.leftPanel', {
    extend:'Ext.Panel',
    requires:[
        'InfoImage.view.Main',
        'InfoImage.view.WorkItems',
         'Ext.TitleBar'
    ],

    id:'leftPanel',
    xtype:'leftPanel',

    config:{
        width:'30%',
        fullscreen:true,
        autoScroll:true,
        layout:'card',
        cardSwitchAnimation:'slide',
        cls:'leftPanel',
        items:[
            /*{
                xtype:'workItemPanel'
            },
            {
                xtype:'inboxQueuePanel'

            },*/
            {
                xtype:'toolbar',
                docked:'bottom',
                items:[

                    {
                        xtype:'button',
                        cls:'workitem',
                        text:"<img src='resources/images/compose.png' style='width:40px;height:40px;' />",
                        iconMask:true,
                        ui:'normal',
                        id:'workitem',
                        handler:function () {
                        }
                   },
                    {
                        xtype:'button',
                        cls:'inbox',
                        text:"<img src='resources/images/mail.png' style='width:40px;height:40px;' />",
                        iconMask:true,
                        ui:'normal',
                        id:'inbox',
                        handler:function () {
                        }
                    },
                    {
                        xtype:'button',
                        cls:'filecabinet',
                        text:"<img src='resources/images/cabinet_256.jpg' style='width:40px;height:40px;' />",
                        iconMask:true,
                        ui:'normal',
                        id:'filecabinet',
                        handler:function () {
                        }
                   }
                ]
            }
        ]
    }
});

我的问题是，当我运行项目时，只显示右侧面板。我如何修复leftPanel问题？

Answer 1

我认为你要求的是让leftPanel切换 三张“卡片”标签中的一张？这就像Sencha   GeoCongress示例（虽然是全屏） 他们在他们的示例目录中发布。在app / controller / SplashScreen.js文件中，它们有几个函数调用setActiveItem（）来设置卡。您可以在处理程序中执行相同的操作：

handler:function () {
    var leftPanel = Ext.getCmp('leftPanel'); // Get the Left Panel's id
    leftPanel.setActiveItem(Ext.getCmp('workItemPanel')); // get the id of the card and make it active
}

这是我的InfoImage.view.LeftPanel

的工作版本

Ext.define('InfoImage.view.LeftPanel', {
    extend:'Ext.Panel',
    requires:[
        'InfoImage.view.Main',
        'InfoImage.view.WorkItems',
        'Ext.TitleBar'
    ],

    id:'leftPanel',
    xtype:'leftPanel',

    config:{
        width:'30%',
        fullscreen:true,
        autoScroll:true,
        layout: {
            type: 'card',
            animation: {
                type: 'slide'
            }
        },
        cls:'leftPanel',
        items:[

            {
                xtype:'toolbar',
                docked: 'bottom',
                items:[

                    {
                        xtype:'button',
                        cls:'workitem',

                        html:"1 <img src='resources/images/compose.png' style='width:20px;height:20px;'/>",
                        iconMask:true,
                        ui:'normal',
                        id:'workitem',
                        handler:function () {
                            var leftPanel = Ext.getCmp('leftPanel');
                            leftPanel.setActiveItem(Ext.getCmp('one'));
                        }
                    },
                    {
                        xtype:'button',
                        cls:'inbox',
                        text:"2 <img src='resources/images/mail.png' style='width:40px;height:40px;' />",
                        iconMask:true,
                        ui:'normal',
                        id:'inbox',
                        handler:function () {
                            var leftPanel = Ext.getCmp('leftPanel');
                            leftPanel.setActiveItem(Ext.getCmp('workItemPanel'));
                        }
                    },
                    {
                        xtype:'button',
                        cls:'filecabinet',
                        text:"3 <img src='resources/images/cabinet_256.jpg' style='width:40px;height:40px;' />",
                        iconMask:true,
                        ui:'normal',
                        id:'filecabinet',
                        handler:function () {
                            var leftPanel = Ext.getCmp('leftPanel');
                            leftPanel.setActiveItem(Ext.getCmp('inboxQueuePanel'));
                        }
                    }
                ]
            },
            {
                xtype: 'panel',
                id: 'one',
                html:'one'
            },
            {
                xtype: 'panel',
                id: 'workItemPanel',
                html:'workItemPanel'
            },
            {
                xtype: 'panel',

                id: 'inboxQueuePanel',
                html:'inboxQueuePanel'
            }
        ]
    }
});