PDA

View Full Version : Get reference to grid panel from store



hieu79vn
28 Jun 2012, 1:09 AM
Hi

I have a grid panel and a store
Ext.define('ThreadListsStore', {
extend: 'Ext.data.Store',.........

Ext.define('ThreadListGrid', {
extend: 'Ext.grid.Panel',
store: 'ThreadListsStore',

I would like to fire an event load of the store to the grid panel. How can I do?
Thank you

netemp
28 Jun 2012, 1:43 AM
If I understand your question properly, then you want to access your grid panel in the load event of your store.

If this is correct, then you can do this by assigning an id to your grid and calling



var gridObj = Ext.getCmp('gridId');


Then you can access the complete grid by using gridObj.

Other way can be that if your grid and store are defined in the same scope then you can access the grid by using its variable directly in the following way:



var gridObj = //Code for defining grid

var storeObj = //Code for defining the store


In such a case, you can gridObj in the load event of store directly provided gridObj is in the scope.

Hope this helps.

friend
28 Jun 2012, 4:58 AM
A word of warning: The use of hard-coded IDs is strongly discouraged and can lead to brittle code...

Instead, consider using the new Ext.ComponetQuery.query(selector, [optionalRootContainer]) (http://docs.sencha.com/ext-js/4-0/#%21/api/Ext.ComponentQuery-method-query);

hieu79vn
28 Jun 2012, 6:59 AM
Thanks netemp and friends for your answer
Yes, I really want to do as "friend" said.
But what should I put in selector in Ext.ComponetQuery.query(selector, [optionalRootContainer]) (http://docs.sencha.com/ext-js/4-0/#%21/api/Ext.ComponentQuery-method-query); ???

hieu79vn
28 Jun 2012, 8:12 AM
I tried the 2nd solution of netemp.
{


store: Ext.create('Ext.data.Store', data: thread_list,
model: 'ThreadList',
proxy: {
type: 'memory',
reader: {
type: 'json'
}
},
listeners: {
load: this.onLoad,
scope: this
}
}),


etand in the grid {
onLoad:
function()
//alert('laod');
this.getSelectionModel().select(0);
},

But it raise error
Uncaught TypeError: Cannot call method 'getAt' of undefined
I think maybe the grid hasn't been loaded after the store loads?
Do you have any idea?

friend
28 Jun 2012, 8:55 AM
From your store config, it looks like you're creating it inline, in your grid's config. This can definitely be a life-cycle/timing issue.

You may need to manually load the data after the grid is rendered:



{
xtype: grid',
itemId: 'someGrid',
columns: [{<...columns here...}],
gridLines: true,
listeners: {
afterrender: function(component, eOpts) {
component.getStore().loadData([{<...data here...>}]);
}
},
store: {
model: 'ThreadList',
data: [],
listeners: {
load: function(store, recordArray, successful, eOpts) {
console.log('Store was loaded!');
// you should probably narrow the scope of this query by including
// the parent container in the query String.
var parentGrid = Ext.ComponentQuery.query('#someGrid')[0];
// do something with/to parent grid here...
}
}
}
}

hieu79vn
29 Jun 2012, 8:07 AM
thank you for your solution

el_chief
29 Jun 2012, 9:44 AM
This is not a good idea.

1. a store can belong to multiple grids.

2. the Model in MVC (which includes stores) should NEVER have any reference to a view or controller.

hieu79vn
1 Jul 2012, 11:13 PM
Thank you. Really MVC is very good but it's not compatible with our platform