Referencing from within a component definition

[daiei27]

I have a grid definition that includes the store configuration. When I add a paging toolbar, I need to reference the grid's store. How do I do that from the bbar code?


Ext.define('APP.session.User' ,{
extend: 'APP.Grid',
alias: 'widget.sessionuser',

bbar: Ext.create ('Ext.toolbar.Paging', {
store: this.store, // THIS DOES NOT WORK!
pageSize: 5,
}),

initComponent: function() {
this.store = {
data: [
{ name: 'Anne', age: 39 },
{ name: 'Baker', age: 38 },
{ name: 'Chris', age: 37 },
{ name: 'Dave', age: 36 },
{ name: 'Ewan', age: 35 },
{ name: 'Fred', age: 34 },
{ name: 'Garth', age: 33 }
],
fields: ['name', 'age'],
};

this.columns = [
{
text: 'Name',
dataIndex: 'name'
},{
text: 'Age',
dataIndex: 'age'
},
];

this.callParent(arguments);
},
});


Is my only option to create the store separately before the grid? I really wanted to keep the grid self-contained so if anyone knows how to dynamically reference the grid in this situation, I'd love to hear it!

Thanks in advance!

[skirtle]

The bbar property in your example will be added to the prototype of the class. That particular instance of the toolbar will be shared between all instances of your class. This will cause many problems if you ever try to create more than one instance of the class. So even if you weren't having the store problem it still wouldn't work to specify the toolbar in that way.

As to the store problem, you should consider what the value of this will be. Inside initComponent it will refer to the new instance of your class but at the point you are currently specifying the bbar it will (probably) refer to the global window object.

The way to solve both problems is to move the bbar creation inside initComponent. Something a bit like this:


Ext.define('APP.session.User' ,{
extend: 'APP.Grid',
alias: 'widget.sessionuser',

initComponent: function() {
this.store = Ext.create('Ext.data.Store', {
data: [
{ name: 'Anne', age: 39 },
{ name: 'Baker', age: 38 },
{ name: 'Chris', age: 37 },
{ name: 'Dave', age: 36 },
{ name: 'Ewan', age: 35 },
{ name: 'Fred', age: 34 },
{ name: 'Garth', age: 33 }
],
fields: ['name', 'age'],
});

this.bbar = Ext.create('Ext.toolbar.Paging', {
store: this.store,
pageSize: 5
});

this.columns = [
{
text: 'Name',
dataIndex: 'name'
}, {
text: 'Age',
dataIndex: 'age'
},
];

this.callParent();
},
});

[daiei27]

Thank you! That makes perfect sense!

I moved the code to a method in a mixin, call that instead, and referencing this.store is working as expected. Although now the grid is not updating to match the paging toolbar, but that's a separate issue...