extjsextjs3fieldsetformpanel

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


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


Solution

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