1

在此处输入图像描述我正在尝试创建一个显示 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 问题？

4

1 回答 1

0

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

处理程序：函数（）{
    var leftPanel = Ext.getCmp('leftPanel'); // 获取左侧面板的 id
    leftPanel.setActiveItem(Ext.getCmp('workItemPanel')); // 获取卡片的 id 并使其处于活动状态
}

这是我的 InfoImage.view.LeftPanel 的工作版本

Ext.define('InfoImage.view.LeftPanel', {
    扩展：'Ext.Panel'，
    要求：[
        'InfoImage.view.Main',
        'InfoImage.view.WorkItems',
        'Ext.TitleBar'
    ],

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

    配置：{
        宽度：'30%',
        全屏：真，
        自动滚动：真，
        布局： {
            类型：'卡'，
            动画： {
                类型：'幻灯片'
            }
        },
        cls:'leftPanel',
        项目：[

            {
                xtype:'工具栏',
                停靠：'底部'，
                项目：[

                    {
                        xtype:'按钮',
                        cls:'工作项',

                        html:"1 <img src='resources/images/compose.png' style='width:20px;height:20px;'/>",
                        图标掩码：真，
                        ui:'正常',
                        id:'工作项',
                        处理程序：函数（）{
                            var leftPanel = Ext.getCmp('leftPanel');
                            leftPanel.setActiveItem(Ext.getCmp('one'));
                        }
                    },
                    {
                        xtype:'按钮',
                        cls:'收件箱',
                        文本：“2 <img src='resources/images/mail.png' style='width:40px;height:40px;' />",
                        图标掩码：真，
                        ui:'正常',
                        id:'收件箱',
                        处理程序：函数（）{
                            var leftPanel = Ext.getCmp('leftPanel');
                            leftPanel.setActiveItem(Ext.getCmp('workItemPanel'));
                        }
                    },
                    {
                        xtype:'按钮',
                        cls:'文件柜',
                        文本：“3 <img src='resources/images/cabinet_256.jpg' style='width:40px;height:40px;' />",
                        图标掩码：真，
                        ui:'正常',
                        id:'文件柜',
                        处理程序：函数（）{
                            var leftPanel = Ext.getCmp('leftPanel');
                            leftPanel.setActiveItem(Ext.getCmp('inboxQueuePanel'));
                        }
                    }
                ]
            },
            {
                xtype：'面板'，
                id：'一个'，
                html:'一个'
            },
            {
                xtype：'面板'，
                id: 'workItemPanel',
                html:'workItemPanel'
            },
            {
                xtype：'面板'，

                id: '收件箱队列面板',
                html:'收件箱队列面板'
            }
        ]
    }
});
于 2012-04-27T17:39:00.253 回答