ExtJS的3.x的多个实例

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

这工作得很好，但我想创建的box多个实例，这样当我创建的form多个实例，我不贪box，我也不想使用数组。请提出一个更好的方法来创建和管理Ext.ComponentExtJS的3.x的多个实例

来源

2010-07-29 PHP Developer

扩展组件的多个实例是关键

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-29 19:19:16 Mchl

这个例子很好，但实际上并不需要initComponent。需要的是，如果你重写initComponent，你必须调用超类版本（虽然这适用于你覆盖的组件生命周期中的任何继承方法）。在这个例子中它可以被省略 - 它会被你调用。 – 2010-07-29 19:52:15

感谢您澄清！ – Mchl 2010-07-29 20:08:03

@ MCHL的answer是制作可重复使用的组件的好方法，尤其是当你需要重写或添加对现有的新行为。如果你只需要重用一些配置设置，仅此而已，你也可以做一些简单一点：

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-29 20:02:55

我觉得这真是一个典型的例子 – 2010-07-30 10:00:36

存在，当我们在一个以上的项目申请，其不改变ID的问题： Ext.apply（CFG {ID：“富”}）， Ext.apply （cfg，{id：'bar'}） ] 比不用'bar'重复'foo' – 2010-07-31 06:35:10

对不起，请参阅我编辑的代码，它使用applyIf而不是apply - 这种方式使用了传入的对象，而cfg仅适用于未指定的任何其他默认值。与最初解释的概念相同。 – 2010-07-31 07:09:31

ExtJS的3.x的多个实例

回答

相关问题