PDA

View Full Version : Best practices: toolbar menu and sub-panels



lukasz_b
4 Nov 2010, 4:06 AM
All,

I'm just begging with Sencha Touch. I have a query about a best practice of designing a toolbar menu with say 6 buttons and content panels which contents would be loaded into the main panel.

I'd like to have 1 MenuPanel - with docked toolbar at the top and said 6 buttons. Then on tapping the each of the button I'd like to dynamically load/change contents of 6 sub-panels (1 for every toolbar's button) into the main view.

What do you propose? How should I approach it. Maybe there is an example to illustrate this problem?

thanks,
Lukasz

evant
4 Nov 2010, 4:17 AM
Why not just use a tab panel?

lukasz_b
4 Nov 2010, 4:52 AM
Hi Evan,

Thanks for the tip. There are two problems I have with TabPanel.

1. I don't know how to change title into an image, an icon instead of a text
2. when defining a new TabPanel like this:


KNS.MasterPanel = Ext.extend(Ext.TabPanel, {
fullscreen: true,
id:'dashboardContent',
cardSwitchAnimation:'fade',

initComponent: function(){

this.items = [{
xtype: 'kns-test-panel-1',
id: 'test-panel-1'
},
{
xtype: 'kns-test-panel-2',
id: 'test-panel-2'
}
];

KNS.MasterPanel.superclass.initComponent.call(this);
}
});

the cardSwitchAnimation:'fade' does not work. The default slide animation is always used.

any hints?

thanks,
Lukasz