PDA

View Full Version : ComboFields in Form Panel Not rendering on Intial Page Load.



dduffy
8 Jul 2010, 1:10 AM
Hi there,

I have an unusual situtation, in my code I have 3 combo boxs each set up a xtype combo. I group these three combo box's into a another xtype of fieldset. then I attach the fieldset to a Form Panel, my form panel also defines a Footer Bar with a simple button. When I run the page in my browser the footer bar appears with the button but no combo boxes, now if I refresh the page simply by select F5, when the page re-renders everything is there. Very unusual I think? Further I investigated via Firebug, from what I can tell the combo boxes are infact appearing in the DOM on intial load but just does not appear. I am attaching some screen shots and will then attach my code:

First Image show how FF display the page, and you can see FireBug indicating it is in the DOM but not rendering to the user.

21347

Second image you can see FF displaying.

21346

Now some of my Code - this code snippted defines the 3 combo boxs.


var comboFields = [
{
xtype: "combo",
fieldLabel: "Employee Name",
forceSelection: true,
displayField: "fullName",
valueField: "id",
hiddenName: "id",
loadingText: "Querying...." ,
minChars: 1,
triggerAction: "all",
store: remoteJsonStoreCombo,
emptyText: "Start by typing first or last name of employee",
listEmptyText: "No employees were found matching search criteria",
selectOnFocus: true,
pageSize: 5,
id: "employee_combo"
},
{
xtype: "combo",
fieldLabel: "Cost Centre",
forceSelection: true,
displayField: "costCentreName",
valueField: "id",
hiddenName: "costCentreID",
loadingText: "Querying...." ,
minChars: 1,
triggerAction: "all",
store: remoteJsonStoreComboCC,
emptyText: "Start by typing cost centre name or code",
listEmptyText: "No cost centres were found matching search criteria",
selectOnFocus: true,
pageSize: 5,
id: "cost_centre_combo"
},
{
xtype: "combo",
fieldLabel: "Attendance Type",
forceSelection: true,
displayField: "timeCodeName",
valueField: "id",
hiddenName: "timeCodeID",
loadingText: "Querying...." ,
minChars: 1,
triggerAction: "all",
store: remoteJsonStoreComboTC,
emptyText: "Start by attendance description or code",
listEmptyText: "No attendance types found matching search criteria",
selectOnFocus: true,
pageSize: 5,
id: "attendance_type_combo"
}]

this code defines my fieldset:



var fieldset1 = {
xtype: "fieldset",
border: false,
labelWidth: 175,
defaults: {width: 300},
defaultType: "textfield",
items: comboFields
};
And this code defines my panel


var myformPanel = new Ext.FormPanel (
{
height: 90,
width: 900,
cls: "panel_padding",
title: "Search Attendance Details",
collapsible: true,
titleCollapse: true,
frame: true,
id: "searchPanel",
items: [fieldset1],
fbar: [button_type_search],
buttonAlign: "center"
});

myformPanel.render("div_search_container_001");
Furthermore: I tried executing but no joy.
myformPanel.show();
Ext.getCmp("searchPanel").doLayout();


Any help very much appreciated.

Darragh

Condor
8 Jul 2010, 1:24 AM
The fieldset needs to be autoHeight:true.

dduffy
8 Jul 2010, 1:57 AM
thanks Conor, I also needed to remove the "height: 90" from my Form Panel.

Darragh