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

Turkiyenin en sevilen filmlerinin yer aldigi xnxx internet sitemiz olan ve porn sex tarzi bir site olan mobil porno izle sitemiz gercekten dillere destan bir durumda herkesin sevdigi bir site olarak tarihe gececege benziyor. Sitenin en belirgin ozelliklerinden birisi de Turkiyede gercekten kaliteli ve muntazam, duzenli porno izle siteleri olmamasidir. Bu yuzden iste. Ayrica en net goruntu kalitesine sahip adresinde yayinlanmaktadir. Mesela diğer sitelerimizden bahsedecek olursak, en iyi hd porno video arşivine sahip bir siteyiz. "The Best anal porn videos and slut anus, big asses movies set..." hd porno faketaxi