PDA

View Full Version : TabPanel won't render items unless fullscreen set to true



grantmeans
24 Mar 2011, 4:38 AM
Sencha Touch version tested:

1.0.1a



only sencha-touch-debug.css




Platform tested against:

Google Chrome
Safari
iOS 4


Description:

Nested TabPanel won't render its items unless fullscreen config option is set to true.


Test Case:

Controller


Ext.regController("main", {
start: function() {
this.startScreen = this.render({
xtype: 'appMain'
}, Ext.getBody());
}
});


View w/ fullscreen set to true for tabpanel


app.views.Main = Ext.extend(Ext.Panel, {
id: 'app-main',
fullscreen: true,
initComponent: function() {

var myTabPanel = new Ext.TabPanel({
activeItem: 0,
fullscreen: true,
id: 'tab-panel',
items: [{
title: 'Card 1',
layout: 'fit',
iconCls: 'info',
cls: 'card card1',
html: '<h1>Card 1</h1>'
},{
title: 'Card 2',
layout: 'fit',
iconCls: 'info',
cls: 'card card2',
html: '<h1>Card 2</p>'
}]
});

Ext.apply(this, {
dockedItems: [{
dock: 'top',
xtype: 'toolbar',
items: [{
xtype: 'selectfield',
name: 'report-segments',
options: [{
text: 'Option 1'
},{
text: 'Option 2'
},{
text: 'Option 3'
}]
}]
}],
items: [myTabPanel]
});

app.views.LoginPrompt.superclass.initComponent.apply(this, arguments);
}
});

Ext.reg('appMain', app.views.Main);


View w/ fullscreen not set on tabpanel


app.views.Main = Ext.extend(Ext.Panel, {
id: 'app-main',
fullscreen: true,
initComponent: function() {

var myTabPanel = new Ext.TabPanel({
activeItem: 0,
id: 'tab-panel',
items: [{
title: 'Card 1',
layout: 'fit',
iconCls: 'info',
cls: 'card card1',
html: '<h1>Card 1</h1>'
},{
title: 'Card 2',
layout: 'fit',
iconCls: 'info',
cls: 'card card2',
html: '<h1>Card 2</h1>'
}]
});

Ext.apply(this, {
dockedItems: [{
dock: 'top',
xtype: 'toolbar',
items: [{
xtype: 'selectfield',
name: 'report-segments',
options: [{
text: 'Option 1'
},{
text: 'Option 2'
},{
text: 'Option 3'
}]
}]
}],
items: [myTabPanel]
});

app.views.LoginPrompt.superclass.initComponent.apply(this, arguments);
}
});

Ext.reg('appMain', app.views.Main);


Steps to reproduce the problem:

Run view with fullscreen set to true and see HTML rendered in card.
Run view without fullscreen and see no HTML rendered.


The result that was expected:

HTML to be rendered in the card


The result that occurs instead:

No HTML is rendered


Screenshot or Video:

None


Debugging already done:

none


Possible fix:

not provided

davet
6 Apr 2011, 2:51 AM
I'm running into the same problem with Sencha Touch 1.0.1a thru to 1.1 - a tab panel inside a viewport panel (layout: card, fullscreen: true, with 1 docked toolbar) will render just the tabbar (ie it's not forcing the container (viewport) panel to extend enough to contain the tab contents), unless I set fullscreen to true on the tab panel. And in that case it stuffs the dimensions, by assuming the viewable height of the tab panel is the full actual device screen height, not the available height of the viewport less the docked toolbar height - and this then leads to scrolling errors etc.

Any word on this? Is this a bug, or something in the way we're implementing the tab panel?

d

grantmeans
6 Apr 2011, 3:17 AM
My issue was resolved by setting the layout property of the panel containing the tab panel. It turned out not to be a bug.

davet
6 Apr 2011, 6:14 AM
Hiya - good to hear it's not a bug, but what did you set the layout of the container to? In my case the parent is a panel with layout of card, but i've also tried nesting the tab panel inside a second panel with various layouts (fit, auto, card, tried hbox/vbox) - none work unless fullscreen is set to true on the tabpanel.

grantmeans
6 Apr 2011, 6:27 AM
My situation matched my code examples in the original post. I had a main panel, with fullscreen set to true, with a tab panel as a child item. I had to set that main panel's layout config option to fit, then it worked.

Have you tried switching that layout in your parent to 'fit' just to see if it worked?

joyefox
13 Apr 2011, 11:04 PM
Hi, we've a Sencha Touch (1.1) app over Phonegap (0.9.4). We've a container panel with 'card' layout and fullscreen set to true. It contains a login form panel (Ext.form.FormPanel) and the main view of the app (Ext.TabPanel). When login success, the app switches from login panel to the main view setting the main view as the active item.

If we run the app on webkit browsers or Android devices it's all ok. If we run it on iPhone or iPad, the main view (TabPanel) displays but doesn't render the content of its items.

Is there a way to fix this problem maintaining the actual structure with a 'card' container and a nested TabPanel?

Thanks