панель сенча hbox не отображается

введите описание изображения здесьЯ пытаюсь создать hbox, который отображает 2 панели. Он работал нормально, пока я не решил сделать макет левой панели как "КАРТА". Код, который я использовал для этого,

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

Моя проблема в том, что когда я запускаю проект, отображается только правая панель. Как решить проблему с левой панелью?


layout hbox sencha-touch-2
person Khush    schedule 25.04.2012    source источник
comment
Можете приложить фото как это должно выглядеть? Панель инструментов должна быть внизу?   -  person    schedule 25.04.2012
comment
Панель инструментов должна быть внизу. Приложу фото как должно быть.   -  person Khush    schedule 26.04.2012

Ответы (1)


arrow_upward
0
arrow_downward

Я думаю, что вы просите, чтобы левая панель переключалась между одной из трех вкладок «карта»? Это похоже на пример 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'
            }
        ]
    }
});
person Community    schedule 27.04.2012
comment
но проблема не только в этом. Как я уже упоминал в приведенном выше коде, если я попытаюсь загрузить левую панель; в моем хоксе он не появляется. Я попробовал код, который вы отправили, но все равно получаю тот же результат. - person Khush; 29.04.2012