PDA

View Full Version : Change form in the run time



sj_tt6
15 May 2012, 9:51 PM
Hi,

My database has different types of data. I create a list to display data types. When the user selects a type a panel will display a form according to the type of data. So every time the user changes the selection of the data type the form will change accordingly.

My form is like below


Ext.define('MyApp.view.RecordForm', {
extend: 'Ext.form.Panel',
id: 'RecordForm',
alias: 'widget.recordform',
frame:true,
border:true,
autoScroll:true,
bodyStyle: 'background-color: #DFE8F6; padding: 10px',
width: 350,
fieldDefaults: {
msgTarget: 'side',
labelWidth: 110
},
defaultType: 'textfield',
defaults: {
anchor: '60%'
},
dockedItems: [{...}]
});



And for each type of data I create a js file that contains fields for the form:


var profile_fields = [{
xtype: 'hiddenfield',
id: 'keyspace',
name: 'keyspace'
},{
xtype: 'hiddenfield',
id: 'cf',
name: 'cf'
},{
xtype: 'textfield',
fieldLabel: 'Username <span style="color: red;">*</span>',
name: 'id',
id: 'id',
allowBlank: false,
anchor: '-300'
},{
xtype: 'textfield',
fieldLabel: 'First Name',
name: 'firstName',
id: 'firstName',
allowBlank: true,
anchor: '-300'
},
...
}




In my controller, I define a function to be called whenever the user selects a data type:


buildForm: function (name) {
var formPanel = this.getRecordForm();
var elms = formPanel.items,
$.each(elms, function(i, o) { //skipped at the 1st time
formPanel.remove(o);
});
var i = 0;
var fields;
if (name == 'Profile') { //loads fields for data type Profile to the form
fields = profile_fields;
} else if (name == 'Projects') { //loads fields for data type Project to the form
fields = projects_fields;
}

//loads fields into panel's items
$.each(fields, function(i, o) {
formPanel.insert(i++, o);
});
formPanel.doLayout();
}



When the user selects the 1st data type e.g. Profile, the form is OK with all fields. However when the user selects another data type e.g. Projects there is a problem at the line 'formPanel.remove(o)' because the object o is 'undefined'. I check and see that after the fields are added to the panel (formPanel.insert(i++, o) ), although the panel's items size has the correct number of fields but all objects inside it are 'undefined'. What did I do wrong?

For the same purpose of loading form in the run time, are there any better ways?

Thank you,

sj_tt6
17 May 2012, 3:23 PM
I spent much time on this problem trying different ways, but still not able to create dynamic forms.

Anybody has any idea?

Thank you,

sword-it
17 May 2012, 11:18 PM
Hi,

Try the following:-




YourContainer.add ( buildForm (yourFormToBeLoad) ); //call buildform
YourContainer.doLayout () ;





function buildForm (formName) {
if ( formName=='FirstForm' ) {
return [
{
xtype: 'form',
name: 'FirstForm',
items: [
{
xtype:'textfield',
name: 'sample'
}
]
}
]
}
else if ( formName=='SecondForm' ) {
return [
{
xtype: 'form',
name: 'SecondForm',
items: [
{
xtype:'textfield',
name: 'sample2'
}
]
}
]
}
}

vietits
18 May 2012, 12:14 AM
Try my fixed version of buildForm() below:


function buildForm (name) {
var formPanel = this.getRecordForm();
// var elms = formPanel.items,
// $.each(elms, function(i, o) { //skipped at the 1st time
// formPanel.remove(o);
// });
formPanel.removeAll();
var i = 0;
var fields;
if (name == 'Profile') { //loads fields for data type Profile to the form
fields = profile_fields;
} else if (name == 'Projects') { //loads fields for data type Project to the form
fields = projects_fields;
}


//loads fields into panel's items
// $.each(fields, function(i, o) {
// formPanel.insert(i++, o);
// });
// formPanel.doLayout();
Ext.Array.each(fields, function(o) {
formPanel.insert(i++, o);
});
}

sj_tt6
18 May 2012, 6:29 AM
Thank you so much sword-it and vietits.

BR,