PDA

View Full Version : Referencing an object from within a preconfigured class (scope?)



jaime_
25 Dec 2009, 11:45 AM
[EDIT: Ahhh, help! I posted by mistake in the 2.x forum. This was intended to be posted in the 3.x forums. I cannot move it by myself. Perhaps an admin can. Sorry]

A newbe question whose answer I cannot figure out despite of many hours of reading, and try-and-error:

I've extended Ext.app.Module as seen in the Desktop example, to display a grid. The grid has an store which loads the data remotely. So far so good.


G.window.bills = Ext.extend(Ext.app.Module, {
id: 'bills-win',
init : function() {
this.launcher = {
text: 'Facturación',
iconCls: 'icon-grid',
handler : this.createWindow,
scope: this
}
},
grid: {
xtype: 'grid',
store: { /* My store. Omited for clarity */ },
columns: [ /* Omited for clarity */],
bbar: [
{
xtype: 'paging',
store: this.grid.store /* This is the problem. How to point to the store? */
},
new Ext.ux.form.SearchField({
store: this.grid.store, /* Idem */
})
],
},

createWindow : function() {
var desktop = this.app.getDesktop();
var win = desktop.getWindow('bills-win');
if (!win) {
win = desktop.createWindow({ /* Omited for clarity */});
}
win.show();
}
});
The grid is being showing up correctly, but pagination is not working because bbar cannot find the store. I've tried setting scope: this but that doesn't help.

So the question is: in a preconfigured class, how can I point to an object (store) from within another (bbar)?

I'd say that from within the bbar block this points to G.window.bills (the class I'm extending), and therefore this.grid points to the grid inside. Following this logic (that has turned to be wrong), I thought this.grid.store should point to the store, but it doesn't.

I'd appreciate any help or a pointer to an article or thread where I can learn more about this.

EDIT: Of course I can define the store in a variable (var myStore = new Ext.data.JsonStore(...)) and refer to it from within the bbar block (actually I got it working using this approach), but I'd like to take advantage of Ext's lazy instantiation and therefore I prefer to define de store as an xtype, as shown above.

mjlecomte
26 Dec 2009, 5:23 AM
Check out the "ref" config property. Also look at store manager and component manager.

Does beg the question why the paging toolbar can't just default to using the parent container's store by default though. I don't know how often anyone would use some other store.

jaime_
26 Dec 2009, 8:38 AM
I read about ref and scope and tried almost everything with them, but it didn't work.

I'd like to write something like:


G.window.bills = Ext.extend(Ext.app.Module, {
...
grid: {
xtype: 'grid',
store: { ... },
bbar: [
new Ext.ux.form.SearchField({
store: this.ownerCt.ownerCt.store,
}),
],
},
...
});
But it doesn't work (getting "this.ownerCt is undefined"). I think the problem is that I can't use this.ownerCt until the component has been instantiated, because it works when I set the reference to the store from within an afterRender event, but this is a dirty trick:


G.window.bills = Ext.extend(Ext.app.Module, {
grid: {
xtype: 'grid',
store: { /* ... */ },
columns: [ /* ... */],
bbar: [
new Ext.ux.form.SearchField({
store: this.ownerCt.ownerCt.store, /* This doesn't work */
afterRender: function() { /* This works, but it's ugly */
this.store = this.ownerCt.ownerCt.store;
},
}),
{
xtype: 'paging',
store: this.ownerCt.store /* Fails for the same reason */
},
],
},
});

flanders
26 Dec 2009, 11:39 AM
You could try to create your pre-configured classes like this:



gui.SomePanel = Ext.extend(Ext.Panel, {
constructor: function(config) {
var instanceStore = new SomeStore({});

gui.SomePanel.superclass.constructor.call(this, Ext.apply({
grid: {
xtype: 'grid',
bbar: [{
xtype: 'paging',
store: instanceStore,
...
}],
store: instanceStore
...
}
}, config));
}
}


reference: http://www.extjs.com/learn/Tutorial:Extending_Ext_for_Newbies

mjlecomte
26 Dec 2009, 2:57 PM
Read up again or more about using "this". Step through with firebug and see what "this" is when you step through that code. I'm guessing in your case "this" is the window object.