extjs3.4 : how to use a fieldset in 2 different forms?

Question

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

Answer 1

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]
});

Answer 2

I am pretty sure if you add the same element in two places it will only render in the first form and not the other. It treats it as an error. You need to put a different ID for the element in the second form. Both fieldsets have to be separate entities differentiated by different IDs. They can have the same configs just as long as they have different IDs.