1 
// 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

4

2 回答 2

5

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

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

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

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

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

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

于 2010-07-29T20:02:55.380 回答
4

扩展组件是关键

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'}),
  ]

}
于 2010-07-29T19:19:16.063 回答