PDA

View Full Version : store is null



marxan
3 Oct 2012, 5:22 AM
Hello,

I'm trying to generate a chart but I get the message: store is null. I'm using MVC.

Here's my code. I don't include the model as the problem is not coming from this file.

If anyone could help me, that will greatly appreciated.



Ext.define('TAB.view.GraphOptions', { extend: 'Ext.Window',
alias: 'widget.graphoptions',
layout: 'fit',
width: 300,
height: 150,
//closeAction: 'hide',
initComponent: function() {
this.items = [
{
xtype: 'form',
anchor: '99%',
items: [
{
xtype: 'radiogroup',
id : 'graphChoice',
// fieldLabel: 'Axe',
flex: 1,
columns: 2,
defaults: {xtype: "radio",name: "choice"},
items: [
{ boxLabel: 'Graph', inputValue: 'N', checked:true },
{ boxLabel: 'Graph2', inputValue: 'S'}
]
},
{
xtype: 'standardgraph'
}
],
buttons: [
{
id: 'generateChart',
text: 'Generate',
scope: this,
handler: this.submit
},
{
text: 'Close',
scope: this,
handler: this.close
}]
}
],

this.callParent(arguments);
}
});




Ext.define('TAB.view.StandardGraph', {
extend: 'Ext.chart.Chart',
alias: 'widget.standardgraph',
store: 'StandardGraphStore',
width: 300,
height: 150,
axes: [
{
title: 'Temperature',
type: 'Numeric',
position: 'left',
fields: ['LABEISO'],
minimum: 0,
maximum: 100
},
{
title: 'Time',
type: 'numeric',
position: 'bottom',
fields: ['2008']
}
],
series : [
{
type: 'line',
xField: 'LABEISO',
yField: '2008'
}]
});




Ext.define('TAB.store.StandardGraphStore', {
extend: 'Ext.data.Store',
requires: 'TAB.model.StandardGraphModel',
model: 'TAB.model.StandardGraphModel',
proxy: {
type: 'ajax',
url: 'app/data/GridsLoader.cfc?method=getMetrSeries&returnformat=json',
reader: {
type: 'json',
root: 'DATA'
}
}

});

skirtle
3 Oct 2012, 5:35 AM
I suspect you aren't creating an instance of your store.

This line looks up the store by id:


store: 'StandardGraphStore'

But for that to work the store must have been created.

Note that the MVC automatically creates stores that are listed in the stores property of a controller, giving them an id equal to the last part of the class name.

http://docs.sencha.com/ext-js/4-1/#!/api/Ext.app.Controller-cfg-stores

If instead you'd rather manually create the store you'd do something like this:


Ext.create('TAB.store.StandardGraphStore', {
storeId: 'StandardGraphStore'
});

See also:

http://docs.sencha.com/ext-js/4-1/#!/api/Ext.data.AbstractStore-cfg-storeId

All of this assumes that you're happy treating stores as singleton-like global objects. There's nothing wrong with that but it's far from the only way to manage your stores and in many cases it can cause problems when stores are shared between components.

marxan
3 Oct 2012, 6:52 AM
Hi, thanks for the answer.

But I think the store is recognized because if it was not the case I will get a message. "Store is undefined"

I don't understand what the message means by is null.

I've tried your solution by adding a storeId but still the same problem.

Don't know what I'm doing wrong... It's hard to get more information about this message.

skirtle
3 Oct 2012, 7:11 AM
But I think the store is recognized because if it was not the case I will get a message. "Store is undefined"

Are you sure about this? What test did you try to compare the error messages?


I've tried your solution by adding a storeId but still the same problem.

Reading between the lines, it sounds like you may have misunderstood what I was proposing. Just adding a storeId won't help, the key detail was that I was creating an instance of the store with that id. Adding the storeId to your Ext.define won't help.


Don't know what I'm doing wrong... It's hard to get more information about this message.

Well adding in breakpoints and stepping through in the debugger is ultimately the answer to fixing all bugs when you can't figure out what else to try.

But first...

Try typing this in the console:


Ext.data.StoreManager.get('StandardGraphStore')

That's what it's doing behind the scenes to lookup you're store by id.

marxan
3 Oct 2012, 7:30 AM
Are you sure about this? What test did you try to compare the error messages?

I removed the store:[StandardGraphStore] from my controller. In that case, it's undefined...


Reading between the lines, it sounds like you may have misunderstood what I was proposing. Just adding a storeId won't help, the key detail was that I was creating an instance of the store with that id. Adding the storeId to your Ext.define won't help.



