PDA

View Full Version : How do I populate my data store.



Elijah
30 Nov 2009, 8:55 AM
It seems like everything that I look at in the forum whether it be responses to my questions or examples everything is done differently.

I have a function get Alerts that runs an ajax call. It works. I get data.
I want to populate a store obj with the data so I can bind it to something such as a grid.
Based on what I have below which breaks down all the sections that I can think of thus far



{.....
getAlerts : function(){
Ext.Ajax.request({
url : 'modules/alerts/alerts.cfm',
params : {action:'getAlerts'},
method : 'GET',
success: function (result, request) {
dataSource = "";
try{
dataSource = result.responseText;
}
catch(e)
{
alert('getAlerts 1 Exception: \n' + e.message + '\nresponse: ' + result.responseText);
return;
} // try

try{
dataSource = Ext.util.JSON.decode(dataSource);
}
catch(e)
{
alert('getAlerts 2 Exception: \n' + e.message + '\nresponse: ' + result.responseText);
return;
} // try

try{
// populate the data store with the ajax information
// This FAILS
this.alertDataStore.load(dataSource);
}
catch(e)
{
alert('getAlerts 3 Exception: \n' + e.message + '\nresponse: ' + result.responseText);
return;
} // try
},
failure: function (result, request) {
Ext.MessageBox.alert('Failed', 'No data from the server:\n' + result.responseText);
return;
}
});
}, // getAlerts
.....}




// define a named order of our array
var alertFields = [
{name: 'company', type: 'string'},
{name: 'price', type: 'float'},
{name: 'change', type: 'float'},
{name: 'pctChange', type: 'float'}
];

var alertColumnModel = new Ext.grid.ColumnModel([
new Ext.grid.RowNumberer(),
{header: "Company", width: 120, sortable: true, dataIndex: 'company'},
{header: "Price", width: 70, sortable: true, renderer: Ext.util.Format.usMoney, dataIndex: 'price'},
{header: "Change", width: 70, sortable: true, dataIndex: 'change'},
{header: "% Change", width: 70, sortable: true, dataIndex: 'pctChange'}
]);

var alertDataStore = new Ext.data.Store({
reader: new Ext.data.ArrayReader({}, alertFields),
// this i know is messed up. i can not have it empty so i am using the example data
// as a default dummy data set until i get the ajax information
data: Ext.grid.dummyData
});

When I run the page this is the error message that trips from the try catch.


getAlerts 3 Exception:
this.proxy is undefined
response: {"ALERTS":[["November, 30 2009 11:53:58",33.23,1.01,1.02,"Wednesday A"],["Sample Value B1",21.11,2.01,2.01,"Thursday B"],["Sample Value C1",3.78,3.01,3.02,"friday C"],["Sample Value D1",44.64,4.01,4.01,"Friday D"]]}

Can someone please instruct me on what I am to do? I am getting a little frusterated.

30 Nov 2009, 9:07 AM
if you read the API, you'll see that loadData is not the same as "load"

Elijah
30 Nov 2009, 9:14 AM
Okay, changed the load to loadData and i dont get the error.

Now I have scope issues where in the creation of the grid it can not see the global variables defined above.

adding in a call to "displayAlerts();" inside of the SUCCESS block, it will not fire as it cannot find the method.
If i put in self = this; in the opening of the function getAlerts and then self.displayAlerts(); inside of the SUCCESS block it will trigger, but then inside of the

displayAlerts() function it can not find the variables alertDataStore and the alertColumnModel

=================================
What I could really use is some sort of tutorial guide that steps me through each phase of building a simple system that outlines in great detail what is going on in the code and not leaving things up to me to have assume what is going on.

30 Nov 2009, 9:16 AM
loadData will allow you to ask the store to digest the records passed to it.

load will invoke an XHR to get the data remotely. Does that explain things better?

Btw, the following code will never trigger an exception:

try{
dataSource = result.responseText;
}
catch(e)
{
alert('getAlerts 1 Exception: \n' + e.message + '\nresponse: ' + result.responseText);
return;
} // try

