PDA

View Full Version : TabPanel content doesn't display until orientation change



rickirk
23 Jul 2011, 7:17 AM
I have a tabpanel loaded within another panel, the tabs themselves display fine, but no content appears until after the phones orientation has been changed. I can change it back again and the content is shown correctly.


var info = new Ext.Panel({
title: 'Order Info',
fullscreen: true,
scroll: 'vertical',
items: [
{tpl:[
'{billing_firstname}',
]}
],
updateWithRecord: function(record) {
Ext.each(this.items.items, function(item) {
item.update(record.data);
});
}
});

var items = new Ext.Panel({
title: 'Order Items',
fullscreen: true,
scroll: 'vertical',
html: 'items',
});

var tabs = new Ext.TabPanel({
fullscreen: true,
layout: 'fit',
type: 'light',
items: [info,items]
});

app.views.OrderDetail = Ext.extend(Ext.Panel, {
dockedItems: [{
xtype: 'toolbar',
title: 'Order Details',
}],
styleHtmlContent:true,
items: [tabs]
});Does anyone have any idea how I might be able to sort this out?

Cheers!

Roger_K
24 Jul 2011, 4:13 AM
Try this:

Your items and your info panels should not be fullscreen. Remove the fullscreen:true tag for both of them, however keep the one in the tabpanel. I had a problem with this last time too.

rickirk
24 Jul 2011, 4:33 AM
Hi Roger, I have removed the fullscreen settings on the tabpanel contents and now the content loads straight away, but the tabpanel itself doesn't fill the screen.

The code for this view is now:


var productInfo = new Ext.Panel({
title: 'Info',
styleHtmlContent:true,
scroll: 'vertical',
items: [
{
id:'holder',
tpl:['{description_text}']
}
],
updateWithRecord: function(record) {
Ext.each(this.items.items, function(item) {
item.update(record.data);
});
}
});

var productImages = new Ext.List({
title: 'Images',
selectedItemCls:'',
store: app.stores.productImages,
itemTpl: tmpProductImgList,
});

var associatedProducts = new Ext.List({
title: 'Associated Products',
selectedItemCls:'',
store: app.stores.productAssociated,
itemTpl: '{name}',
});

var tabs = new Ext.TabPanel({
fullscreen: true,
layout: 'fit',
type: 'light',
items: [productInfo,productImages,associatedProducts]
});

var productDetailsToolbar = new Ext.Toolbar({
title: 'Product Details',
items: [
{
text: 'Back',
ui: 'back',
listeners: {
'tap': function () {
Ext.dispatch({
controller: app.controllers.products,
action: 'index',
animation: {type:'slide', direction:'right'}
});
}
}
}
]
})

app.views.ProductDetails = Ext.extend(Ext.Panel, {
fullscreen:true,
layout:'card',
dockedItems: [productDetailsToolbar],
styleHtmlContent:true,
items: [tabs]
});You can see it in action here: http://www.shop-outdoors.co.uk/magento-manager/index.html

Click on the products tab and then select a product from the list.

Cheers.

Roger_K
24 Jul 2011, 5:06 AM
Try and remove the layout:'fit' from your tabpanel.

rickirk
24 Jul 2011, 6:09 AM
Still makes no difference. If the main panel layout is set to 'card' then the inner content is displayed but doesn't fill the screen (has a border round it), and if the layout isn't set the content will fill the screen but won't load until the the orientation is changed.

Really confusing me, tried so many different combinations now!

rickirk
24 Jul 2011, 10:35 AM
Right after playing around all day I finally got it to work how I needed it to!

I used the original layout selections which displayed the tabs but did not display content until the orientation changed. I discovered that the height of the tabpanel was some reason 0. Setting the tabpanel's height after the view loaded would show the content so I put the following listener on the main viewport to calculate and set the height that the tab panel needed to be to fill the screen.


listeners: {
'afterlayout': function() {
var trueHeight = ((this.getHeight())-(productDetailsToolbar.getHeight()));
tabs.setHeight(trueHeight);
}
}

Because the listener is fired every time the layout is changed, it still works if the orientation is changed.