PDA

View Full Version : How to create a transparent Ext.Button with a only iconCls visible.



oscarblo
7 May 2011, 4:07 AM
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
10 May 2011, 5:23 AM
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
10 May 2011, 2:12 PM
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
11 May 2011, 3:59 AM
Take a second look at my code original code sample. Note that is uses mon(), not on().

oscarblo
13 May 2011, 1:01 PM
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
19 Jul 2011, 12:48 PM
Hi Oscar,
Thanks for posting your solution! I've been trying to figure that out all day, your solution worked for me!:)