PDA

View Full Version : Object Scope help



klodoma1
15 Nov 2010, 6:04 AM
Hi all,

I am having a problem setting the scope for some function.
The scenario would be the following:

I want to create a object, called Unit which will contain a grid and a panel. For this I extend the Ext.util.Observable object. The grid has a toolbar which contains button.
How can I set the scope of this buttons to be the newly created object? I would like that on the click action I call a function which is defined in the Unit object. Is this possible?

Bellow is the code which works partially.
Take a look at the button edit:

handler: function(){
unit1.fn_edit()
}

I would like here to write a code like:

handler: function(){
this.fn_edit()
}
where this is pointing to the unit1.

Can this be done someway?

Thank you in advance,
Andrei.



Unit= Ext.extend(Ext.util.Observable, {

grid : null,
gridEditor : 'panel',
gridObject : Ext.grid.GridPanel,
gridConfigDefault : {},
gridConfig : {},

constructor : function(config){

Ext.apply(this, config);

if(null == this.grid) this.grid = this.getGrid();

// Call our superclass constructor to complete construction process.
Unit.superclass.constructor.call(this, config);
},

renderGrid : function(object){
this.grid.render(object);
},

getGrid : function(){
return new this.gridObject(this.gridConfig);
},

fn_add : function(){
alert('called fn_add');
},

fn_edit : function(){
alert('called fn_edit');
}
});

Ext.onReady(function(){
// sample static data for the store
var myData = [
['3m Co', 71.72, 0.02, 0.03, '9/1 12:00am'],
['Alcoa Inc', 29.01, 0.42, 1.47, '9/1 12:00am']];

// create the data store
var store = new Ext.data.ArrayStore({
fields: [{name: 'name'},{name: 'price'}]
});
// manually load local data
store.loadData(myData);

var columnModel = new Ext.grid.ColumnModel({
defaults: {
},
columns: [
{header: "name", dataIndex: "name"},
{header: "price", dataIndex: "price"}
]
});

// create the Grid
var unit1 = new Unit({
gridConfig : {
store : store,
cm : columnModel,
width : 300,
height : 200,
tbar: [
{ text: 'add',
listeners:{
click:{
scope:unit1,
fn:function(){
this.fn_add();
}
}
}
},
'-',
{
text: 'edit',
handler: function(){
unit1.fn_edit()
}
}
]
}
});

unit1.renderGrid('div_grid');

evant
15 Nov 2010, 7:11 AM
You can't set the scope at that point, because the RHS isn't evaluated yet. You should move the event handling inside the class.

klodoma1
15 Nov 2010, 7:25 AM
You should move the event handling inside the class.
What do you mean here more precisely?

laurentParis
15 Nov 2010, 9:16 AM
may be
try


{
text: 'edit',
scope: unit1,
handler: function(){
this.fn_edit()
}
}