PDA

View Full Version : How do I find a store?



mje
1 Aug 2013, 10:06 AM
I'm new to Architect to please bear with me. I have a grid view backed by a model and a store. In the grid view I've added a tool bar with a refresh button. I'd like a click on the button to re-read the data. In the button click event I've added code below. I thought methods were added to the MyApp class to get the store and I've tried all of the following to no avail:

var store = Ext.data.StoreManager.lookup('MyJsonStore'); // MyJsonStore is is the storeid
var store = MyApp.getmarketDataStore(); // marketDataStore is the store name
var store = MyApp.getStore('marketDataStore'); // as above
store.loadData(); // this always fails as store is not defined no matter which method used above

Thanks

aaugen
1 Aug 2013, 11:26 PM
Hi,

It's strange, Ext.dataStoreManager.lookup('MyJsonStore') should work.
Can you post your code with more details and error message associated?

Alex.

mje
2 Aug 2013, 1:10 AM
Thanks for your reply. Here is the error:




Uncaught TypeError: Cannot call method 'loadData' of undefined MyGridPanel.js?_dc=1375430853941:213
Ext.define.onButtonClick MyGridPanel.js?_dc=1375430853941:213
fire ext-all.js:21
continueFireEvent ext-all.js:21
fireEventArgs ext-all.js:21
a.fireEventArgs ext-all.js:21
fireEvent ext-all.js:21
Ext.cmd.derive.fireHandler ext-all.js:21
Ext.cmd.derive.onClick ext-all.js:21
(anonymous function)
m ext-all.js:21



and here is the code (some fields removed to keep the length down):




Ext.define('MyApp.store.marketDataStore', {
extend: 'Ext.data.Store',


requires: [
'MyApp.model.marketData'
],


constructor: function(cfg) {
var me = this;
cfg = cfg || {};
me.callParent([Ext.apply({
autoLoad: true,
model: 'MyApp.model.marketData',
storeId: 'MyJsonStore',
proxy: {
type: 'ajax',
url: 'market.json',
reader: {
type: 'array'
}
}
}, cfg)]);
}
});


Ext.define('MyApp.model.marketData', {
extend: 'Ext.data.Model',


fields: [
{
name: 'market_id',
type: 'int'
},
// more fields here
]
});


Ext.define('MyApp.view.MyGridPanel', {
extend: 'Ext.grid.Panel',


dayOfYear: 0,
resizable: true,
closable: true,
collapsible: true,
title: 'markets',
columnLines: true,
store: 'marketDataStore',


initComponent: function() {
var me = this;


Ext.applyIf(me, {
viewConfig: {
enableTextSelection: true
},
columns: [
{
xtype: 'gridcolumn',
dataIndex: 'market_id',
text: 'Market_id'
},
// more grid columns here
],
dockedItems: [
{
xtype: 'toolbar',
dock: 'top',
items: [
{
xtype: 'button',
text: 'refresh',
listeners: {
click: {
fn: me.onButtonClick,
scope: me
}
}
}
]
}
]
});


me.processMyGridPanel(me);
me.callParent(arguments);
},


processMyGridPanel: function(config) {
config.title = "markets retrieved at " + Ext.Date.format(new Date(), 'G:i:s');


var today = new Date();
config.dayOfYear = Ext.Date.getDayOfYear(today);
},


onButtonClick: function(button, e, eOpts) {
var store = Ext.data.StoreManager.lookup('MyJsonStore');
store.loadData(); // <--------------- this is the line that fails
}


});

aaugen
2 Aug 2013, 1:46 AM
Considering error message, your problem isn't on your store retrieval but rather on your gridpanel instantiation.

Are you sure to make your project like an MVC application: http://docs.sencha.com/extjs/4.2.1/#!/guide/application_architecture

You can also read the first guide line: http://docs.sencha.com/extjs/4.2.1/#!/guide/getting_started

I hope this can help you.

Alex.

mje
2 Aug 2013, 1:57 AM
I don't see how you've come to the conclusion that the problem is not with retrieving my store. The line which fails is the button handler where it calls loadData() from the store retrieved from Ext.data.StoreManager.lookup. I don't see anything wrong with the grid panel - it displays data fine - I just want it to refresh the store.

As far as I can as new user of ext js and Architect I believe I am following MVC. All the code I pasted was created by Architect except for the button handlers and processMyGridPanel.

mje
2 Aug 2013, 4:43 AM
I changed the name of my storeid to 'marketData' and then changed the code in the button handler to:


var store = Ext.data.StoreManager.lookup('marketData');
store.loadData();


This then produced:


Uncaught TypeError: Cannot read property 'length' of undefined ext-all.js:21
Ext.cmd.derive.loadData ext-all.js:21
Ext.define.onButtonClick MyGridPanel.js?_dc=1375447332325:216
fire ext-all.js:21
continueFireEvent ext-all.js:21
fireEventArgs ext-all.js:21
a.fireEventArgs ext-all.js:21
fireEvent ext-all.js:21
Ext.cmd.derive.fireHandler ext-all.js:21
Ext.cmd.derive.onClick ext-all.js:21
(anonymous function)
m ext-all.js:21


and I've no idea what that means. If I change the code to call load instead of loadData it works fine and the data is reloaded.

aaugen
2 Aug 2013, 5:07 AM
Sorry for my first answer but i didn't understand your problem aswell.
Great if you are find the solution.
I don't know why change the store id solve your problem to retrieve store reference but the error generate by loadData is produce by empty parameter that you will passe.
In Ext JS Docs, loadData may you to loads an array of data passed in parameter straight into the Store.
If you want to refresh data, you can use load or reload methods.

Hoping this helps you.

Alex.