View Full Version : data.store.Add.. best practices.?..

5 Dec 2013, 6:50 AM
Hey there..

I have been using the ExtJS 4.0.7 for a little while, but am very much a newbie in the world of scripting and code.

I have a query running to a WebMapService (WMS) rest endpoint which returns a collection of objects that I am looping through and adding into my data store, and display in a grid panel. This works just fine and displays quickly for requests which bring back 100 objects.

However, I am running things which are bringing back 1,000 objects (and hope to do more). Things slog down and bomb if I allow it to run wide open.

I have been running my query and limiting the size of the collection add to only 100 at a time, and then running queries in series (watching them in Chrome dev tools) and can see a significant slowdown in the upload process with each new batch of 100 objects. These are being added to the same data store (client side, not skilled in php)..

Any advice?

5 Dec 2013, 9:51 AM
I have been using the ExtJS 4.0.7

You should really not use 4.07. I highly recommend our latest version. Ext 4.07 was slow and buggy.

I am looping through and adding into my data store

When you say your code is in object format, you mean?

Should be able to use store.loadData(records), no looping required.

Do you want to to display all the records at once, or an you page the data so only 1 page is sent at a time?

You can use store.suspendEvents() / resumeEvents() during any data update to help out as well.

5 Dec 2013, 1:22 PM
Thanks for the reply..
I will be going to the 4.2.1 version in the near future..

I am querying a WMS (ESRI ArcServer based) web service for point data.. The response comes back in a JSON format which I put into a graphics layer on the web map I am using. (shown in an ExtJS viewport).

The mapping runs very fast.. The record data (feature attributes)
ex: [{'name': 'charlotte', 'lat': numbers, 'long': numbers}, {'name': 'charlotte', 'lat': numbers, 'long': numbers}, {'name': 'charlotte', 'lat': numbers, 'long': numbers}] is shown in a gridpanel inside a tab container.

This is my first reall whack at using grids in ExtJS and I pre defined all of the columns and build the grid at startup (hard values.. not dynamic). The speed factor is bad. I tried to just run it as a data store which I lump saved to, but was doing it with a large query, and couldnt figure out why it wouldnt render. So.. I chanced on a smaller query (purely accident on my part) and tried

my_Data.add( values.... in order...); this was a pre defined var and already connected to the grid...

I will try out the 4.2.1 version tomorrow and see what happens. I will also post some of my scripting as well.

I need to do the following:
1. build the grid dynamically from a returned collection which could be read from the 'fields' of a json call.
ex: http://tigerweb.geo.census.gov/arcgis/rest/services/Census2010/State_County/MapServer/1?f=pjson

and then populate it with information brought back from a query..
ex: http://tigerweb.geo.census.gov/arcgis/rest/services/Census2010/State_County/MapServer/find?searchText=carolina&contains=true&searchFields=name&sr=&layers=1&layerDefs=&returnGeometry=true&maxAllowableOffset=&geometryPrecision=&dynamicLayers=&returnZ=false&returnM=false&gdbVersion=&f=pjson

I will let you know how that goes tomorrow...

6 Dec 2013, 8:21 AM

I am still looking at how to build that grid dynamically, I can return the information from the webservices referenced above, and am looking at a number of the different threads regarding the DynamicGridPanel.. and so far the best I have been able to come up with is a 404 error when looking for "GET DynamicGridPanel.js?_##numbers###.

I have made sure that I am loading: ext-all-gray.css and ext-all.js. I also have the "Ext.Loader.setConfig({enabled:true}) at the top of my file..

When I step through the code and get to the final part of trying to define my grid, I am unable to see the "Ext.ux.form" in the console (in FireBug), but not anything else.

I also searched inside the root of my Ext-4.0.7-gpl folder (also looked in a newly downloaded copy of ext-4.2.1).

I should say I do not have any "models" defined, but am trying to define my gird like this..


