PDA

View Full Version : Tabpanel - Keep focus on Tab, when changing card



newqreation
23 Jan 2012, 3:32 AM
Hi Everyone!

I have run in to a bit of a problem. I currently use a tabpanel, with 5 tabs. Inside one of the tabs, I would like to show more than just one card. (a map)

I have figured out how to use the nestedList, and then get a back button, but it is not possible to use a nestedList in this case. (a list with indexbar and grouped)

How is it possible for me to show this new mapcard under this other tab. I currently use a controller to change to the new card, but when this card is shown, the tab loses focus in the tabbar.
My current code looks like this.
The list inside homecard:

{ xtype: 'list',
store: jsonStore,
itemTpl: '<div class="contact"><strong>{shop_id}</strong></div>',
grouped: true,
indexBar: true,
listeners:{
itemtap: function(dataView, index, item, e) {
var record = jsonStore.getAt(index);
Ext.dispatch({
controller: ToolbarDemo.controllers.butikker,
action: 'show',
id: record.getId()
});
}
}
}

My controller:

ToolbarDemo.controllers.butikker = new Ext.Controller({ index: function(options) {
ToolbarDemo.views.viewport.setActiveItem(
ToolbarDemo.views.homecard, options.animation
);
},
show: function(options) {
var id = parseInt(options.id),
contact = jsonStore.getById(id);
if (contact) {
ToolbarDemo.views.mapcard.updateWithRecord(contact);
ToolbarDemo.views.viewport.setActiveItem(
ToolbarDemo.views.mapcard, options.animation
);
}
}
});

What should I change to keep the focus on the tab, when using the setActiveItem. And is that even the right method? Please let me know, if more code is needed.

Thank you!

Kind regards,
Jens Nannerup

mitchellsimoens
23 Jan 2012, 9:17 AM
Use a container that is using card layout and dock a toolbar to the top/bottom and show/hide the back button when the active item of the container switches.