PDA

View Full Version : Tabpanel child components rendering issue



parky128
10 May 2011, 2:56 AM
Hi There,

I got a weird issue with some child components displayed in a tab whereby they are not displaying\sizing correctly. I have a ProgressBar which is being updated dynamically when a particular store loads and a combo box bound to a local store I have defined.

In the screen shots attached you will see how this is all laid out, I have grid on the left from which a user can make selections and then clicks a 'retrieve orders' button. This makes a load call to a couple of stores which in turn populates the components on the right, so a summary panel section at the top and grid panel below it.

My progress bar as you can see is distorted, doesnt give the solid blue bar as expected. Also my combo box in the orders grid footer toolbar doesnt render correctly, width is incorrect but it is bound to a local store I have defined.

I can resolve these issues by setting one of my other tabs as the active tab, when I click back to this Order Review tab and do what is needed to load my stores, the progress bar and combo box display as expected.

I wondered if setting deferredRender to false would sort this out but it does not. I suspect I am missing something very simple here, designer generated code below.

My tabpanel code:


MyTabPanel2Ui = Ext.extend(Ext.TabPanel, {
activeTab: 0,
title: 'OrdersTabs',
initComponent: function() {
this.layoutConfig = {
deferredRender: true
};
this.items = [
{
title: 'Order Review',
iconCls: 'order',
xtype: 'orderreviewpanel'
},
{
xtype: 'panel',
title: 'Route Review',
iconCls: 'slot'
},
{
title: 'Pick List',
iconCls: 'picklist',
xtype: 'picklistpanel'
},
{
xtype: 'panel',
title: 'Stock Enquiry',
iconCls: 'trolley',
html: 'Remotely log users off the tablet application'
}
];
MyTabPanel2Ui.superclass.initComponent.call(this);
}
});

OrderReview panel code (tab 0)


OrderReviewPanelUi = Ext.extend(Ext.Panel, {
title: '',
layout: 'border',
headerAsText: false,
border: false,
initComponent: function() {
this.items = [
{
xtype: 'panel',
title: 'Daily Slots',
region: 'west',
width: 220,
split: true,
layout: 'border',
ref: 'pnlDailySlots',
items: [
{
region: 'center',
ref: '../gridDailySlots',
xtype: 'dailyslotsgrid'
},
{
xtype: 'panel',
title: '',
layout: 'form',
padding: 5,
labelWidth: 50,
region: 'north',
height: 50,
ref: '../pnlDailySlotsCriteria',
items: [
{
xtype: 'datefield',
fieldLabel: 'Date',
anchor: '',
width: 125,
format: 'd-M-Y',
ref: '../../slotDate'
}
]
}
]
},
{
xtype: 'panel',
title: '',
region: 'center',
layout: 'border',
items: [
{
region: 'north',
xtype: 'ordersummarypanel'
},
{
region: 'center',
ref: '../gridOrdersForSlots',
xtype: 'ordersgrid'
}
]
}
];
this.bbar = {
xtype: 'toolbar',
buttonAlign: 'center',
items: [
{
xtype: 'button',
text: 'Hold Zone(s)',
cls: 'x-toolbar-standardbutton',
ref: '../btnHoldZones'
},
{
xtype: 'button',
text: 'Release Zone(s)',
cls: 'x-toolbar-standardbutton',
ref: '../btnReleaseZones'
},
{
xtype: 'tbseparator'
},
{
xtype: 'button',
text: 'Hold Order(s)',
cls: 'x-toolbar-standardbutton',
ref: '../btnHoldOrders'
},
{
xtype: 'button',
text: 'Release Order(s)',
cls: 'x-toolbar-standardbutton',
ref: '../btnReleaseOrders'
},
{
xtype: 'tbseparator'
},
{
xtype: 'button',
text: 'View Order Detail',
cls: 'x-toolbar-standardbutton',
ref: '../btnViewOrderDetail'
},
{
xtype: 'tbfill'
}
]
};
OrderReviewPanelUi.superclass.initComponent.call(this);
}
});

Can anyone assist?

Thanks

friend
10 May 2011, 8:58 AM
I had a similar problem once where the parent container was width constrained, so the child components were doing their best to render and fit within the container. I'd also make sure that the combobox has a declared width.

As a simple test, try increasing the width of the parent container and see what happens. If that helps, then it's a good bet that the progress bar problem can be fixed in the same manner.

arul_ext
14 Dec 2011, 11:14 AM
try this

hideMode: !Ext.isIE?'visibility':'display'