PDA

View Full Version : Multiple TabPanels - Am I messing things up or is this not possible



urbanmania
4 Sep 2011, 12:47 PM
Hi

I wanted to create an app that had a front page and then a few TabPanels where some of the panels have sliders on them.

I've been messing about with this but no matter what I do, as soon as I add the second TabPanel things take a turn for the worse.

Depending on how I set things up I get different problems, in all cases, the whole app becomes unusable.

I'm basically asking you guys, am I trying to get Sencha Touch to do something impossible (I don't think I am), or am I messing up somewhere.

Here are the key files from my app:

Viewport.js

app.views.Viewport = Ext.extend(Ext.Panel, {
fullscreen: true,
layout: 'card',
cardSwitchAnimation: 'slide',
showingPage: false,
dockedItems: [{
xtype: 'toolbar',
cls: 'toolbar',
itemId: 'toolbar',
ui: 'light',
dock: 'top',
title: 'App',
items: [
{xtype:'spacer'},
{xtype:'spacer'},
{
xtype:'button',
iconCls: 'list',
iconMask: true,
handler: function(){
app.views.viewport.setActiveItem(app.views.list, {type: 'slide'});
}
}
]
}],

initComponent: function() {
//put instances of cards into app.views namespace
Ext.apply(app.views, {
frontPage: new app.views.FrontPage(),
anotherpage: new app.views.AnotherPage(),
tabbar1: new app.views.TabBar1(),
tabbar2: new app.views.TabBar2(),
list: new app.views.List(),
});
//put instances of cards into viewport
Ext.apply(this, {
items: [
app.views.frontPage,
app.views.anotherpage,
app.views.tabbar1,
app.views.tabbar2,
app.views.list,
]
});
app.views.Viewport.superclass.initComponent.apply(this, arguments);
}
});


FrontPage.js

app.views.FrontPage = Ext.extend(Ext.Panel, { fullscreen: true,
layout: 'card',
html: 'A front page',
style: 'background-color: ivory;',
});


TabBar1.js

var t1slider1 = new Ext.form.Slider({
label: 't1slider1',
minValue: 5,
maxValue: 10,
increment: 0.5,
listeners: {
drag: function (theSlider, theThumb, ThumbValue) {
theSlider.labelEl.setHTML('<dl class="label"><dt>t1slider1:</dt><dd>'+ThumbValue+'</dd></dt>');
},
change: function(theSlider, theThumb, ThumbValue) {
if (theSlider.isDirty()) {
theSlider.labelEl.setHTML('<dl class="label"><dt>t1slider1:</dt><dd>'+ThumbValue+'</dd></dt>');
}
},
dragend: function () {
},
scope: this
}
});


var t1slider2 = new Ext.form.Slider({
label: 't1slider2',
minValue: 5,
maxValue: 10,
increment: 0.5,
listeners: {
drag: function (theSlider, theThumb, ThumbValue) {
theSlider.labelEl.setHTML('<dl class="label"><dt>t1slider2:</dt><dd>'+ThumbValue+'</dd></dt>');
},
change: function(theSlider, theThumb, ThumbValue) {
if (theSlider.isDirty()) {
theSlider.labelEl.setHTML('<dl class="label"><dt>t1slider2:</dt><dd>'+ThumbValue+'</dd></dt>');
}
},
dragend: function (theSlider, theThumb, ThumbValue) {
},
scope: this
}
});


var t1slider3 = new Ext.form.Slider({
label: 't1slider3',
minValue: 5,
maxValue: 10,
increment: 0.5,
listeners: {
drag: function (theSlider, theThumb, ThumbValue) {
theSlider.labelEl.setHTML('<dl class="label"><dt>t1slider3:</dt><dd>'+ThumbValue+'</dd></dt>');
},
change: function(theSlider, theThumb, ThumbValue) {
if (theSlider.isDirty()) {
theSlider.labelEl.setHTML('<dl class="label"><dt>t1slider3:</dt><dd>'+ThumbValue+'</dd></dt>');
}
},
dragend: function (theSlider, theThumb, ThumbValue) {
},
scope: this
}
});


var t1slider4 = new Ext.form.Slider({
label: 't1slider4',
minValue: 5,
maxValue: 10,
increment: 0.5,
listeners: {
drag: function (theSlider, theThumb, ThumbValue) {
theSlider.labelEl.setHTML('<dl class="label"><dt>t1slider4:</dt><dd>'+ThumbValue+'</dd></dt>');
},
change: function(theSlider, theThumb, ThumbValue) {
if (theSlider.isDirty()) {
theSlider.labelEl.setHTML('<dl class="label"><dt>t1slider4:</dt><dd>'+ThumbValue+'</dd></dt>');
}
},
dragend: function (theSlider, theThumb, ThumbValue) {
},
scope: this
}
});


