1. #1
    Sencha User talha06's Avatar
    Join Date
    Jul 2009
    Location
    Turkey
    Posts
    305
    Vote Rating
    0
    talha06 is on a distinguished road

      0  

    Exclamation Extension help

    Extension help


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

  2. #2
    Sencha User talha06's Avatar
    Join Date
    Jul 2009
    Location
    Turkey
    Posts
    305
    Vote Rating
    0
    talha06 is on a distinguished road

      0  

    Default


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

  3. #3
    Sencha - Ext JS Dev Team Animal's Avatar
    Join Date
    Mar 2007
    Location
    Notts/Redwood City
    Posts
    30,546
    Vote Rating
    64
    Animal is a jewel in the rough Animal is a jewel in the rough Animal is a jewel in the rough

      0  

    Default


    Why don't you use a TriggerField?

  4. #4
    Sencha User talha06's Avatar
    Join Date
    Jul 2009
    Location
    Turkey
    Posts
    305
    Vote Rating
    0
    talha06 is on a distinguished road

      0  

    Default


    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:

    Code:
                              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ı!');
                                  }

  5. #5
    Sencha User talha06's Avatar
    Join Date
    Jul 2009
    Location
    Turkey
    Posts
    305
    Vote Rating
    0
    talha06 is on a distinguished road

      0  

    Default


    Quote Originally Posted by Animal View Post
    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

    Code:
    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ı!');
                                  }
                               }

Thread Participants: 1