PDA

View Full Version : How to create two columns into a fieldset?



sonkey
5 Jun 2008, 5:32 PM
I meet a problem the same as the thread below:
http://extjs.com/forum/showthread.php?t=37661&highlight=fieldset

I want to create two columns in a fieldset, but it can't work as my expected? It's it a bug for the fieldset?

this is my code base on extjs example, just a little change:


/*
* ================ Form 2 =======================
*/
bd.createChild({tag: 'h2', html: 'Form 2 - Adding fieldsets'});

var fsf = new Ext.FormPanel({
labelWidth: 75, // label settings here cascade unless overridden
url:'save-form.php',
frame:true,
title: 'Simple Form with FieldSets',
bodyStyle:'padding:5px 5px 0',
width: 700,

items: [{
xtype:'fieldset',
checkboxToggle:true,
title: 'User Information',
autoHeight:true,
defaults: {width: 210},
defaultType: 'textfield',
// collapsed: true,
items :[{
columnWidth:.5,
layout: 'form',
items: [{
xtype:'textfield',
fieldLabel: 'First Name',
name: 'first',
anchor:'95%'
}, {
xtype:'textfield',
fieldLabel: 'Company',
name: 'company',
anchor:'95%'
}]
},{
columnWidth:.5,
layout: 'form',
items: [{
xtype:'textfield',
fieldLabel: 'Last Name',
name: 'last',
anchor:'95%'
},{
xtype:'textfield',
fieldLabel: 'Email',
name: 'email',
vtype:'email',
anchor:'95%'
}]
}]
},{
xtype:'fieldset',
title: 'Phone Number',
collapsible: true,
autoHeight:true,
defaults: {width: 210},
defaultType: 'textfield',
items :[{
fieldLabel: 'Home',
name: 'home',
value: '(888) 555-1212'
},{
fieldLabel: 'Business',
name: 'business'
},{
fieldLabel: 'Mobile',
name: 'mobile'
},{
fieldLabel: 'Fax',
name: 'fax'
}
]
}],

buttons: [{
text: 'Save'
},{
text: 'Cancel'
}]
});

fsf.render(document.body);

any hints? tutorials? examples?

regards

danh2000
5 Jun 2008, 7:28 PM
Columns need a column layout to work - your fieldset doesn't specify any layout.

I also wouldn't specify a width in your defaults as you are using anchoring.

sonkey
5 Jun 2008, 9:59 PM
I set the fieldset's layout as 'column', two inputs can layout as two columns, but the textfield's label couldn't display. :((


/*
* ================ Form 2 =======================
*/
bd.createChild({tag: 'h2', html: 'Form 2 - Adding fieldsets'});

var fsf = new Ext.FormPanel({
labelWidth: 75, // label settings here cascade unless overridden
url:'save-form.php',
frame:true,
title: 'Simple Form with FieldSets',
bodyStyle:'padding:5px 5px 0',
width: 700,
items: [{
xtype:'fieldset',
checkboxToggle:true,
title: 'User Information',
autoHeight:true,
defaultType: 'textfield',
layout: 'column',
labelWidth: 75,
items :[{
columnWidth:.5,
layout: 'form',
items: [{
xtype:'textfield',
fieldLabel: 'First Name',
name: 'first',
width: 150
}, {
xtype:'textfield',
fieldLabel: 'Company',
name: 'company',
width: 150
}]
},{
columnWidth:.5,
layout: 'form',
items: [{
xtype:'textfield',
fieldLabel: 'Last Name',
name: 'last',
width: 150
},{
xtype:'textfield',
fieldLabel: 'Email',
name: 'email',
vtype:'email',
width: 150
}]
}]
},{
xtype:'fieldset',
title: 'Phone Number',
collapsible: true,
autoHeight:true,
defaults: {width: 210},
defaultType: 'textfield',
items :[{
fieldLabel: 'Home',
name: 'home',
value: '(888) 555-1212'
},{
fieldLabel: 'Business',
name: 'business'
},{
fieldLabel: 'Mobile',
name: 'mobile'
},{
fieldLabel: 'Fax',
name: 'fax'
}
]
}],

buttons: [{
text: 'Save'
},{
text: 'Cancel'
}]
});

fsf.render(document.body);

danh2000
5 Jun 2008, 11:47 PM
I think this should give you the layout you want - I've pulled it from one of my custom layout components:

Update: If you copied this code prior to this update (it's only been a few minutes so probably not), there was a problem that I've rectified.



Ext.onReady(function(){
var fsf = new Ext.FormPanel({
labelWidth: 75, // label settings here cascade unless overridden
url: 'save-form.php',
frame: true,
title: 'Simple Form with FieldSets',
bodyStyle: 'padding:5px 5px 0',
items: [
{
xtype: 'fieldset',
autoHeight: true,
title: 'User Information',
layout: 'column',
anchor: '100%',
border: 'false',
items: [
{
columnWidth: 0.5,
border: false,
layout: 'form',
items: [
{
xtype: 'textfield',
fieldLabel: 'First Name',
name: 'first',
anchor: '100%'
}, {
xtype: 'textfield',
fieldLabel: 'Company',
name: 'company',
anchor: '100%'
}
],
bodyStyle: 'padding-right:'+10+'px;'
},
{
columnWidth: 0.5,
layout: 'form',
border: false,
bodyStyle: 'padding-left:'+10+'px;',
items: [
{
xtype: 'textfield',
fieldLabel: 'Last Name',
name: 'last',
anchor: '100%'
}, {
xtype: 'textfield',
fieldLabel: 'Email',
name: 'email',
vtype: 'email',
anchor: '100%'
}
]
}
]
},{
xtype:'fieldset',
title: 'Phone Number',
collapsible: true,
autoHeight:true,
defaults: {width: 210},
defaultType: 'textfield',
items :[{
fieldLabel: 'Home',
name: 'home',
value: '(888) 555-1212'
},{
fieldLabel: 'Business',
name: 'business'
},{
fieldLabel: 'Mobile',
name: 'mobile'
},{
fieldLabel: 'Fax',
name: 'fax'
}
]
}
],

buttons: [{
text: 'Save'
}, {
text: 'Cancel'
}]
});
var vp = new Ext.Viewport({
layout: 'fit',
items: fsf
})


});