I am using ExtJS 3.4, I have a fieldset mainDetailsFieldSet
which I want to use in two forms, addFormPanel
and updateFormPanel
. I am able to get the fieldset in addFormPanel
form, but I am not able to get it in updateFormPanel..I am getting a single blue line. I am not able to find what is wrong here...can someone help me with this?
Here is my code:
//mainfieldset with a textfield and combobox
var clCombo = new Ext.form.ComboBox({
store: store,
fieldLabel: 'Name',
displayField: 'clName',
name: 'clName',
valueField: 'clName',
typeAhead: true,
mode: 'local',
triggerAction: 'all',
emptyText: 'Select Here'
});
this.mainDetailsFieldSet = new Ext.form.FieldSet({
title: 'Details',
items:[
{
fieldLabel: ' Name',
xtype: 'textfield',
name: 'name'
},clCombo
]
});
var mainDetailsFieldSet = this.mainDetailsFieldSet ;
//addFormPanel, where I am using mainfieldset
this.addFormPanel = new Ext.form.FormPanel({
title: 'Add Form',
autoScroll: true,
items:[
mainDetailsFieldSet ]
});
//updateformpanel, where I want to add the same field set again
this.updateFormPanel = new Ext.form.FormPanel({
autoScroll: true,
items:[mainDetailsFieldSet]
});
Thanks in advance
You cannot render one instance at to different places.
Variant A: You will need to create a second instance if you need it twice.
this.comboCfg = {
store: store,
fieldLabel: 'Name',
displayField: 'clName',
name: 'clName',
valueField: 'clName',
typeAhead: true,
mode: 'local',
triggerAction: 'all',
emptyText: 'Select Here'
};
this.mainDetailsFieldSet1 = new Ext.form.FieldSet({
title: 'Details',
items:[{
fieldLabel: ' Name',
xtype: 'textfield',
name: 'name'
},Ext.apply({xtype:'combo'},comboCfg)]
});
this.mainDetailsFieldSet2 = new Ext.form.FieldSet({
title: 'Details',
items:[{
fieldLabel: ' Name',
xtype: 'textfield',
name: 'name'
},Ext.apply({xtype:'combo'},comboCfg)]
});
var mainDetailsFieldSet1 = this.mainDetailsFieldSet1;
var mainDetailsFieldSet2 = this.mainDetailsFieldSet2;
this.addFormPanel = new Ext.form.FormPanel({
title: 'Add Form',
autoScroll: true,
items:[mainDetailsFieldSet1]
});
this.updateFormPanel = new Ext.form.FormPanel({
autoScroll: true,
items:[mainDetailsFieldSet2]
});
Variant B: But what you can do is remove and add the instance each time.
this.addFormPanel = new Ext.form.FormPanel({
title: 'Add Form',
autoScroll: true
});
// before show
this.addFormPanel.add(mainDetailsFieldSet);
// before hide
this.addFormPanel.remove(mainDetailsFieldSet);
this.updateFormPanel = new Ext.form.FormPanel({
autoScroll: true
});
// before show
this.updateFormPanel .add(mainDetailsFieldSet);
// before hide
this.updateFormPanel .remove(mainDetailsFieldSet);
Note
Use configurations with xtype
's as often as you can and don't define any id
by yourself if it is not strictly needed.
Variant C:
this.comboCfg = {
store: store,
fieldLabel: 'Name',
displayField: 'clName',
name: 'clName',
valueField: 'clName',
typeAhead: true,
mode: 'local',
triggerAction: 'all',
emptyText: 'Select Here'
};
this.mainDetailsFieldSetCfg = {
xtype: 'fieldset',
title: 'Details',
items:[
{ xtype:'textfield',fieldLabel:' Name',name:'name'},
Ext.apply({xtype:'combo'},comboCfg)
]
});
this.addFormPanel = new Ext.form.FormPanel({
title: 'Add Form',
autoScroll: true,
items:[this.mainDetailsFieldSetCfg]
});
this.updateFormPanel = new Ext.form.FormPanel({
autoScroll: true,
items:[this.mainDetailsFieldSetCfg]
});