Listeners and Scope

[J.B]

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

	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:

	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

[Animal]

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.

[J.B]

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

Thanks again

[Animal]

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.

[J.B]

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

[Animal]

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.

[J.B]

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

[Animal]

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

[axpa]

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.

<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>