PDA

View Full Version : How do I load a store from an external file?



monzay
4 Mar 2010, 8:34 AM
I have a page that creates a gridpanel from a groupingstore using an array. It works fine. I want to separate the data from the layout. I tried to move the code (data plus reader) that creates the store into a separate js file.


Ext.onReady(function(){

var akstore = new Ext.data.GroupingStore({
groupField:'fmp',
sortInfo:{field: 'fmp', direction: "ASC"},
data: [
[1,"Alaska Plaice","Gulf of Alaska Groundfish",imgLSplus,"akefh1","2009-12-18",grndfishhl],
[2,"Arrowtooth Flounder","Gulf of Alaska Groundfish",imgLSplus,"akefh1","2009-12-17",grndfishhl],
[3,"Atka Mackerel","Gulf of Alaska Groundfish",imgLSplus,"akefh1","2009-12-17",grndfishhl]
],
reader: new Ext.data.ArrayReader({id:'id'}, [
'id',
'Stock',
'fmp',
'DataQuality',
'DataCaveat',
{name: 'DatePub', type: 'date', dateFormat: 'Y-m-d'},
'LinkToSrce'
])
})
});
I added <script src="akstore.js"></script> into my main page and in my grid panel I used store: akstore.


items: [{
title: 'EFH',
xtype: 'grid',
stripeRows: true,
store: akstore,

What am I doing wrong?

fay
4 Mar 2010, 8:44 AM
Your akstore.js should contain something like:


function get_akstore()
{
return new Ext.data.GroupingStore({
groupField:'fmp',
sortInfo:{field: 'fmp', direction: "ASC"},
data: [
[1,"Alaska Plaice","Gulf of Alaska Groundfish",imgLSplus,"akefh1","2009-12-18",grndfishhl],
[2,"Arrowtooth Flounder","Gulf of Alaska Groundfish",imgLSplus,"akefh1","2009-12-17",grndfishhl],
[3,"Atka Mackerel","Gulf of Alaska Groundfish",imgLSplus,"akefh1","2009-12-17",grndfishhl]
],
reader: new Ext.data.ArrayReader({id:'id'}, [
'id','Stock','fmp','DataQuality','DataCaveat',
{name: 'DatePub', type: 'date', dateFormat: 'Y-m-d'},
'LinkToSrce'
])
});
}

Then in your main page:


// ...
store: get_akstore(),
// ...

Though to be honest, I don't really see the point of seperating out this into another JS file... other than for small-file-readability reasons. If deployed this way it means that your client has to make two requests for the main and akstore.js files when loading. Think about combining and minifying your deployment version into a single js file.

fay
4 Mar 2010, 8:45 AM
P.S. The reason why your "main" page wasn't recognising akstore is that it was not made a global variable - it only existed within the scope of the onReady in your akstore.js file.

monzay
4 Mar 2010, 10:20 AM
Thanks for the suggestions and explanations. I made the changes you suggested but firebug tells me that "get_akstore is not defined".

I agree with you that there are probably other and better ways to do this but as a newbie I feel like I have to learn how to crawl and walk before I can run.

fay
4 Mar 2010, 11:17 AM
store: get_akstore(), // Note the ()

Is akstore.js loaded in your scripts section of FireBug?

monzay
4 Mar 2010, 11:39 AM
Thanks again but I just figured it out. In the external file I had wrapped the function that creates the groupingstore inside an Ext.onReady(function(). Once I removed it the page loaded correctly.