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

これは正常に動作しますが、複数のインスタンスを作成したいboxので、複数のインスタンスを作成するときにformI don't interrupt 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の答えに追加したいことの1つは、独自のクラスを作成しようとする場合は、必ずカスタム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 に答える