1. #1
    Ext User
    Join Date
    Mar 2008
    Posts
    90
    Vote Rating
    0
    J.B is on a distinguished road

      0  

    Default Listeners and Scope

    Listeners and Scope


    Hi All,

    I am trying to fire an event in my JS file to a listener rendered by lazy-initialization code, but the two don't want to talk to each other. Do I need to define a specific scope? They are both rendered on the same page..

    JS
    Code:
    	this.addEvents({'checkactive': true});
    
            .....
    
    	this.grid.on('rowclick',  function(grid, index, e) {		
    		if (sm.getCount() > 0) {
    			this.fireEvent('checkactive', 'enabled');						
    		} else { 
    			this.fireEvent('checkactive', 'disabled');						
    		}
    	}, this);
    In my JSON lazy initialization code:

    Code:
    	buttons: [{
    		"text": "Submit",
    		"type": "button",
    		"scope": this,
    		"handler": function(){ submit(); },
    		"listeners": {
    	  			 "checkactive": function(isenabled) {
    						alert(isenabled);				
    				},
    				scope:this
    		}
               .....
    I've checked in FireBug and the fireEvent is run, but the listener never gets executed.

    Any ideas?

    Thanks

  2. #2
    Sencha - Ext JS Dev Team Animal's Avatar
    Join Date
    Mar 2007
    Location
    Notts/Redwood City
    Posts
    30,502
    Vote Rating
    48
    Animal has a spectacular aura about Animal has a spectacular aura about

      1  

    Default


    this.grid.on('rowclick'....

    You bind that handler function to whatever "this" is at that time. That is then what the 'checkactive' event is fire on.

  3. #3
    Ext User
    Join Date
    Mar 2008
    Posts
    90
    Vote Rating
    0
    J.B is on a distinguished road

      0  

    Default


    Thanks Animal, what could it be binded to other than 'this'? I am not familiar with using different scoping definitions...

    Thanks again

  4. #4
    Sencha - Ext JS Dev Team Animal's Avatar
    Join Date
    Mar 2007
    Location
    Notts/Redwood City
    Posts
    30,502
    Vote Rating
    48
    Animal has a spectacular aura about Animal has a spectacular aura about

      0  

    Default


    If you don't need it, don't use it.

    But if you are writing "function soup" rather than a set of discrete Classes which manage their own internal state individually, then you are storing up trouble.

  5. #5
    Ext User
    Join Date
    Mar 2008
    Posts
    90
    Vote Rating
    0
    J.B is on a distinguished road

      0  

    Default


    Thanks. I'm assuming by removing the scope on an event it would work across the dom of the active page? That would solve the problem I am having.

    I have removed the scrope from the listener but how can I make the event global, currently this.fireEvent.... still does not execute the listener which is without scope.

    Thanks

    John

  6. #6
    Sencha - Ext JS Dev Team Animal's Avatar
    Join Date
    Mar 2007
    Location
    Notts/Redwood City
    Posts
    30,502
    Vote Rating
    48
    Animal has a spectacular aura about Animal has a spectacular aura about

      0  

    Default


    Code:
    this.grid.on('rowclick',  function(grid, index, e) {		
    		if (sm.getCount() > 0) {
    			this.fireEvent('checkactive', 'enabled');						
    		} else { 
    			this.fireEvent('checkactive', 'disabled');						
    		}
    	}, this)
    The things in red are the same. You have specified a rowclick handler to run, and passed this as the scope. So that is what the this in the handler will be.

  7. #7
    Ext User
    Join Date
    Mar 2008
    Posts
    90
    Vote Rating
    0
    J.B is on a distinguished road

      0  

    Default


    Sorry Animal, I understand the assignment of this to the scope when creating the event, but how does that relate to the listener which is in a different JS class. If I use this on the listener, it fails - if I remove the scope on the listener it still fails.

    Apologies, I have tried to locate some more information on the cross scoping of variables but can't find an answer to this one

  8. #8
    Sencha - Ext JS Dev Team Animal's Avatar
    Join Date
    Mar 2007
    Location
    Notts/Redwood City
    Posts
    30,502
    Vote Rating
    48
    Animal has a spectacular aura about Animal has a spectacular aura about

      1  

    Default


    What, the scope of any handler of the 'checkactive' event?

  9. #9
    Ext JS Premium Member
    Join Date
    Dec 2008
    Posts
    33
    Vote Rating
    0
    axpa is on a distinguished road

      0  

    Default More listening

    More listening


    Hi,
    I'm having troubles triggering events, I belive that I have either scope or the triggering wrong.
    I have been reading http://extjs.com/forum/showthread.php?p=259901.
    I would like the button to trigger its handler then inside the handler trigger an event that the Demo.App catches and later on maybe trigger an event that the Demo.MyCenterType could listen to.
    I have it working if i do an this.on() inside Demo.AppMenuButtons initComponent but thats no use to me just an indication that my scope must be wrong
    I would be grateful for any hints.

    Code:
    <script language="JavaScript">
    Ext.ns('Demo');
    
    Demo.AppMenuButtons = Ext.extend(Ext.Button,{
        strings_btn_label: 'Default label',    
        strings_tooltip: 'Default tip',
        onclick_event: 'mymenuclick',
        ctCls: 'appmenubtns',
        minWidth:200,
        iconCls:'appmenubtn',
        handlerfunc: function(btn,eventsent){        
            this.fireEvent(this.onclick_event,this);
            alert(btn.text);
        },
        initComponent: function(){
            this.text = this.strings_btn_label;
            if(this.strings_tooltip != ''){
                this.tooltip = this.strings_tooltip;
            }
            if(this.handlerfunc != ''){
                this.handler = this.handlerfunc;
                /*this.scope = this;*/
            }
            Demo.AppMenuButtons.superclass.initComponent.call(this);
            this.addEvents(this.onclick_event);
        }
    });
    Ext.reg('demoappmenubuttons',Demo.AppMenuButtons);
    
    Demo.AppMenuAdmin = Ext.extend(Ext.Panel,{
        layout:'table',
        layoutConfig: {
            columns: 1
        },
        defaults: {
            bodyStyle:'padding:20px',
            minWidth:175
        },
                            
        border:false,
        initComponent: function(){
    
        this.items = [{
                xtype: 'demoappmenubuttons'            
            }];
            
            Demo.AppMenuAdmin.superclass.initComponent.call(this);
            this.on('mymenuclick',function(){
                alert('pong');
            });
        }
    });
    Ext.reg('demoappmenuadmin',Demo.AppMenuAdmin);
    
    Demo.MyCenterType = Ext.extend(Ext.Panel,{
        html: 'test2',
        initComponent: function(){
            Demo.MyCenterType.superclass.initComponent.call(this);
        }
    });
    Ext.reg('mycentertype',Demo.MyCenterType);
    
    
    Demo.App = Ext.extend(Ext.Panel,{
        layout: 'border',
        
        onMyClick: function(){
            alert('Hepp!');
        },
        initComponent: function(){
            this.items = [
                {
                    region: 'west',
                    split: true,
                    collapsible: true,
                    width: 200,
                    title: 'Wild West',
                    xtype: 'demoappmenuadmin'
                },{
                                region: 'center',
                                id: 'mycenter',
                                title: 'Center or centre',
                                layout: 'fit',
                                xtype: 'mycentertype',
                            }
            ];
    
            
            Demo.App.superclass.initComponent.call(this);
            this.on('mymenuclick', this.onMyClick);
    
        }
    });
    
        Ext.reg('demoapp',Demo.App);
    
    
    
    
    
            Ext.onReady(function(){
                Ext.BLANK_IMAGE_URL = 'extLibs/extjs//resources/images/default/s.gif';
            
                Ext.QuickTips.init();
    
                new Ext.Viewport({
                            layout: 'fit',
                            items: [{xtype: 'demoapp'}]
                        });
    
    
                
                
            });
                    
        </script>

Thread Participants: 2