PDA

View Full Version : TextFields won't display inside FieldSet



catacaustic
23 Oct 2007, 4:57 PM
I'm trying to put together a relatively simple form, and having problems. The form displays fine, and so does the fieldset outline, the Textfield outside the form, and the button, but anything that I try to add to the fieldset is never rendered. I've tried to stick pretty close to the examples, but nothing that I've changed has worked. The form is set up like:
this.inputForm = new Ext.form.FormPanel ({
layout: "form",
region: "center",
title: "Time Input",
bodyStyle: "padding: 5px",
labelAlign: "left",
labelWidth: 60,
items: [
new Ext.form.FieldSet ({
title: "Choose One",
defaults: {
width: 90
},
items: [
new Ext.form.TextField ({
name: "customerid",
fieldLabel: "Customer"
}),
new Ext.form.TextField ({
name: "projectid",
fieldLabel: "Project"
})
]
}),
new Ext.form.TextField ({
name: "test3",
fieldLabel: "Test 3",
width: 90
})
],
buttons: [
{
text: "Add Time"
}
]
}); Anything that's inside the "items" config of a fieldset won't display. Any ideas on where I've got this wrong?

tryanDLS
23 Oct 2007, 6:46 PM
Did you try doing it like the dynamic example, which doesn't use the 'new' ctor in the items collection - it just specifies the field properties.

catacaustic
23 Oct 2007, 6:58 PM
I have, but I went back and tried again... This code gives the same result.
this.inputForm = new Ext.form.FormPanel ({
layout: "form",
region: "center",
title: "Time Input",
bodyStyle: "padding: 5px",
labelAlign: "left",
labelWidth: 60,
items: [
{
xtype: "fieldset",
title: "Choose One",
defaults: {
width: 90
},
defaultType: "textfield",
items: [
{
name: "test1",
fieldLabel: "Test Field 1"
}
]
}
],
buttons: [
{
text: "Add Time"
}
]
});That's doing it the way that the docs have done. What I can't work out is that in my first example, when the TextField item was outside the fieldset it displayed correctly, and when it is inside the fieldset nothing is rendered. The same thing has happened with this example.

I've done a cut & paste directly from the docs placing the items from that form inside the items in my form, but still the same problem happens.

tryanDLS
23 Oct 2007, 7:16 PM
I just tried this slightly modified version of your code by replacing dynamic.js in that example and it works fine in FF/IE. Note that the region and layout configs are not necessary. You may need region if this inside some other container, but i don't think you ever need layout b/c you're declaring FormPanel.


Ext.onReady(function(){
var simple = new Ext.form.FormPanel ({
//layout: "form",
//region: "center",
title: "Time Input",
bodyStyle: "padding: 5px",
labelAlign: "left",
labelWidth: 90,
items: [
{
xtype: "fieldset",
title: "Choose One",
defaults: {
width: 120
},
defaultType: "textfield",
items: [
{
name: "test1",
fieldLabel: "Test Field 1"
},{
name: "test2",
fieldLabel: "Test Field 2"
}
]
}
],
buttons: [
{
text: "Add Time"
}
]
});
simple.render(document.body);
});

catacaustic
23 Oct 2007, 8:03 PM
Thanks for your help Tim. I still can't get it, so I'll just try to use it without the fieldsets.

I am using this inside another region, but it's a TabPanel, so you are very right with not needing those config items. I've taken those out and it's the same. Not sure why I can't get this to work, but I've spent to much time on it already (but thankfully not as much as I would have alone thanks to your assistance) so I might leave it there for now, go with what I can get to work, and try coming back to it again later when I can.

gcase
6 Nov 2007, 1:43 PM
catacaustic,

I'm not sure if this is the same problem you were having, but I was having similar problems where fields within a typeset where not being displayed in IE6. It worked fine in firefox and IE7, but nothing in the fieldset was displayed in IE7. After much trial and error, I was finally able to get it to display if I removed the defaults: {width: xxx} option. I have no idea why that made a difference, but it did. Give it a try.

I was also able to get them to render by changing the frame: option to false, in the form, but that wasn't an acceptable solution for me.