1. #1
    Ext User
    Join Date
    Aug 2010
    Posts
    13
    Vote Rating
    0
    twh is on a distinguished road

      0  

    Default Unable to add listeners to buttons and components

    Unable to add listeners to buttons and components


    I tried using the addListener() and on() methods to add listeners to a couple of Ext components, but for some reason only the DataView seems to acknowledge them:

    Code:
    Ext.setup({
        icon: 'icon.png',
        tabletStartupScreen: 'tablet.png',
        phoneStartupScreen: 'phone.png',
        glossOnIcon: false,
        onReady: function() {
    
    		var test = new Ext.Component({
    			html		: 'test',
    		});
    		
    		test.on('click',function(){alert('you clicked');});
    		test.addListener('click',function(){alert('you clicked');});
    
    		var test2 = new Ext.Button({
    			html		: 'test 2',
    		});
    		
    		test2.on('itemtap',function(){alert('you clicked');});
    		test2.addListener('itemtap',function(){alert('you clicked');});
    
    		var test3 = new Ext.DataView({
    			html		: 'test 3',
    		});
    		
    		test3.on('itemtap',function(){alert('you clicked');});
    		test3.addListener('itemtap',function(){alert('you clicked');});
    
    
    		var head = new Ext.Panel({
    			items	: [test, test2, test3],
    		});
    		
    		var p = new Ext.Panel({
    			scroll: 'vertical',
    			layout: 'card',
    			fullscreen: true,
    			items: head,
    		}).show();
    
    	}
    });
    As you can see, I created a panel with a component, button, and dataview, and added both the on() and addListener() methods to the test objects. The documentation for a Component included the addListener method, yet when I click on them, only the DataView responds. Is there something I'm configuring incorrectly?

  2. #2
    Sencha - Ext JS Dev Team evant's Avatar
    Join Date
    Apr 2007
    Location
    Sydney, Australia
    Posts
    16,833
    Vote Rating
    609
    evant has a reputation beyond repute evant has a reputation beyond repute evant has a reputation beyond repute evant has a reputation beyond repute evant has a reputation beyond repute evant has a reputation beyond repute evant has a reputation beyond repute evant has a reputation beyond repute evant has a reputation beyond repute evant has a reputation beyond repute evant has a reputation beyond repute

      0  

    Default


    on is just a shortcut for addListener, the functions are equivalent.

    1) Component exposes no click event. You want to bind the event on the underlying element:
    Code:
    comp.el.on('click', ....);
    2) Button exposes no itemtap event (why would it, a button has no "items"). There is a tap event for button, that isn't documented and I'll fix that up now. Alternatively, you could use the "handler" configuration as well.
    Evan Trimboli
    Sencha Developer
    Twitter - @evantrimboli
    Don't be afraid of the source code!

  3. #3
    Ext User
    Join Date
    May 2010
    Posts
    8
    Vote Rating
    0
    ibrahimokuyucu is on a distinguished road

      0  

    Default


    I'd like to do something similar but want to specify listeners through a config object, it's not working.
    Here's what I did:
    Code:
    {
            xtype:"nestedlist",
            toolbar:this.toolbar,
    	fullscreen: true,
    	listeners:{
    		listchange: function(nl, item) {
    						console.log(item);
    						}
    			},
    	items: [ /* some items .. */]        
    }			}

  4. #4
    Ext User
    Join Date
    May 2010
    Posts
    8
    Vote Rating
    0
    ibrahimokuyucu is on a distinguished road

      0  

    Default


    oh btw. I'm trying to use a nested list for 1 level of navigation and then display a form panel at the leaf level. The problem is, it still behaves very much like a list item at the leaf level as expected (i.e When I click on the form field it selects the whole form and throws a js error). I was planning to override the itemTap event at that level but would be happy to hear if there's an easier way of doing it.
    thanks.

  5. #5
    Sencha - Ext JS Dev Team evant's Avatar
    Join Date
    Apr 2007
    Location
    Sydney, Australia
    Posts
    16,833
    Vote Rating
    609
    evant has a reputation beyond repute evant has a reputation beyond repute evant has a reputation beyond repute evant has a reputation beyond repute evant has a reputation beyond repute evant has a reputation beyond repute evant has a reputation beyond repute evant has a reputation beyond repute evant has a reputation beyond repute evant has a reputation beyond repute evant has a reputation beyond repute

      0  

    Default


    It definitely works:

    Code:
    Ext.setup({
        tabletStartupScreen: 'tablet_startup.png',
        phoneStartupScreen: 'phone_startup.png',
        icon: 'icon.png',
        glossOnIcon: false,
        onReady: function() {
            var nestedList = new Ext.NestedList({
                fullscreen: true,
                listeners: {
                    listchange: function(){
                        console.log('hi');
                    }
                },
                items: [{
                    text: 'Option A',
                    items: [{
                        text: 'Option A.1',
                        customAttribute: 123,
                        items: [{
                            text: 'Option A.1.a'
                        },{
                            text: 'Option A.1.b'
                        }]
                    },{
                        text: 'Option A.2',
                        customAttribute: 389
                    }]
                },{
                    text: 'Option B',
                    items: [{
                        text: 'Option B.1',
                        customAttribute: 233
                    },{
                        text: 'Option B.2',
                        customAttribute: 2390
                    }]
                },{
                    text: 'Option C',
                    items: [{
                        text: 'Option C.1',
                        customAttribute: 903
                    },{
                        text: 'Option C.2',
                        customAttribute: 77
                    }]
                }]        
            });        
        }
    });
    Tested with 0.93.
    Evan Trimboli
    Sencha Developer
    Twitter - @evantrimboli
    Don't be afraid of the source code!

  6. #6
    Ext User
    Join Date
    May 2010
    Posts
    8
    Vote Rating
    0
    ibrahimokuyucu is on a distinguished road

      0  

    Default


    indeed it does. Sorry about that
    So, for my second question, do you think I should override itemTap (is this the name of the event? I couldn't find it in documentation).

  7. #7
    Sencha - Ext JS Dev Team evant's Avatar
    Join Date
    Apr 2007
    Location
    Sydney, Australia
    Posts
    16,833
    Vote Rating
    609
    evant has a reputation beyond repute evant has a reputation beyond repute evant has a reputation beyond repute evant has a reputation beyond repute evant has a reputation beyond repute evant has a reputation beyond repute evant has a reputation beyond repute evant has a reputation beyond repute evant has a reputation beyond repute evant has a reputation beyond repute evant has a reputation beyond repute

      0  

    Default


    Why not just use a list in a card layout?
    Evan Trimboli
    Sencha Developer
    Twitter - @evantrimboli
    Don't be afraid of the source code!

  8. #8
    Ext User
    Join Date
    Aug 2010
    Posts
    13
    Vote Rating
    0
    twh is on a distinguished road

      0  

    Default


    I'm trying to follow your example to add a listener to a component, but I get an error if I use the "component_object.el.on('click',...)" code you gave. I'm trying to add an on() listener to the component, but get no results:

    Code:
    Ext.setup({
        onReady: function() {
    
    		var link = new Ext.Component({
    			html		: 'click here',
    			listeners	: {
    				itemtap	: function(){
    					alert('itemtap');
    				}
    			}
    		});
    		link.on('click',function(){alert('on')});
    //		link.el.on('click',function(){alert('on')}); //this generates an error
    //		link.el.addListener('click',function(){alert('addListener')}); //this generates an error
    
    		var p = new Ext.Panel({
    			scroll: 'vertical',
    			layout: 'card',
    			fullscreen: true,
    			items: link,
    		}).show();
    
    	}
    });

  9. #9
    Sencha - Ext JS Dev Team evant's Avatar
    Join Date
    Apr 2007
    Location
    Sydney, Australia
    Posts
    16,833
    Vote Rating
    609
    evant has a reputation beyond repute evant has a reputation beyond repute evant has a reputation beyond repute evant has a reputation beyond repute evant has a reputation beyond repute evant has a reputation beyond repute evant has a reputation beyond repute evant has a reputation beyond repute evant has a reputation beyond repute evant has a reputation beyond repute evant has a reputation beyond repute

      0  

    Default


    You're trying to access the element before it's rendered.

    Put it after the panel declaration.

    As I said above on = addListener, there is no difference between the methods.
    Evan Trimboli
    Sencha Developer
    Twitter - @evantrimboli
    Don't be afraid of the source code!

Similar Threads

  1. Replies: 1
    Last Post: 13 Aug 2010, 3:19 AM
  2. Event listeners on Non-Ext Components
    By rainerh in forum Ext 3.x: Help & Discussion
    Replies: 3
    Last Post: 13 Jul 2010, 5:39 AM
  3. Unable to set any TextArea event listeners through defaults parameter
    By ImShogun in forum Ext 3.x: Help & Discussion
    Replies: 2
    Last Post: 28 Jan 2010, 5:57 AM

Thread Participants: 2

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