0

ExtJs4.1を使用していますが、右側にカスタムボタンがある新しいtextFieldを作成する必要があります。

私の最初の試みは、textFieldとボタンを内部に持つコンテナを作成することでした。

{
   xtype: 'container',
   layout: 'hbox',
   items:[
     {xtype:'textField', flex:1},
     {xtype:'button', width:17}  
   ]
}

実際、このコンポーネントはさまざまな場所で使用するため、カスタムコントロールを作成する必要があります。

textFieldが最も重要なコントロールであることを思い出して、これを行うにはどうすればよいですか。

4

2 に答える 2

0

定義する必要があります。簡単に参照できるように、xtype エイリアスを指定できます。呼び出す前に、ロードされていることを確認してください ('requires' を使用)。

Ext.define('My.namespace.Component', {
  extend: 'Ext.container.Container',  //extend Container
  alias: 'widget.mycomponent',        //this is the xtype (minus 'widget.')

  layout:{
    type:'hbox'
  },

  initComponent:function(){

    Ext.applyIf(this, {
          items: [
                {
                    xtype: 'textfield',
                    fieldLabel: 'Label',
                    flex: 1
                },
                {
                    xtype: 'button',
                    text: 'MyButton',
                    flex: 1
                }
            ]
    });

    this.callParent(arguments); //everything breaks if you forget this
  }
});

ビューまたは他のコンポーネントでは、requires を使用して上記のコンポーネントをロードします。

...
requires:[
  'My.namespace.Component'
]
...

次のように使用します。

{
  xtype:'mycomponent',
  width:666
}
于 2012-10-28T18:56:31.800 に答える