Extjs撰寫組件

Question

我使用ExtJs4.1，我需要創建一個新的textField，在右側有一個自定義按鈕。

我第一次嘗試是創建一個文本框的容器和裏面的按鈕：

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

事實上，我會在很多地方使用這個組件，所以我需要創建一個自定義的控制。

我該怎麼做，記住textField是最重要的控件。

Answer 1

您需要定義它。你可以給它一個xtype別名來輕鬆地引用它。確保在嘗試調用它之前加載它（通過使用'require'）。

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:[ 
    'My.namespace.Component' 
] 
... 

使用方法如下：

{ 
    xtype:'mycomponent', 
    width:666 
} 

Answer 2

製作一個資源，我發現了「觸發現場「解決方案：

Ext.define('App.controls.CoTextField',{ 
    extend: 'Ext.form.field.Trigger', 
    alias: 'widget.cotextfield', 
    triggerCls: 'x-form-trigger', 
    trigger2Cls: 'x-form-clear-trigger', 
    onTriggerClick: function() { 
     alert('Down button'); 
    }, 
    onTrigger2Click: function() { 
     alert('Clear button'); 
    } 

});