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 回答