Hello to everyone,

I need a textfield that contains a image button(will have 'handler').

I looked some tutorials including official tutorial. I need your helps, I'm really new to extensions.

Here's my code:

Ext.ux.ButtonText.js
Code:
Ext.namespace('Ext.ux');

Ext.ux.ButtonText = function(config) {
    // call parent constructor
    Ext.ux.ButtonText.superclass.constructor.call(this, config);
    Ext.apply(this, config);

    this.tpl = config.tpl ||
          '<tpl for="."><div class="x-button-text-item x-button-text-item {'
        + this.iconClsField
        + '}">{'
        + this.displayField
        + '}</div></tpl>'
    ;

    this.on({
        render:{scope:this, fn:function() {
            //var wrap = this.el.up('div.x-form-field-wrap');
            //this.wrap.applyStyles({position:'relative'});
            this.el.addClass('x-button-text-input');
            this.flag = Ext.DomHelper.append(wrap, {
                tag: 'div', style:'position:absolute'
            });
        }}
    });
};  // eo constructor

Ext.extend(Ext.ux.ButtonText, Ext.form.TextField, {
    setIconCls: function() {
        var rec = this.store.query(this.valueField, this.getValue()).itemAt(0);
        if(rec) {
            this.flag.className = 'x-button-text-icon ' + rec.get(this.iconClsField);
        }
    },
    setValue: function(value) {
        Ext.ux.ButtonText.superclass.setValue.call(this, value);
        this.setIconCls();
    }
});
Ext.reg( 'buttontext', Ext.ux.ButtonText );
Ext.ux.ButtonText.css
Code:
.add-icon {
    background-image: url(./lib/ext/ux/ButtonText/img/add.png) !important;
}
.x-button-text-icon {
    background-repeat: no-repeat;
    background-position: 0 50%;
    width: 18px;
    height: 14px;
}
.x-button-text-input {
    padding-left: 25px;
}
.x-form-field-wrap .x-button-text-icon {
    top: 3px;
    left: 5px;
}
.x-button-text-item {
    background-repeat: no-repeat !important;
    background-position: 3px 50% !important;
    padding-left: 24px;
}
my Page(User Interface)
Code:
Ext.onReady(function() {
               Ext.QuickTips.init();

               var form = new Ext.form.FormPanel({
                  id : 'MyForm',
                  renderTo : document.body,
                  frame : true,
                  border : true,
                  autoHeight : true,
                  width : 400,
                  items : [{
                          xtype : 'buttontext',
                          id : 'myButtonText',
                          fieldLabel : 'Text',
                          iconCls : 'add-icon'
                  }]
               });
            });