var t2slider1 = new Ext.form.Slider({
label: 't2slider1',
minValue: 5,
maxValue: 10,
increment: 0.5,
listeners: {
drag: function (theSlider, theThumb, ThumbValue) {
theSlider.labelEl.setHTML('<dl class="label"><dt>t2slider1:</dt><dd>'+ThumbValue+'</dd></dt>');
},
change: function(theSlider, theThumb, ThumbValue) {
if (theSlider.isDirty()) {
theSlider.labelEl.setHTML('<dl class="label"><dt>t2slider1:</dt><dd>'+ThumbValue+'</dd></dt>');
}
},
dragend: function () {
},
scope: this
}
});


var t2slider2 = new Ext.form.Slider({
label: 't2slider2',
minValue: 5,
maxValue: 10,
increment: 0.5,
listeners: {
drag: function (theSlider, theThumb, ThumbValue) {
theSlider.labelEl.setHTML('<dl class="label"><dt>t2slider2:</dt><dd>'+ThumbValue+'</dd></dt>');
},
change: function(theSlider, theThumb, ThumbValue) {
if (theSlider.isDirty()) {
theSlider.labelEl.setHTML('<dl class="label"><dt>t2slider2:</dt><dd>'+ThumbValue+'</dd></dt>');
}
},
dragend: function (theSlider, theThumb, ThumbValue) {
},
scope: this
}
});


var t2slider3 = new Ext.form.Slider({
label: 't2slider3',
minValue: 5,
maxValue: 10,
increment: 0.5,
listeners: {
drag: function (theSlider, theThumb, ThumbValue) {
theSlider.labelEl.setHTML('<dl class="label"><dt>t2slider3:</dt><dd>'+ThumbValue+'</dd></dt>');
},
change: function(theSlider, theThumb, ThumbValue) {
if (theSlider.isDirty()) {
theSlider.labelEl.setHTML('<dl class="label"><dt>t2slider3:</dt><dd>'+ThumbValue+'</dd></dt>');
}
},
dragend: function (theSlider, theThumb, ThumbValue) {
},
scope: this
}
});


var t2slider4 = new Ext.form.Slider({
label: 't2slider4',
minValue: 5,
maxValue: 10,
increment: 0.5,
listeners: {
drag: function (theSlider, theThumb, ThumbValue) {
theSlider.labelEl.setHTML('<dl class="label"><dt>t2slider4:</dt><dd>'+ThumbValue+'</dd></dt>');
},
change: function(theSlider, theThumb, ThumbValue) {
if (theSlider.isDirty()) {
theSlider.labelEl.setHTML('<dl class="label"><dt>t2slider4:</dt><dd>'+ThumbValue+'</dd></dt>');
}
},
dragend: function (theSlider, theThumb, ThumbValue) {
},
scope: this
}
});




app.views.TabBar1 = Ext.extend(Ext.TabPanel, {
fullscreen: true,
layout: 'card',
tabBar: {
dock: 'bottom',
ui: 'dark',
layout: {pack: 'center'},
},
Itemid:'tabbar1',
defaults: {
scroll: 'vertical',
styleHtmlContent:true,
},
style: 'background-color: yellow',
items: [{
title: 'Tab 1',
cls: 'card card1',
iconCls: 'code2',
iconMask: true,
scroll: 'vertical',
items: [{
xtype: 'fieldset',
style: 'margin:10px auto; width: 260px;',
title:'Fieldset Tab 1',
defaults: { labelWidth: '100%',labelAlign: 'top' },
items: [t1slider1, t1slider2, t1slider3, t1slider4]
}]
},
{
title: 'Tab 2',
cls: 'card card2',
iconCls: 'star',
iconMask: true,
scroll: 'vertical',
items: [{
xtype: 'fieldset',
style: 'margin:10px auto; width: 260px;',
title:'Fieldset Tab 2',
defaults: { labelWidth: '100%',labelAlign: 'top' },
items: [t2slider1, t2slider2, t2slider3, t2slider4]

}]
},
{
title: 'Tab 3',
cls: 'card card3',
iconCls: 'info_plain',
iconMask: true,
html:'Some text on tab 3'
}
]
});


TabBar2 is almost identical, just the names of things that change, the setup and config is the same so I'll skip that file.

app.js

Ext.regApplication({ name: 'app',
launch: function() {
this.launched = true;
this.mainLaunch();
},
mainLaunch: function() {
this.views.viewport = new this.views.Viewport();
}
});

urbanmania
4 Sep 2011, 1:06 PM
The problem is with a bit of the code I chopped out for this post here. Has to do with dynamically updating the badge on the tabs according to the sliders.