Extension help

[talha06]

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

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

.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)

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

[talha06]

any recommendations? it's urgent, please I need your helps.. it'll be enough to reference a tutorial too.. I must learn how to create extensions..
Thanx..

[Animal]

Why don't you use a TriggerField?

[talha06]

thank you so much for your reply.. really this is exactly what I need.

But there's not action despite I implemented onTriggerClick event.. please, can you correct my code, where is my absence or mistake?

Here's the code for TriggerField:

                          xtype : 'trigger',
                          id : 'myTrigger',
                          fieldLabel : '<b>Text</b>',
                          anchor : '95%',
                          width : 100,
                          autoHeight : true,
                          frame : true,
                          listeners : {
                              'onTriggerClick' : function() {
                                  Ext.Msg.alert('Sonuc', 'Trigger t?kland?!');
                              }

[talha06]

Why don't you use a TriggerField?

Thank you so much for your reply.. well despite that I implemented 'onTriggerClick' event, I'm not able to see any action. By the way as I wrote in my first message I need to render an image instead of combo-icon(arrow).

Here's my code for TriggerField item, I'll be happy if you can say my mistakes and how to render image on combo-icon..

Thanks in advance,
T

xtype : 'trigger',
                          id : 'myTrigger',
                          fieldLabel : '<b>Text</b>',
                          anchor : '95%',
                          width : 100,
                          autoHeight : true,
                          frame : true,
                          listeners : {
                              'onTriggerClick' : function() {
                                  Ext.Msg.alert('Sonuc', 'Trigger t?kland?!');
                              }
                           }