PDA

View Full Version : Display issue with collapsed panel



JKeane
23 Nov 2009, 10:32 AM
I have a panel with three form fields that I'd like to start off collapsed. If the panel is set as "collapsed: true", the fields don't show up. The fields do show up, however, if the panel is "collapsed: false" and I manually collapse the panel.

If this matters, this panel is part of a BorderPanel.



search = new Ext.FormPanel({
id: "search",
height: 100,
region: "north",
labelAlign: "top",
frame: false,
title: "Search Criteria",
collapsible: true,
collapsed: true,
frame: true,
floatable: false,
submitOnEnter: true,
items: [
{
xtype: "container",
layout: "hbox",
collapsible: false,
items: [
{
xtype: "container",
layout: "form",
flex: 1,
items: [
{
xtype: "combo",
mode: "local",
typeahead: true,
name: "monthDisplay",
id: "monthDisplay",
hiddenName: "month",
enableKeyEvents: true,
store: (function(){
x = [];
<cfloop from="1" to="12" index="m">
x.push(<cfoutput>[#m#,"#MonthAsString(m)#"]</cfoutput>);
</cfloop>
x.push(['Q1','January-March']);
x.push(['Q2','April-June']);
x.push(['Q3','July-September']);
x.push(['Q4','October-December']);
return x;
})(),
//value: cMonth,
forceSelection: true,
fieldLabel: "Month",
allowBlank: true,
triggerAction: "all",
listeners: {
keyup: function(f,e) {submitForm(f,e)}
}
}
]
},
{
xtype: "container",
layout: "form",
flex: 1,
items: [
{
xtype: "combo",
mode: "local",
typeahead: true,
name: "yearDisplay",
id: "yearDisplay",
hiddenName: "year",
enableKeyEvents: true,
store: (function() {
x = [];
for(year = mYear; year <= cYear; year++) x.push(year);
x.sort(function(a,b) { return b-a; })
return x;
})(),
//value: cYear,
valueField: 'year',
displayField: 'yearDisplay',
fieldLabel: "Year",
forceSelection: true,
allowBlank: true,
triggerAction: "all",
listeners: {
keyup: function(f,e) {submitForm(f,e)}
}
}
]
},
{
xtype: "container",
layout: "form",
flex: 3,
items: [
{
xtype: "textfield",
name: "searchString",
id: "searchString",
fieldLabel: "Client/Project Name",
enableKeyEvents: true,
width: 573,
listeners: {
keyup: function(f,e) {submitForm(f,e)}
}
}
]
}
]
}
],
buttons: [
{
xtype: "button",
type: "submit",
text: "Search",
id: "btnSubmit_search",
listeners: {
click: function() {
search.getForm().submit();
}
}
},
{
xtype: "button",
type: "reset",
text: "Reset",
id: "btnReset_search",
listeners: {
click: function() {
search.getForm().reset();
}
}
}
],
buttonAlign: "left"
});

aw1zard2
23 Nov 2009, 10:40 AM
add forceLayout: true, to your formPanel.
That should render them even if hidden.

http://www.extjs.com/deploy/dev/docs/?class=Ext.Container&member=forceLayout (http://www.extjs.com/forum/../deploy/dev/docs/?class=Ext.Container&member=forceLayout)

JKeane
23 Nov 2009, 10:46 AM
That didn't seem to work. They're still not showing.

EDIT: I don't know if this is relevant, but the platform I'm developing this for (and thus where my error is appearing in) is IE6. Unfortunate, I know, but that's beyond my control.

aw1zard2
23 Nov 2009, 10:59 AM
Where did you place the forceLayout?

Might need a forceLayout in the containers with layout: 'form'

JKeane
23 Nov 2009, 11:05 AM
Yeah, I tried that. Here's what I have now. Visually, it appears identical to how it was with forceLayout: false.



search = new Ext.FormPanel({
id: "search",
height: 100,
region: "north",
labelAlign: "top",
frame: false,
title: "Search Criteria",
collapsible: true,
collapsed: true,
forceLayout: true,
frame: true,
floatable: false,
submitOnEnter: true,
items: [
{
xtype: "container",
layout: "hbox",
collapsible: false,
items: [
{
xtype: "container",
layout: "form",
forceLayout: true,
flex: 1,
items: [
{
xtype: "combo",
mode: "local",
typeahead: true,
name: "monthDisplay",
id: "monthDisplay",
hiddenName: "month",
enableKeyEvents: true,
store: (function(){
x = [];
<cfloop from="1" to="12" index="m">
x.push(<cfoutput>[#m#,"#MonthAsString(m)#"]</cfoutput>);
</cfloop>
x.push(['Q1','January-March']);
x.push(['Q2','April-June']);
x.push(['Q3','July-September']);
x.push(['Q4','October-December']);
return x;
})(),
//value: cMonth,
forceSelection: true,
fieldLabel: "Month",
allowBlank: true,
triggerAction: "all",
listeners: {
keyup: function(f,e) {submitForm(f,e)}
}
}
]
},
{
xtype: "container",
layout: "form",
forceLayout: true,
flex: 1,
items: [
{
xtype: "combo",
mode: "local",
typeahead: true,
name: "yearDisplay",
id: "yearDisplay",
hiddenName: "year",
enableKeyEvents: true,
store: (function() {
x = [];
for(year = mYear; year <= cYear; year++) x.push(year);
x.sort(function(a,b) { return b-a; })
return x;
})(),
//value: cYear,
valueField: 'year',
displayField: 'yearDisplay',
fieldLabel: "Year",
forceSelection: true,
allowBlank: true,
triggerAction: "all",
listeners: {
keyup: function(f,e) {submitForm(f,e)}
}
}
]
},
{
xtype: "container",
layout: "form",
flex: 3,
forceLayout: true,
items: [
{
xtype: "textfield",
name: "searchString",
id: "searchString",
fieldLabel: "Client/Project Name",
enableKeyEvents: true,
width: 573,
listeners: {
keyup: function(f,e) {submitForm(f,e)}
}
}
]
}
]
}
],
buttons: [
{
xtype: "button",
type: "submit",
text: "Search",
id: "btnSubmit_search",
listeners: {
click: function() {
search.getForm().submit();
}
}
},
{
xtype: "button",
type: "reset",
text: "Reset",
id: "btnReset_search",
listeners: {
click: function() {
search.getForm().reset();
}
}
}
],
buttonAlign: "left"
});

aw1zard2
23 Nov 2009, 11:07 AM
Might try doing a collapse() in a afterrender event.

JKeane
23 Nov 2009, 11:18 AM
Works for me! Thanks.