PDA

View Full Version : Problem with TabPanel



ChristineBauers
9 Nov 2011, 2:14 AM
Hi Sencha-Community,

I have the following problem with the tabpanel:

This my Application():


var App = new Ext.Application({
name: 'App',
useLoadMask: true,
launch: function () {



App.views.container = new Ext.Panel({
fullscreen : true,
layout: 'fit',
dockedItems: [header],
items: [tabBar]
});

App.views.viewport = new Ext.Panel({
fullscreen: true,
layout: 'card',
cardAnimation: 'slide',
items: [App.views.container]
});
}
})

As you can see, it includes a TabBar. So, this is the TabBar:


tabBar = new Ext.TabPanel({
tabBar : {
dock : 'bottom',
layout : {
pack : 'center'
}
},
//fullscreen: true,
ui : 'light',
cardSwitchAnimation : {
type : 'slide',
cover : true
},

defaults : {
scroll : 'vertical'
},
items : [ startScreen,
productsList,
videos,
faqList,
info
]
});



The second Tab is a List:


productsList = new Ext.List({
title: 'products',

store : 'ProductStore',
itemTpl: ' <div class="{imgClass}">;</div> <div class="list-item-title">{title}</div> ' +
'<div class="list-item-narrative">{narrative}</div>',

onItemDisclosure: function (record) {
//Aufruf Controller
Ext.dispatch({
controller: productController,
action: 'showDetail',
id: record.getId()
});
}

});



At this point, I see a list with 2 elements. Everything works fine. When I click on an element of the list, the controller calls a detailed view:


productDetail = new Ext.Panel(
{

fullscreen : true,
layout: 'fit',
dockedItems:[header],
items : [tabBar,
{
tpl : [

'<div class="field"><span class="label"></span>{title}</div>',
'<div class="field"><span class="label"></span>\'{text}\'</div>'
]
}
],
// Laed den aktuellen, vorher ausgewaehlten Eintrag
// Neue Daten werden noch nicht Angezeigt
updateWithRecord : function(record) {
// record.get('title');

Ext.each(this.items.items, function(item) {
item.update(record.data);
});
},


});



But in this view I canīt see the tabBar and I donīt know why. Does anyone have an idea??

Thank you
Greetings

Christine

TDeBailleul
9 Nov 2011, 3:33 AM
Show us your controller.

ChristineBauers
9 Nov 2011, 3:38 AM
ehhh .. sorry ^^. this is the controller:


productController = new Ext.Controller({

showDetail : function(options) {

var id = parseInt(options.id);
var productsStore = productsList.getStore();
var product = productsStore.findRecord('id', id);

if (product) {
productDetail.updateWithRecord(product);
App.views.viewport.setActiveItem(productDetail, options.animation);
}
}
});

TDeBailleul
9 Nov 2011, 3:51 AM
Ok this is how I managed to make it work in my case.
I have my bottomTabs that contains an item 'this.actualites' :



tabBar: {
dock: 'bottom',
ui: 'dark',
layout: { pack: 'center' }
},


items:[{
title: 'Actualites',
id: 'cardActu',
items: [this.actualites] ,
iconCls: 'rss',
layout: 'card',
}],


tabBarDock: 'bottom',
fullscreen: true,
layout: 'fit'
});


And this.actualites is a panel that contains my list and my detail panel



layout: 'card',
cardSwitchAnimation: 'slide',
items: [
this.actualitesList,
this.actualiteDetail
],


And then, to make it work I do call the setActiveItem on the this.actualites panel



show: function(options) {
var id = parseInt(options.id);
var actualite = app.stores.actualites.findRecord('blogEntryInfosId', id);
if (actualite) {
app.views.viewport.bottomTabs.actualites.actualiteDetail.updateWithRecord(actualite);
app.views.viewport.bottomTabs.actualites.setActiveItem(
app.views.viewport.bottomTabs.actualites.actualiteDetail, options.animation
);
}
},



Hope this helps you to make your own system work

ChristineBauers
9 Nov 2011, 4:24 AM
thanks for your answer. :) that sounds like a great solution.. so, I've tried the following:

First of all, I've created a new Panel in the products.js, which looks like this:


products = new Ext.Panel({
title : 'products',
fullscreen : true,
layout : 'card',
cardSwitchAnimation : 'slide',
items : [ this.productsList, this.productDetail ]

});



Then, I added it to my TabBar:



items : [ startScreen,
products,
videos,
faqList,
info
]


So, the controller now looks like this:


productController = new Ext.Controller({

//ListController wird bei Klick auf Listeneintrag aufgerufen

showDetail : function(options) {
var id = parseInt(options.id);
var productsStore = productsList.getStore();
var product = productsStore.findRecord('id', id);

if (product) {
products.productDetail.updateWithRecord(product);
App.views.viewport.setActiveItem(products.productDetail, options.animation);
}
}
});

Trying to excecute this brings the following exception:



Cannot call method 'updateWithRecord' of undefined

Ext.Controller.showDetailproductController.js:12
Ext.util.Dispatcher.Ext.extend.dispatchsencha-touch.js:6
Ext.dispatchsencha-touch.js:6
Ext.List.onItemDisclosureproductList.js:10
Ext.List.Ext.extend.handleItemDisclosuresencha-touch.js:6
(anonymous function)
(anonymous function)sencha-touch.js:6
Ext.gesture.Gesture.Ext.extend.firesencha-touch.js:6
Ext.gesture.Tap.Ext.extend.onTouchEndsencha-touch.js:6
Ext.gesture.Manager.Ext.AbstractManager.onTouchEndsencha-touch.js:6
(anonymous function)




Iīm sorry, this is maybe a stupid question, but why is updateWithRecord now undefined?

TDeBailleul
9 Nov 2011, 4:33 AM
Sorry, I forgot to tell you that this is a method I made myself.
You can't try this instead :



products.productDetail.update(product.data);

ChristineBauers
9 Nov 2011, 4:48 AM
unfortunately .. update is also undefined .. I really donīt know whatīs wrong here. If you have any other ideas, please let my know. :)