Ext.field.Text只是一个简单的输入框，如果有值被输入就会在尾部出现一个‘X’button,

如果想在text框上放上别的button,放上lable，图片什么的该如何扩展呢？

其父类Ext.field.Field继承了Ext.Decorator，也就是所有Ext.field.Field的子类都有Ext.Decorator的特性-

可以指定component.

拿最简单的text field来说，指定的component是input类,type是text.

也就是说text field的核心还是Ext.field.input类。

看一下源代码就会发现我们看到的输入框是通过重写Ext.Component的getTemplate实现的。

共有3个Item,input,clearIcon和mask.最初只有input显示，clearIcon也就是'x'button通过css(display:none)控制不让其显示，

直到有值输入才改变css（display:block）让其显示

----------------------------------------------------------------

getTemplate:function(){
       var items =[{
                reference:'input',
                tag:this.tag
            },{
                reference:'clearIcon',
                cls:'x-clear-icon'}];

        items.push({
            reference:'mask',
            classList:[this.config.maskCls]
          });
       return items;
}

----------------------------------------------------------------

如果扩展该text field,一种方法是1）继承Ext.field.input类， 重写以上方法，指定需要加item的。

然后2）继承Ext.field.Text,指定component为1）创建的类。

 

还有一种方法是通过appendChild/replaceWith/insertAfter/insertBefore等方式将需要的element添加在需要的位置。

我想为text field添加一个'+'button,该button用来响应某个事件。

---------------------------------------------------------------------------------------------

Ext.define('MyAddField', {
    extend: 'Ext.field.Text',

    config: {

        clearIcon: false,

        addButton: true  //add button配置属性
    },

    。。。

    //实例化该类时会自动执行该方法

   //通过Ext.Element.create方法创建了Ext.Element对象，然后就爱那个该对象append到当前（input field）element上

    updateAddButton: function(newButton, oldButton) {
          var me = this,
              innerElement = me.innerElement;

          if (newButton != oldButton) {

                 if (newButton) {

                       this.addButton = Ext.Element.create({
                             cls : cls + '-button ' + cls + '-button-up',
                             html: '+'
                       });

                       this.addButton.on('tap',this.onAddButton)

                       innerElement.appendChild(me.addButton);
                }
          }
    }

    。。。

})

---------------------------------------------------------------------------------------------

Sencha Touch2.1的replaceWith方法有bug，需要将其修正，重写如下：

--------------------------------------------------------------------------------------------

Ext.dom.Element.addMembers({
    replaceWith: function(el) {
        var me = this;

        if (el.nodeType || el.dom || typeof el == 'string') {
            //el = Ext.get(el);
            //me.dom.parentNode.insertBefore(el, me.dom);

            //将el改成el.dom

            me.dom.parentNode.insertBefore(el.dom, me.dom);
        } else {
            el = Ext.core.DomHelper.insertBefore(me.dom, el);
        }

        delete Ext.cache[me.id];
        Ext.removeNode(me.dom);
        me.id = Ext.id(me.dom = el);
        return me;
    }
});

--------------------------------------------------------------------------------------------