1. #1
    Sencha User kiranadn.net's Avatar
    Join Date
    Jun 2011
    Location
    Calicut,India
    Posts
    48
    Vote Rating
    -1
    kiranadn.net is an unknown quantity at this point

      0  

    Default Imagebutton in ExtJS4

    Imagebutton in ExtJS4


    Hi all,

    I am trying to migrate our application to ExtJS4.I am facing problem with ImageButton. My ExtJS4 code for Image button is:

    Code:
    Ext.namespace('Ext.ux');
    Ext.ux.ImageButton = function(cfg) {
            Ext.ux.ImageButton.superclass.constructor.call(this, cfg);
    };
    Ext.define('Ext.ux.ImageButton',{
        extend    :    'Ext.button.Button',
        alias    :    'widget.ImageButton',
            onRender : function(ct, position) {
                this.disabledImgPath = this.disabledImgPath || this.imgPath;
                var tplHTML = '<div><img src="{imgPath}" border="0" width="{imgWidth}" height="{imgHeight}" alt="{tooltip}" style="cursor: {cursor};"/> {imgText:htmlEncode}<br/><br/></div>';
                var tpl = new Ext.Template(tplHTML);
                var btn, targs = {
                        imgPath : this.disabled ? this.disabledImgPath : this.imgPath,
                        imgWidth : this.imgWidth || "",
                        imgHeight : this.imgHeight || "",
                        imgText : this.text || "",
                        cursor : this.disabled ? "default" : "pointer",
                        tooltip : this.tooltip || ""
                };
                btn = tpl.append(ct, targs, true);
                btn.on("click", this.onClick, this);
                if (this.cls) {
                        btn.addCls(this.cls);
                }
                this.el = btn;
                if (this.hidden) {
                        this.hide();
                }
        },
        disable : function(newImgPath) {
                var replaceImgPath = newImgPath || this.disabledImgPath;
                if (replaceImgPath)
                        this.el.dom.firstChild.src = replaceImgPath;
                this.disabled = true;
        },
        enable : function(newImgPath) {
                var replaceImgPath = newImgPath || this.imgPath;
                if (replaceImgPath)
                        this.el.dom.firstChild.src = replaceImgPath;
                this.disabled = false;
        }
    });

    But i am not getting the imagebutton in our application.I am doing wrong some where.If you know the solution.Please let me know.



    Thanks in Advance,
    Kiran

  2. #2
    Touch Premium Member
    Join Date
    Jun 2011
    Posts
    1,085
    Vote Rating
    95
    Farish is a glorious beacon of light Farish is a glorious beacon of light Farish is a glorious beacon of light Farish is a glorious beacon of light Farish is a glorious beacon of light

      0  

    Default


    Hi Kiran,

    What do you mean by imagebutton? Do you mean a button with an icon displayed in it?

    Regards,
    Farish

  3. #3
    Sencha User kiranadn.net's Avatar
    Join Date
    Jun 2011
    Location
    Calicut,India
    Posts
    48
    Vote Rating
    -1
    kiranadn.net is an unknown quantity at this point

      0  

    Default


    Hi Farish,


    Imagebutton is nothing but we will design the image in photoshop and we can use that image as button in our application.


    Regards,
    Kiran

  4. #4
    Touch Premium Member
    Join Date
    Jun 2011
    Posts
    1,085
    Vote Rating
    95
    Farish is a glorious beacon of light Farish is a glorious beacon of light Farish is a glorious beacon of light Farish is a glorious beacon of light Farish is a glorious beacon of light

      0  

    Default


    I am not sure if this is exactly what you are looking for but this is what i understood.

    Create a new button and assign it an icon class:

    Code:
    var button_1 = Ext.create('Ext.Button', {id: 'button_1', text: 'Call', scale: 'small', iconCls: 'phone', iconAlign: 'left', width: 100});
    in your css file:

    Code:
    .phone{background-image: url(images/phone.jpg) !important;}
    Where phone.jpg would be your image file which will be displayed in the button. You can remove the text from the button if you only want an image and use iconAlign to align the image in the button.

    Regards,
    Farish

  5. #5
    Sencha User charris's Avatar
    Join Date
    Sep 2010
    Location
    Brooklyn, NY
    Posts
    106
    Vote Rating
    13
    charris will become famous soon enough

      0  

    Default


    I'm using an instance of Ext.Image (which I found to be a simpler solution than trying to configure an instance of Ext.Button).
    Code:
    {
        xtype: 'image',
        src: '/path/to/img.png',
        height: 50, // Specifying height/width ensures correct layout
        width: 50,
        listeners: {
            render: function(c) {
                c.getEl().on('click', function(e) {
                    alert('User clicked image');
                }, c);
            }
        }
    }
    Note that Ext.Img doesn't fire a 'click' event (look at the Events section for this class in the API docs--'click' isn't listed there). What you do instead is listen for 'render' and manually add a click handler to the component at that time.

    Based on older forum threads, this seems to be a common solution.

  6. #6
    Sencha User kiranadn.net's Avatar
    Join Date
    Jun 2011
    Location
    Calicut,India
    Posts
    48
    Vote Rating
    -1
    kiranadn.net is an unknown quantity at this point

      0  

    Default


    Thanks for your reply.Its working fine.

  7. #7
    Ext GWT Premium Member
    Join Date
    Oct 2009
    Posts
    131
    Vote Rating
    5
    zlevardy is on a distinguished road

      0  

    Default


    hi,

    is this possible to add other events? I am looking for a solution to change image on hover. Any idea?

    thx

  8. #8
    Touch Premium Member
    Join Date
    Jun 2011
    Posts
    1,085
    Vote Rating
    95
    Farish is a glorious beacon of light Farish is a glorious beacon of light Farish is a glorious beacon of light Farish is a glorious beacon of light Farish is a glorious beacon of light

      0  

    Default


    you can use the mouseover event of the button. Check it out in the API docs:

    "mouseover( Ext.button.Button this, Event e, Object eOpts )

    Fires when the mouse hovers over the button"

  9. #9
    Ext GWT Premium Member
    Join Date
    Oct 2009
    Posts
    131
    Vote Rating
    5
    zlevardy is on a distinguished road

      0  

    Default


    thx. All works perfect.