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,947
    Vote Rating
    636
    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,947
    Vote Rating
    636
    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,947
    Vote Rating
    636
    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,947
    Vote Rating
    636
    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