30 Nov 2009, 9:17 AM
If i can put on my salesman hat on, I explain data stores in great detail in the data grid chapter of Ext JS in Action.

Elijah
30 Nov 2009, 9:33 AM
LOL you can put on any hat you like. When is it scheduled for print?
I hate not having a published book. Easier for me to look up and find things in print than on web.

Elijah
30 Nov 2009, 9:40 AM
Yes your post definitely help.

New Q:
loadData will allow you to ask the store to digest the records passed to it.
When you say it digests the records...

What all is involved in that process?

Where can I look to see what is going on with it?

Do I need to concern myself with that?

I ask because I get all sorts of errors that popup that go back into the core ext js files and I am sure its only because I am not following whatever methodology there is out there when using the libraries provided.

I would really love to get a solid grasp on the library system and implement it in a new application we plan on building. Others on the team just want to use the Ext JS example Desktop to load I-Frame windows with content instead of using the modules that come packaged with it because they dont want to deal with the learning curve. I really do not want to do that otherwise I guess you could say my job is done already since I have the desktop figured out as to how to get new shortcuts on it and open up new I-Frame panels. Yuck.

Mike Robinson
1 Dec 2009, 8:07 AM
(Good book ...) ~o)

It also seems to me that you just might be "trying to do for the Store object what the Store object already knows how to do."

Let's take, for instance, the JsonStore object, with its intended companions JsonReader and JsonWriter. If you use these three objects together, you can simply "load()" the store and "add()" records and "update()" them and so on, and forget about what's actually going on behind-the-scenes between the client and the server. All that you need to do is to make sure that the host-side has defined request handlers which conform to the CRUD (Create, Read, Update, Destroy) protocol specified for these objects.

When you request records, JsonStore will ask JsonReader to read them, and JsonReader, by means of an HttpProxy, will generate the necessary Ajax calls itself and will handle all of the responses from the same.

I believe that this is "the designer's intent" for these objects and classes.

1 Dec 2009, 8:10 AM
LOL you can put on any hat you like. When is it scheduled for print?
I hate not having a published book. Easier for me to look up and find things in print than on web.

It will probably be in print in April or May. i'm just polishing up the last 3 chapters now.

Elijah
4 Dec 2009, 10:14 AM
var alertDataStore = new Ext.data.Store({
url: 'alerts.cfm'
reader: new Ext.data.ArrayReader({...}, [...])
});

Can someone explain to me why if I am using the ColdFusion Serialize JSON method which by definition of Adobe
Converts ColdFusion data into a JSON (JavaScript Object Notation) representation of the data. I have to use the Ext.data.ArrayReader in order to process the response? I would havde assumed that the JsonReader would be the one I would have used.

CrazyEnigma
4 Dec 2009, 10:51 AM
You can put any reader into the Store object, it will read it the same, so long as the input is the appropriate format for the reader.

ie. JsonReader takes an Array of JSON objects, ArrayReader takes an Array of Array objects

Now you need to specify what the reader is going to read, and then the reader will interpret the response into the appropriate decoded JSON object.

There are benefits and drawbacks JSON and Array. JSON specifies name to value whereas, the Array only specifies the values, which the Reader already knows about.

JSON


[{"id":1,"name":"Jeff"},{"id":2,"name":"Mark"}]


Array


[[1,"Jeff"],[2,"Mark"]]


So if your data output from CF looks like one of these, then employ the appropriate Reader respectively.

From your data output, it is an ArrayReader.

You either create remote data or local, you cannot specify both. Use loadData if you are loading in local data or in your case you used the Ext.Ajax.request object to get the data. Use a reader if you going to get data remotely. If your response is: ALERTS then you need to specify the root in reader.


root: 'ALERTS'


Use Ext.Ajax.request when you are getting data that doesn't need to be parsed, or use a Reader if you know the data that is expected.

On another programming note, never use more than one try catch, nor nest them. Your program will halt if anything fails within it, so why need more than one.