Question

// Using extjs 3.x  
var box = new Ext.Textfield { /* textField configuration */ }; 
var form = new Ext.FormPanel{
    /* formPanel configuration */
    items:[box]
}

这很好，但我想创建box的多个实例，这样当我创建form的多个实例时，我不会损坏box，我也不想要使用数组。请建议一种更好的方法来创建和管理Ext.Component

的多个实例

Answer 1

@ Mchl的answer是制作可重用组件的好方法，尤其是当您需要覆盖或向现有组件添加新行为时。如果您只需要重用一些配置设置而不再需要，您还可以做一些更简单的事情：

cfg = {
   xtype: 'textfield',
   width: 100,
   maxLength: 10
}

new Ext.FormPanel({
    items: [cfg, cfg]
});

如果您需要添加特定于实例的配置字段（例如id），您只需传入您的唯一值并将默认cfg添加到它们（applyIf不会覆盖现有属性，它只会添加属性）：< / p>

new Ext.FormPanel({
    items: [
        Ext.applyIf({id:'foo'}, cfg),
        Ext.applyIf({id:'bar'}, cfg)
    ]
});

我要补充一点，@ Mchl的答案是，如果你要努力创建自己的类，请确保给它一个自定义的xtype。这样，即使使用自己的自定义组件，您仍然可以利用Ext的惰性实例化功能，而不必在初始时创建所有内容的实例。

Answer 2

扩展组件是关键

var MyBoxClass = Ext.extend(Ext.form.TextField,{
  /* your config values */
  width: ...

  /* this is important, see bmoeskau's comment below*/
  initComponent: function() {
    BoxClass.superclass.initComponent.call(this);
  }
});


var form = new Ext.FormPanel{

  items: [
    new MyBoxClass({fieldLabel: 'first box'}),
    new MyBoxClass({fieldLabel: 'second box'}),
    new MyBoxClass({fieldLabel: 'third box'}),
  ]

}

extjs 3.x多个实例

2 个答案: