sencha hbox panel not displayed - layout

Question

I am trying to create an hbox which displays 2 panels.It was working fine until I decided to make the layout of the left panel as "CARD".
The code i used for that is
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'
}
]
}
});
The left panel code is given below:
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 () {
}
}
]
}
]
}
});
My problem is that when i run the project, only right panel is displayed. How do i get to fix the leftPanel problem?

Answer 1

I think what you're asking for is to have the leftPanel switch between
one of three 'card' tabs? This is like the Sencha
GeoCongress example (it's full screen though) that
they ship in their examples directory. In the app/controller/SplashScreen.js file, they have several functions that call setActiveItem() to set the card. You can do the same in your handlers:
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
}
Here's my working version of 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'
}
]
}
});