PDA

View Full Version : Quick scope question



gopunk
8 Nov 2008, 1:41 PM
Is there any way to reference an object in it's constructor? For example, in the following code (from the Ext sample), I'd like to be able to close the Ext.Window without having to define the win variable. this just refers to Window when I use it (so hide() results in an error).



/*
* Ext JS Library 2.2
* Copyright(c) 2006-2008, Ext JS, LLC.
* [email protected]
*
* http://extjs.com/license
*/

Ext.onReady(function(){
var win;
var button = Ext.get('show-btn');

button.on('click', function(){
// create the window on the first click and reuse on subsequent clicks
if(!win){
win = new Ext.Window({
applyTo : 'hello-win',
layout : 'fit',
width : 500,
height : 300,
closeAction :'hide',
plain : true,
items : new Ext.TabPanel({
applyTo : 'hello-tabs',
autoTabs : true,
activeTab : 0,
deferredRender : false,
border : false
}),

buttons: [{
text : 'Submit',
disabled : true
},{
text : 'Close',
handler : function(){
win.hide();
}
}]
});
}
win.show(button);
});
});The reason I'm asking is that I have an application with a lot of different Ext.Windows and I'd like to be able to have some common listener behavior across them. Was hoping to just use the prototype method to do this.

mjlecomte
8 Nov 2008, 2:27 PM
Give your component an id. Then you can get a reference to it using Ext.getCmp('id');

Or create a factory:



function createWindow(config) {

var win = new Ext.Window(Ext.apply({
renderTo : Ext.getBody(),
layout : 'fit',
width : 500,
height : 300,
closeAction :'hide',
plain : true,
buttons: [{
text : 'Submit',
disabled : true
},{
text : 'Close',
handler : function(){
console.info('hide');
win.hide();
}
}]
}, config));

win.on({
beforehide: {
fn: function () {
console.info('before hide, about to hide win with id = ',win.id);
console.info(this);
},
scope: win
}
});

return win;
};

Ext.onReady(function(){
var button = Ext.get('show-btn');

button.on('click', function(){
createWindow().show();
});

});