PDA

View Full Version : [SOLVED] 3.1.1 fieldset+container+elements = no elements rendered



danellison
23 Feb 2010, 9:09 AM
Greetings as always. I have a form fieldset in which I stuff a column layout Container element. The container is configured to have two elements in it. These fields do not render.



var toocd = new Ext.form.FieldSet({
autoHeight: true,
autoWidth: true,
hidden: true,
title: 'Final Activities',
items: [
new Ext.Container({
autoHeight: true,
layout: 'column',
labelWidth: 150,
defaults: {
border: false,
frame: false,
columnWidth: .5
},
items: [
new Ext.BoxComponent({
html: '<span id="ocdduedate">replace dynamically</span>'
}),{
layout: 'form',
items: new Ext.form.DateField({
name: 'datesenttoocd',
fieldLabel: 'Actual Date to OCD',
value: today
})
}
]
})
]
});


I kind of need that column layout for this data. Anybody got any ideas? Thanks in advance.
Dan

bclinton
23 Feb 2010, 9:47 AM
What happens if you put a textfield in the fieldset items before the Container? Does it show up?

danellison
23 Feb 2010, 9:51 AM
What happens if you put a textfield in the fieldset items before the Container? Does it show up?

I haven't tried leaving the container AND moving the elements. I removed the Container and the elements render correctly but without the desired column layout of course.

Dan

bclinton
23 Feb 2010, 11:39 AM
You have hidden: true in your fieldset definition (could it be this simple? :) )

danellison
23 Feb 2010, 12:38 PM
You have hidden: true in your fieldset definition (could it be this simple? :) )

:-? Ahhhh. Close. I render everything hidden until a combobox value is selected and then show certain areas based on the selection. I do then show the hidden fieldset. the forceLayout config option plus careful netsing of containers got me the look I was after. This fieldset config works (at least in firefox):



{
title: 'Initial Revision Review (4 weeks after receipt)',
layout: 'form',
autoHeight: true,
autoWidth: true,
labelWidth: 150,
hidden: true,
forceLayout: true,
items: [{
xtype: 'container',
autoHeight: true,
layout: 'column',
labelWidth: 100,
defaults: {
autoHeight: true,
layout: 'form'
},
items: [{
xtype: 'box',
width: 375,
style: 'font-size: 1.2em; padding-top: 2px;',
html: '<em>Week 4 revision due:</em>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<span style="color: red;" id="fourweekrev"></span>'
},{
xtype: 'container',
layout: 'form',
width: 300,
labelWidth: 150,
items: [{
xtype: 'datefield',
id: 'initialreviewcomplete',
fieldLabel: 'Initial Review Completed',
format: 'M-d-Y',
width: 120,
allowBlank: false
}]
}]
}



Thanks for your thoughts. Stay sane,
Dan