function createGrid(myTitleVariable, myFields){
var tab = Ext.getCmp(myTitleVariable);
var myStore = Ext.create('Ext.Data.Store',{
data: myFields,
fields: ['value']

title: myTitleVariable,
store: myStore,
rowNumberer: true,
height: 200,
width: 400,
renderTo: tab

I admit I am not fully understanding some of the referenced things ('Models'?)

Is the DynamicGridPanel.js included in the release itself of is that on the net somewhere? (I am running this on a local network).


6 Dec 2013, 9:06 AM
Ok.. I think I am getting there: this is not an included thing, but is a way that members of the community have extended the objects in ExtJS.. (please tell me if I am wrong). been reading : http://www.sencha.com/forum/showthread.php?223802 and : http://erhanabay.com/2009/01/29/dynamic-grid-panel-for-ext-js/ I will tell you how it turns out.

16 Dec 2013, 5:02 AM
Hi, <br><br>So far I have: updated from the ExtJS above reference to 4.0 to 4.2.2, and can build a tab and put a grid in it with what looks like the data that I want being returned (but not showing in the grid.. I can see blank lines and it appears that they are the same count as what I anticipated coming back from my query to the server (Web Map Service)..<br><br>A basic outline of my code: <br><br>
function addTab(){<br>&nbsp; var tabs = Ext.getCmp('formTabs');<br>&nbsp; var my_Store = Ext.create('Ext.data.store',{<br>&nbsp;&nbsp;&nbsp;&nbsp; autoLoad: true, <br>&nbsp;&nbsp;&nbsp;&nbsp; pageSize: 100,<br>&nbsp;&nbsp;&nbsp;&nbsp; fields: fieldNames,&nbsp;&nbsp;&nbsp; //a collection of fields that I define from a query&nbsp; <br>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; //result looks like:&nbsp; [Object{name = "OBJECTID", value="OBJECTID", id=0}, Object{name = "NAME", value="NAME", id=0}]<br>&nbsp;&nbsp;&nbsp;&nbsp; model: myModel,&nbsp;&nbsp; //I am lost as to the way to make this work.<br>&nbsp;&nbsp;&nbsp;&nbsp; proxy:{<br>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; type: 'jsonp',<br>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; url:&nbsp; searchPath, //passed in value<br>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; reader:{<br>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; type: 'jsonp',<br>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; root: 'results'<br>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; }<br>&nbsp;&nbsp;&nbsp;&nbsp; }<br>&nbsp;&nbsp; }<br><br>&nbsp; tabs.add({<br>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; title: 'mytitle',<br>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; id: 'myId',<br>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; closable: true,<br>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; items:[{<br>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; columnWidth: 0.95,<br>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; xtype: 'gridpanel',<br>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; id: 'myGridPanel',<br>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; layout: 'fit',<br>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; columns: myColumns, //variable I pass in.<br>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; store:&nbsp; my_Store,<br>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; height: 350,<br>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; title: 'myTitle',<br>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; }]<br>&nbsp; }).show();<br><br>}<br><br>/*the returned object looks like this:<br>*Ext.data.JsonP.callback1({<br>*&nbsp;&nbsp; "results":[<br>*&nbsp;&nbsp; {<br>*&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; "layerId": 0,<br>*&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; "layerName": "theName",<br>*&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; "displayFieldName": "DisplayName",<br>*&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; "foundFieldName": "found field",<br>*&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; "value": "found value",<br>*&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; "attributes": {&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; //*****this is the object inside all of the fluff I care about<br>*&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; "blah": "blah"<br>*&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; }<br>*&nbsp;&nbsp;&nbsp;&nbsp; }]<br>*/<br><br>

16 Dec 2013, 5:07 AM
Please re-post your code as it is not usable.

16 Dec 2013, 5:55 AM
Ok.. I can now run 4.2.2 and it runs much better than the older version.. I can make a tab and put a grid that has the number of lines in it for the reply I expect, with the correct fields inside. I cannot figure out how to define the model to run for a nested set of values inside the JSON returned object.


function addTab(){
var tabs = Ext.getCmp('formTabs');
var my_Store = Ext.create('Ext.data.store',{
autoLoad: true,
pageSize: 100,
fields: fieldNames, //a collection of fields that I define from a query
//result looks like:; [Object{name = "OBJECTID", value="OBJECTID", id=0}, Object{name = "NAME", value="NAME", id=0}]
model: myModel, //I am lost as to the way to make this work.
type: 'jsonp',
url: searchPath, //passed in value
type: 'jsonp',
root: 'results'

title: 'mytitle',
id: 'myId',
closable: true,
columnWidth: 0.95,
xtype: 'gridpanel',
id: 'myGridPanel',
layout: 'fit',
columns: myColumns, //variable I pass in.
store:; my_Store,
height: 350,
title: 'myTitle',

/*the returned object looks like this:
* "results":[
* {
* "layerId": 0,
* "layerName": "theName",
* "displayFieldName": "DisplayName",
* "foundFieldName": "found field",
* "value": "found value",
* "attributes": { //*****this is the object inside all of the fluff I care about
* "blah": "blah"
* }
* }]

16 Dec 2013, 10:46 AM
Hey, I found an answer that Scott had given on another thread..

It helped me with nested data which was what I was after...