extjs - Extjs 组成组件

Question

我正在使用 ExtJs4.1，我需要创建一个新的 textField，右侧有一个自定义按钮。

我的第一次尝试是创建一个容器，里面有一个 textField 和一个按钮：

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

其实我很多地方都会用到这个组件，所以需要创建一个自定义控件。

我该怎么做，记住 textField 是最重要的控件。

Answer 1

你需要定义它。您可以给它一个 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
}

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

});