Well adding in breakpoints and stepping through in the debugger is ultimately the answer to fixing all bugs when you can't figure out what else to try.

But first...

Try typing this in the console:


Ext.data.StoreManager.get('StandardGraphStore')

That's what it's doing behind the scenes to lookup you're store by id.

I get undefined when I type this in the console

skirtle
3 Oct 2012, 7:41 AM
If it isn't coming back from the StoreManager then the controller isn't creating it.

Could you post the relevant sections of code from your controller? It should look something like this:


stores: ['StandardGraphStore']

This differs from what you posted in your last post (note stores not store and quotes around the store name)

marxan
4 Oct 2012, 7:43 AM
Hi,

I already corrected the mistake you mentionned, but there's no change still the same mistake..

Here's the view I want to display:

Ext.define('TAB.view.StandardGraph', { extend: 'Ext.chart.Chart',
alias: 'widget.standardgraph',
store: 'StandardGraphStore',
width: 300,
height: 150,
axes: [ {
title: 'Temperature',
type: 'Numeric',
position: 'left',
fields: ['temperature'],
minimum: 0,
maximum: 100
},
{
title: 'Time',
type: 'Time',
position: 'bottom',
fields: ['date'],
dateFormat: 'ga'
}],
series: [
{
type: 'line',
xField: 'date',
yField: 'temperature'
}
]
});




Here's the controller that should display it when clicking on the button

Ext.define('TAB.controller.GraphOptions', { extend: 'Ext.app.Controller',
views: ['GraphOptions','StandardGraph'],

init: function () {
var me = this;


this.control({
'#generateChart': {
click: this.generateChart
},
})
},

generateChart: function (value){
Ext.widget('standardgraph').show();
}
});

Still don't know why the store is null, I modified my store, it's now a static store:


Ext.define('TAB.store.StandardGraphStore', { extend: 'Ext.data.Store',
requires: 'TAB.model.StandardGraphModel',
model: 'TAB.model.StandardGraphModel',
// storeId: 'StandardGraphStore',
data: [
{ temperature: 58, date: new Date(2011, 1, 1, 8) },
{ temperature: 63, date: new Date(2011, 1, 1, 9) },
{ temperature: 73, date: new Date(2011, 1, 1, 10) },
{ temperature: 78, date: new Date(2011, 1, 1, 11) },
{ temperature: 81, date: new Date(2011, 1, 1, 12) }
]
/* proxy: {
type: 'ajax',
url: 'app/data/GridsLoader.cfc?method=getMetrSeries&returnformat=json',
reader: {
type: 'json',
root: 'DATA'
}
}*/
});

metalinspired
4 Oct 2012, 8:14 AM
try adding autoLoad: true to your store definition or call Ext.data.StoreManager.get('StandardGraphStore').load()

skirtle
4 Oct 2012, 8:30 AM
@marxan. In the code you've just posted you aren't creating the store anywhere, that's the bit I really want to see. You're defining a store class but that is not the same thing as creating a store.

marxan
4 Oct 2012, 8:33 AM
I've added the autoLoad in the store, nothing changes...

If I try to call the StandardGraphStore:

TypeError: Ext.data.StoreManager.get("StandardGraphStore") is undefinedDo you know if I can call my chart immediately like this: Ext.widget('standardgraph').show();or should I put it in a panel?

metalinspired
4 Oct 2012, 8:46 AM
skirtle is right.
try adding this to StandardGraphStore

initComponent: function() {
var store = Ext.getStore('StandardGraphStore');
if (!store) {
store = Ext.create('TAB.store.StandardGraphStore');
}
store.load();
}

marxan
5 Oct 2012, 6:57 AM
Indeed it was the problem! Don't why I forgot to load it!

Here's my working code.

Thanks a lot for your help.



Ext.define('TAB.controller.GraphOptions', { extend: 'Ext.app.Controller',
model: ['StandardGraphModel'],
stores: ['StandardGraphStore'],
views: ['GraphOptions','StandardGraph', 'GraphContainer'],

init: function () {
var me = this;


this.control({
'#generateChart': {
click: this.generateChart
}
})
},

generateChart: function (value){
var grid = Ext.getCmp('StandardGraphId');
var store = Ext.getStore('StandardGraphStore');

store.proxy.extraParams = {
codes: Global.codeListToLoad
}

store.load();
Ext.widget('graphcontainer').show();
}

}
});