extjs3.4：如何使用2种不同形式的字段集？

Question

我正在使用ExtJS 3.4，我有一个字段集mainDetailsFieldSet我希望以两种形式使用addFormPanel和updateFormPanel。我能够以addFormPanel形式获取fieldset，但我无法在updateFormPanel中获取它。我得到一条蓝线。我无法在这里找到什么问题......有人可以帮我解决这个问题吗？

这是我的代码：

//带有textfield和combobox的mainfieldset

  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，我在使用mainfieldset

this.addFormPanel = new Ext.form.FormPanel({
                title: 'Add Form',
                autoScroll: true,
                items:[
                    mainDetailsFieldSet ]
});

// updateformpanel，我想再次添加相同的字段集

this.updateFormPanel = new Ext.form.FormPanel({
            autoScroll: true,
            items:[mainDetailsFieldSet]
        }); 

提前致谢

Answer 1

您无法将一个实例渲染到不同的位置。

变体A：如果需要两次，则需要创建第二个实例。

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

变式B 但您每次都可以remove和add实例。

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

---

注意 尽可能经常使用xtype的配置，如果不是严格需要，请不要自己定义id。

---

变体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

我很确定如果你在两个地方添加相同的元素，它只会在第一种形式而不是另一种形式呈现。它将其视为错误。您需要为第二种形式的元素添加不同的ID。两个字段集必须是由不同ID区分的单独实体。只要它们具有不同的ID，它们就可以具有相同的配置。