1. #1
    Sencha User
    Join Date
    Nov 2010
    Location
    Lisbon
    Posts
    4
    Vote Rating
    0
    oscarblo is on a distinguished road

      0  

    Default How to create a transparent Ext.Button with a only iconCls visible.

    How to create a transparent Ext.Button with a only iconCls visible.


    Hello community!

    Im new in this forum and with EXTjs.

    I need have a image with a click handler function event (I need a php request).
    - My first approach, was create a button and using the iconCls to ad my image, that is working!, but the idea is only show the image, not the button behind. Is that possible?
    - My second approach will be explained with the following question, Its possible create a Ext.BoxComponent with the options:
    PHP Code:
    autoEl: {
            
    tag'img',
            
    src'image/vote_star.png'

    and later add handler function? I think that is not possible, at least I didn't find way to do this in the API docs, but how Im just beginning with EXTjs it will be nice if someone can confirm that.

    Are both approach wrong?

    I will be thankful if someone can help me.

    Regards,
    Oscar

  2. #2
    Sencha - Community Support Team friend's Avatar
    Join Date
    Apr 2011
    Posts
    895
    Vote Rating
    27
    friend has a spectacular aura about friend has a spectacular aura about

      0  

    Default


    Yes, an Ext.BoxComponent which uses autoEl is the way to go:

    Code:
    imageBox = new Ext.BoxComponent({
      autoEl: {
        tag: 'img',
        src: 'image/vote_star.png'
      },
    });
    To respond to click events on the image:

    Code:
    imageBox.mon(imagebox.el, 'click', function() {
      // Make an Ajax request, etc.
    })
    Last edited by friend; 10 May 2011 at 5:24 AM. Reason: wording.

  3. #3
    Sencha User
    Join Date
    Nov 2010
    Location
    Lisbon
    Posts
    4
    Vote Rating
    0
    oscarblo is on a distinguished road

      0  

    Default


    Thanks friend for the answer.

    I tried already with the following code but is not working:

    Code:
    		var imageBox = new Ext.BoxComponent({
    			  autoEl: {
    			    tag: 'img',
    			    src: 'image/vote.png'
    			  }
    		});
    		
    		imageBox.on(imageBox.el, 'click',  function() {
    			alert('Hello');
    			  // Make an Ajax request, etc.
    		})
    I can visualize the window where is that component and I m getting the error:

    Uncaught TypeError: Cannot call method 'toLowerCase' of undefined ext-all.js:7

    I looked some other examples and later I tried with the following:


    Code:
    		var imageBox = new Ext.BoxComponent({
    			  autoEl: {
    			    tag: 'img',
    			    src: 'image/vote.png'
    			  }
    		});
    		
    		imageBox.on('click',  function() {
    			alert('Hello');
    			  // Make an Ajax request, etc.
    		})
    And Im no getting error, I can visualize the window where is the element and the vote.png image, but the click event is not working with that.

    Im a little lost, I think Im trying to make a basic think, but there something that Im missing.

    any suggestion?

    thanks,
    oscar

  4. #4
    Sencha - Community Support Team friend's Avatar
    Join Date
    Apr 2011
    Posts
    895
    Vote Rating
    27
    friend has a spectacular aura about friend has a spectacular aura about

      0  

    Default


    Take a second look at my code original code sample. Note that is uses mon(), not on().

  5. #5
    Sencha User
    Join Date
    Nov 2010
    Location
    Lisbon
    Posts
    4
    Vote Rating
    0
    oscarblo is on a distinguished road

      0  

    Default


    Hey friend,

    thanks again for the answer. In fact I had tried already with mon() but it was not working as well. At the end I just found a different way to go:

    Code:
    var imageBoxVote = new Ext.BoxComponent({
    	id:'vote',
    	autoEl: {
    		tag: 'div',
                    src: 'image/vote.png'
    	},
    	listeners: {
    		render: function(c){
    			c.getEl().on({
    			    'click' : function() { 
    			        // Make an Ajax request, etc.
     			    },
    			    'mouseover' : function() { 
                                    // Make an Ajax request, etc.
    			    },
    			    'mouseout' : function() { 
                                    // Make an Ajax request, etc.
    			    },
    			    scope: c 
    			});
    		}
    	}
    });
    I don't know if its the best way, but it is working fine to me.

    thanks,
    Oscar

  6. #6
    Sencha User
    Join Date
    Jan 2011
    Posts
    25
    Vote Rating
    2
    emkramer is on a distinguished road

      0  

    Default


    Hi Oscar,
    Thanks for posting your solution! I've been trying to figure that out all day, your solution worked for me!

Similar Threads

  1. Replies: 0
    Last Post: 3 Sep 2010, 12:38 PM
  2. bbar button iconCls?
    By heidtmare in forum Ext 2.x: Help & Discussion
    Replies: 5
    Last Post: 10 Dec 2008, 7:34 AM

Thread Participants: 2

Tags for this Thread