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

[oscarblo]

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:

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

[friend]

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

imageBox = new Ext.BoxComponent({
  autoEl: {
    tag: 'img',
    src: 'image/vote_star.png'
  },
});

To respond to click events on the image:

imageBox.mon(imagebox.el, 'click', function() {
  // Make an Ajax request, etc.
})

[oscarblo]

Thanks friend for the answer.

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

		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:

		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

[friend]

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

[oscarblo]

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:

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

[emkramer]

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