Extjs 组成组件答案

【问题标题】：Extjs composing componentExtjs 组成组件
【发布时间】：2012-10-18 02:46:57
【问题描述】：

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

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

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

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

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

【问题讨论】：

“自定义控件”是什么意思？您是否想将此容器定义为单独的组件，即。 Ext.container.Container?

标签： extjs extjs4

【解决方案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
}

【讨论】：

但在这种情况下，我的基类是“容器”。有办法成为“textField”吗？
为什么它必须是文本字段而不是容器？
把它写成插件会更好。
如果我想这样使用：{ xtype:'mycomponent', fieldLabel:"First Name" }

【解决方案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');
    }

});

【讨论】：