How to create two columns into a fieldset?
July 4th, 2009
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
I also wouldn't specify a width in your defaults as you are using anchoring.
/*
* ================ 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);
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
})
});
#If you have any other info about this subject , Please add it free.# |
