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'); 
    } 

});