ExtJS 4.2 Accessing Array Elements returned from store

Question

I am unable to access the store elements returned from my store. When I console.log(me.proxy.read(operation)) and expand/navigate in the console I see all of my elements. There are 1000 rows. I am using the same store for a grid and have the pageSize set to 50. Even though I can see 1000 rows when i do a console.log(me.proxy.read(operation.resultSet.records[51])) i get an undefined message. So, it appears that for some reason the number of elements I can access is only 50 as that is what my pageSize is set to.

Long story short, I am using the same store for two scenarios. I want to have paging in my grid that will show 50 rows on each page. However, I want to loop through the entire store and load an array of all 1000 rows. The reason why I want an array of all 1000 is becasue I am going to use a date field in the rows to populate my date picker from an array. I am going to disable the dates in my grid and have the datepicker display only the dates that are in my grid.

I tried to include a screen shot but I am not allowed because i am only a 3 on the reputation system.

var operation = new Ext.data.Operation({action: 'read', start: 0, limit: 1000});
var proxy = new Ext.data.proxy.Ajax({ url: 'http://192.168.0.103/testit/dao_2.cfc?method=getContent'});
me.proxy.read(operation);
console.log(me.proxy.read(operation));

HERE IS UPDATED CODE:

I have this in my controller:                                              

ondatesStoreLoad: function(me,records,success)
{
var s = this.getStore('dates');
    for (i = 0; i < s.getCount(); i++) {     
        MESSAGE_ID = s.getAt(i).get('message_id');
        RECIP_EMAIL = s.getAt(i).get('recip_email');
        UNIX_TIME_STAMP = s.getAt(i).get('unix_time_stamp')
        console.log(i,MESSAGE_ID, RECIP_EMAIL, UNIX_TIME_STAMP);
    };}

This puts out all 1,000 of my records to the console but I am not sure how to put them in an array that I can use in my datepicker component. When ever i try to get the store in the datepicker it is always undefined. I suppose it is becasue the store hasn't loaded yet so there is nothing there. Not sure how to get around that. Perhaps a callback handler?

HERE IS ANOTHER UPDATE:

I added a callback in my store.load:

var store = Ext.getStore('dates');

store.load({callback: function(){
    console.log(store.data.items[999].data.recip_email);
    console.log(store.data.items[999].data.unix_time_stamp);}
})

That took forever to figure out but now I can access all my records and have a smaller problem to work on. At the moment i just have one element hardcoded to do a quick test.

Where do I need to put the code to get it into my date picker disableDates config? I need to put the dates into an array but for quick testing I used minDate: just to see if i could see something work but it shows up as undefined. Now i have the code in a beforrender listener but that seemingly needs to be in some other place or maybe some handler for my date picker....? is there an onload for the datepicker or something i shoudl use for this??

As far as I know, when using a paged grid, only the currently displayed set of records are loaded. So in your case, only 50 at a time. You could do a separate server call, that doesn't use your store, to retrieve the 1000 records to update the date picker. — forgivenson
Also, why are you manually creating an operation? If you create a store with a proxy in it, you just call .load() on the store to load the data. No need to do an explicit .proxy.read() call. — forgivenson
** Disclaimer: I am struggling with this frame work. While I have a grid setup to pull from my server and some other basic stuff, it has been painful. Long story shorter is that I don't know what I am doing. With that, I just found some code snipets to try for accessing the store out of desparation and had some success with being able to see all 1,000 records so I kept trying to use that to get something working. My intention was to try and get everything i can from the store before making another trip to the server. Should i not worry so much about that? — SnickerBooze
If you haven't already, I suggest making good use of the ExtJS docs. docs.sencha.com/extjs/4.2.2/#!/api/Ext.data.Store There is the link to the Store. Also, they have tons of working examples here: docs.sencha.com/extjs/4.2.2/#!/example These examples come with code that you can view, so you can see what they did. — forgivenson
I appreciate your willingness to help but like everyone else I see posting on this forum it seems like my opinion on the docs are shared with everyone else. There is not one example that can be applied to the MVC pattern they give as example. I am not able to make the jump. It is poor. — SnickerBooze

forgivenson forgivenson · Accepted Answer · 2014-01-03T19:20:46

Why not just change the datepicker directly from that ondatesStoreLoad function? Before the loop, disable all dates in the datepicker. Then during the loop, instead of the console.log call, enable the date that was found in that record.

In theory, that should work. However, looking at the docs for Ext, I don't see a way to disable all dates, or to enable a date. You can only set which dates are disabled. But the general idea of updating the datepicker in that ondatesStoreLoad call is still what you should do.

You might need to extend the datepicker class, and add some custom methods to it to be able to enable a specific day.

ExtJS 4.2 Accessing Array Elements returned from store

1 Answers