PDA

View Full Version : Vertical TabPanel



robando
28 Jul 2010, 2:36 PM
Is there any way to implement tabPanels that have the tabs vertically along one (preferably the right) edge? I know that ext-js has the grouptab extension which is similar to what I need. I don't think grouptabs are available in Sencha Touch. Does anybody have any recommendations?

Thanks!

--rO

robando
29 Jul 2010, 3:31 PM
no suggestions?

evant
29 Jul 2010, 6:16 PM
There's nothing built in to do it, but it would be reasonably simple to simulate. For example:



// Setup the Sencha Touch app.
Ext.setup({
icon: 'icon.png',
tabletStartupScreen: 'tablet_startup.png',
phoneStartupScreen: 'phone_startup.png',
glossOnIcon: false,
onReady: function(){
function setActive(btn){
var index = panel.getComponent('tabs').items.indexOf(btn);

panel.getComponent('cards').setCard(index);
}

var panel = new Ext.Panel({
fullscreen: true,
layout: {
type: 'hbox',
align: 'stretch'
},
items: [{
itemId: 'cards',
flex: 1,
layout: 'card',
items: [{
html: 'Card 1'
},{
html: 'Card 2'
},{
html: 'Card 3'
}]
},{
itemId: 'tabs',
width: 100,
defaultType: 'button',
items: [{
text: 'Button 1',
handler: setActive
},{
text: 'Button 2',
handler: setActive
},{
text: 'Button 3',
handler: setActive
}]
},]
});
}
});

robando
30 Jul 2010, 3:26 PM
That's a great start! Thanks so much. Now I just have to figure out a way to style the buttons to look like tabs and to be able to set selected and un-selected states for them.

robando
11 Aug 2010, 6:32 PM
I've come back to this due to a bug I've found once trying this out on my iPad. In webkit browsers the solution works just fine but when I try it on my iPad i find that the first time I switch to card index 1 and then try to setCard(0) the card does not get set. If I then try to setCard(1) and then setCard(0) again it works just fine. Any ideas as to why this might be happening?

evant
11 Aug 2010, 6:42 PM
Works fine for me, just tried the above code on the iPad.