PDA

View Full Version : TabPanel w/ TabBar, List on a tab panel and a Detail view for the list, how?



tdack
26 Jul 2011, 7:07 AM
This has been doing my head in, I've googled, and read, and looked at examples and looked at more examples and tried more things than I can remember and I still can't get it to work.

Pretty common case I would think:

* docked TabBar on the bottom of a fullscreen TabPanel (as tabBarDock)
* docked ToolBar on the top of the TabPanel to serve as navigation bar for selected TabPanel card
* listCard - a Panel (for list & detail) with layout: 'card'
* listCard contains two items: [listView, detailView]

onItemDisclosure function of listView tries to set the active card of it's parent - listCard to the detailView card, this fails with the following error:


TypeError: 'undefined' is not a function (evaluating 'this.layout.setActiveItem(card, animation)') - sencha-touch-debug-w-comments.js:32519

Here's the basics of what I am using:


app = new Ext.Application({
name: "Application",

launch: function() {

this.detailView = new Ext.Panel({
id: 'detailView',
layout: {
flex: 1,
type: 'fit',
},
tpl: '{field1} {field2}'
});

this.listView = new Ext.List({
id: 'listView',
store: dataStore,
itemTpl: '{field1}',
grouped: true,
onItemDisclosure: function(record) {
app.detailView.update(record.data);
app.listCard.setActiveItem('detailView'); //fails here!!!
}
});

this.backButton = new Ext.Button({
text: this.backText,
ui: 'back',
handler: this.onUiBack,
hidden: true,
scope: this
});

var btns = [];
if (Ext.is.Phone) {
btns.unshift(this.backButton);
}

this.navigationBar = new Ext.Toolbar({
ui: 'dark',
dock: 'top',
title: this.title,
items: btns.concat(this.buttons || [])
});

this.listCard = new Ext.Panel({
title: 'list',
cls: 'card_list',
id: 'card_list',
iconCls: 'calendar',
layout: 'card',
items: [this.listView, this.detailView]
});

this.mainView = new Ext.TabPanel({
tabBar: {
dock: 'bottom',
ui: 'dark',
layout: { pack: 'center' }
},
cardSwitchAnimation: {
type: 'fade',
cover: true
},
dockedItems: [this.navigationBar],
items: [this.listCard],
tabBarDock: 'bottom',
defaults: {
scroll: 'vertical',
layout: 'fit',
},
fullscreen: true,
layout: 'fit'
});

this.Viewport = this.mainView;
this.dataStore.load();
}
});


I have four tabs total.

Is the solution to this to add another panel to the TabPanel programatically (so it isn't shown on the TabBar) and then switch to that? Seems like an awful kludge.

Are nested card layouts, where a card has a couple of child cards, just not do able?

jjerome
26 Jul 2011, 7:51 AM
What I noticed, your detailView is a panel and panels do not support a 'store' config so you have to use a DataView component instead (you can still use a panel to hold the DataView but it isn't necessary).

Look at this:


var dataview = new Ext.DataView({
store: dataStore,
layout: {
flex: 1,
type: 'fit',
},
tpl: '{field1} {field2}',
itemSelector: '' //this needs to be filled in correctly depending on what is in the dataStore
});
this.detailView = new Ext.Panel({
id: 'detailView',
layout: {
flex: 1,
type: 'fit',
},
items: [dataview]
});

tdack
27 Jul 2011, 5:08 PM
After much gnashing of teeth I've managed to work it out.

The problem turned out to be the Ext.Panel that was being created as the listCard for one of the tabs wasn't being created with a layout: 'card'

I eventually found that this little bit of code was the culprit:


defaults: {
scroll: 'vertical',
layout: 'fit',
},


With that removed listCard is created with a layout: 'card' and the listView onItemDisclosure is able to call setActiveView on listCard and it all now works as it should.

Cheers,
Troy.

moulezim
31 Aug 2011, 1:00 AM
hi tdack,
i have the same problem and i have tried your code but it is not working.
please can you help me with it.
here is my code:

this.portfoliosList = new Ext.List({
id: 'portfoliosList',
store: null,
grouped: true,
emptyText: '<div style="margin: 5px;">No portfolios cached.</div>',
onItemDisclosure: function (record) {
portfoliosDemo.portfoliosSecuritiesOfflineStore.clearFilter();
portfoliosDemo.portfoliosSecuritiesOfflineStore.filter({
property: 'pos_por_cod',
value: record.data.Por_Cod,
exactMatch: true
});
portfoliosDemo.portfoliosSecuritiesList.bindStore(portfoliosDemo.portfoliosSecuritiesOfflineStore);
portfoliosDemo.portfoliosViewPort.setActiveItem('portfoliosSecuritiesListContainer', { type: 'slide', direction: 'left' });
},
itemTpl: '<div class="list-item-title">{Por_Cod}</div>' + '<div class="list-item-narrative">{Por_Lib}</div>'
});


this.portfoliosList.bindStore(this.portfoliosOfflineStore);


this.portfoliosListToolbar = new Ext.Toolbar({
id: 'portfoliosListToolbar',
title: 'My Portfolios',
layout: 'hbox'
});


this.portfoliosSecuritiesList = new Ext.List({
id: 'portfoliosSecuritiesList',
store: null,
emptyText: '<div style="margin: 5px;">No portfolios securities cached.</div>',
itemTpl: '{TITCODE}'
});


this.portfoliosSecuritiesList.bindStore(this.portfoliosSecuritiesOfflineStore);


this.portfoliosSecuritiesListToolbar = new Ext.Toolbar({
id: 'portfoliosSecuritiesListToolbar',
title: 'Portfolio Securities',
items: [
{
text: 'Home',
ui: 'back',
handler: function () {
portfoliosDemo.portfoliosViewPort.setActiveItem('portfoliosListContainer', { type: 'slide', direction: 'right' });
}
}
]
});


this.portfoliosListContainer = new Ext.Panel({
id : 'portfoliosListContainer',
dockedItems: [this.portfoliosListToolbar],
items: [this.portfoliosList]
});


this.portfoliosSecuritiesListContainer = new Ext.Panel({
id : 'portfoliosSecuritiesListContainer',
dockedItems: [this.portfoliosSecuritiesListToolbar],
items: [this.portfoliosSecuritiesList]
});


this.portfoliosViewPort = new Ext.Panel({
layout : 'card',
items: [this.portfoliosListContainer,this.portfoliosSecuritiesListContainer]
});


this.Icons = new Ext.TabPanel({
tabBar: {
dock: 'bottom',
ui: 'dark',
layout: {
pack: 'center'
}
},
cardSwitchAnimation: {
type: 'slide',
cover: true
},
items: [{
iconCls: 'bookmarks',
title: 'Bookmarks',
items: [this.portfoliosViewPort]
}],
tabBarDock: 'bottom',
fullscreen: true,
layout: 'card'
});



please i need your help.
thank you

pd1980
6 Mar 2012, 6:08 PM
After much gnashing of teeth I've managed to work it out.

Cheers,
Troy.

Hi Troy,

I am dealing with similar design. 4 tabs with need of hidden tab. Did you manage to get this to work successfully? If yes, could you please share the details of your approach, maybe some code. It would be really helpful. Thank you.