PDA

View Full Version : TabPanel in a TabPanel



netnutmike
28 Dec 2010, 1:59 PM
Hi everyone, hope your holidays are going good.

I am creating my first Sencha Touch App. It has been a pretty easy transition from extjs so far.

I am having one problem that I cannot figure out and I am not sure if you are supposed to be able to do this or if maybe there is a bug.

I have a tab panel docked to the bottom with my main categories. In one of the categories I want to have another tab bar at the top to segment out some data.

I have created a store and a list with the data. If I place the list into any of the tabs in the main tabpanel as an item it works great but if I place the list into any of the tabpanels in the tabpanel that is inside of the tabpanel I get nothing but blank empty space.

One other thing that I noticed which makes me wonder if maybe it is a bug or I am doing something that is not allowed. If I put badgeText onto the main tab panel it works fine but the badgeText I put on the second tabpanel is displayed way off to the right where there are no tab buttons at all.

I have taken the meat of the code out and pasted it below. You will see I have experimented with multiple things trying to figure it out. I have been testing on an iPad and with Chrome. I have tried to build in for a phone too based on the examples but all of my testing has not been with a phone.

Any help on what I am doing wrong or a better way to do it is greatly appreciated.


if (!Ext.is.Phone) {
mosis.proactiveAlarmsStoreProperty.load();
var propertyProActiveAlarmsList = new Ext.List({
itemTpl: '<div class="AlarmList"><strong>{Host}</strong> (<i>{Severity}</i>): {AlarmText}</div>',
store: mosis.proactiveAlarmsStoreProperty

});
}
else {
var propertyProActiveAlarmsList = new Ext.List({
itemTpl: '<div class="AlarmList"><strong>{Host}</strong> (<i>{Severity}</i>): {AlarmText}</div>',
store: mosis.proactiveAlarmsStoreProperty,
fullscreen: true
});
}


mosis.AlarmTypeList = new Ext.TabPanel ({

tabBar: {
layout: 'card'
},
//fullscreen: true,
items: [{
title: 'Re-Active',
badgeText: '5',
layout: Ext.is.Phone ? 'fit' : {
type: 'card'
},
items: [propertyProActiveAlarmsList]
}, {
title: 'Pro-Active',
badgeText: '30',
layout: Ext.is.Phone ? 'fit' : {
type: 'card'
},
items: [propertyProActiveAlarmsList]
}, {
title: 'Orion History',
items: [propertyProActiveAlarmsList]
}, {
title: 'Closed Alarm Query',
layout: Ext.is.Phone ? 'fit' : {
type: 'vbox',
align: 'center',
pack: 'center'
},
items: [propertyProActiveAlarmsList]
}]
});

mosis.Property = new Ext.TabPanel ({
fullscreen: true,
tabBar: {
dock: 'bottom',
layout: 'card'
},
ui: 'light',
cardSwitchAnimation: {
type: 'slide',
cover: true
},

defaults: {
scroll: 'vertical'
},
items: [{
title: 'Alarms',
badgeText: '35',
layout: Ext.is.Phone ? 'fit' : {
type: 'card'
},
items: [mosis.AlarmTypeList]
}, {
title: 'Devices',
layout: Ext.is.Phone ? 'fit' : {
height: 500
},
items: [propertyProActiveAlarmsList]
}]
});