PDA

View Full Version : Dynamic FormPanel



bahramshahabi
13 Mar 2011, 1:41 AM
hello
How to add the fields dynamically to a formpanel ???

walldorff
13 Mar 2011, 2:34 AM
var form = new Ext.form.FormPanel({...});

On afterrender event you can do
form.getForm().add({xtype: 'textfield', fieldLabel: 'Label'});

bahramshahabi
13 Mar 2011, 3:54 AM
I use form in tabpanel .
with form.getForm().add({xtype: 'textfield', fieldLabel: 'Label'});
I can't add the fields dynamically to a form



Ext.onReady(function () {
var index = 0;// basic tabs 1, built from existing content
var tabs = new Ext.ux.tot2ivn.VrTabPanel({

renderTo:'tabs',

width: 450,
activeTab: 0,
frame: true,
defaults: { autoHeight: true },
enableTabScroll: true,

items: [{
title: 'Normal Tab',
xtype: 'form',
items: [{
xtype: 'fieldset',
checkboxToggle: true,
title: 'User Information',
autoHeight: true,
defaults: { width: 210 },
defaultType: 'textfield',
collapsed: true,
items: [{
fieldLabel: 'First Name',
name: 'first',
allowBlank: false
}, {
fieldLabel: 'Last Name',
name: 'last'
}, {
fieldLabel: 'Company',
name: 'company'
}, {
fieldLabel: 'Email',
name: 'email',
vtype: 'email'
}
]
}, {
xtype: 'fieldset',
title: 'Phone Number',
collapsible: true,
autoHeight: true,
defaults: { width: 210 },
defaultType: 'textfield',
items: [
{
id:'info'

}, {
fieldLabel: 'Business',
name: 'business'
}, {
fieldLabel: 'Mobile',
name: 'mobile'
}, {
fieldLabel: 'Fax',
name: 'fax'
}
]
]


});



});

walldorff
13 Mar 2011, 6:11 AM
Your brackets aren't right. This works:

var tabs = new Ext.TabPanel({
renderTo : Ext.getBody(), // 'tabs', // <=== Ext.getBody() for the test
width : 450,
activeTab : 0,
frame : true,
defaults : { autoHeight: true },
enableTabScroll : true,
items: [{
id : 'theform', // <====== id for retrieving the form with Ext.getCmp()
title : 'Normal Tab',
xtype : 'form',
items : [{
xtype : 'fieldset',
checkboxToggle : true,
title : 'User Information',
autoHeight : true,
defaults : { width: 210 },
defaultType : 'textfield',
collapsed : true,
items: [{
fieldLabel : 'First Name',
name : 'first',
allowBlank : false
},{
fieldLabel : 'Last Name',
name : 'last'
},{
fieldLabel : 'Company',
name : 'company'
},{
fieldLabel : 'Email',
name : 'email',
vtype : 'email'
}]
},{
xtype : 'fieldset',
title : 'Phone Number',
collapsible : true,
autoHeight : true,
defaults : { width: 210 },
defaultType : 'textfield',
items: [{
id : 'info' // <=== field without a label?
}, {
fieldLabel : 'Business',
name : 'business'
},{
fieldLabel : 'Mobile',
name : 'mobile'
},{
fieldLabel : 'Fax',
name : 'fax'
}]
}]
}]
});

form = Ext.getCmp('theform');
form.add({xtype: 'textfield', fieldLabel: 'Label'});
form.doLayout();

mitchellsimoens
13 Mar 2011, 6:16 AM
I use form in tabpanel .
with form.getForm().add({xtype: 'textfield', fieldLabel: 'Label'});
I can't add the fields dynamically to a form


You need to understand. In a FormPanel, there is the actual FormPanel and then there is the BasicForm. BasicForm deals with loading and submitting the form. FormPanel deals with the items (the UI). So what you are doing above is trying to add fields to the BasicForm because that's what the getForm method will do, return the BasicForm under the FormPanel.

bahramshahabi
13 Mar 2011, 6:18 AM
Thanks a lot:)

walldorff
13 Mar 2011, 6:20 AM
Good explanation, Mitchell :)