PDA

View Full Version : json store loading a bit slow? (same with array store)



shankar8rajah1
31 Oct 2013, 9:33 AM
Hi,

I was wondering if there is something wrong with the code I have right now. I noticed a noticeable pause/hang before the grid is rendered regardless of whether I use JSON store or Array store. Since I am new, I am not sure where to check where the slow down is. I used firebug to see how long it takes for the response of my data to come back and it's in the range of 47ms to 200 ms. I only have 700 rows so I would expect the rendering to be pretty quick.

Here's my code:

Ext.Loader.setConfig({enabled: true});Ext.Loader.setPath('Ext.ux', '/content/js/ext4/examples/ux');
Ext.require([
'Ext.grid.*',
'Ext.data.*',
'Ext.ux.grid.FiltersFeature',
'Ext.util.*',
'Ext.toolbar.Paging',
'Ext.ux.LiveSearchGridPanel',
'Ext.ux.LiveFilterGridPanel',
'Ext.tab.*',
'Ext.window.*',
'Ext.tip.*',
'Ext.layout.container.Border'
]);


Ext.onReady(function(){


Ext.QuickTips.init();

octopusPath = OctopusUtils.getAddress();
/*
function doAzulInventoryRequest(environment){
if (environment != ""){
var responseData = $.ajax({
type: "GET",
url: "http://"+octopusPath+"/capacity/capacity_tool_discoverer/?env="+environment,
dataType:"text",
async: false,
error: function( jqXHR, textStatus, errorThrown){
addLogMessage(" <font color='red'> Inventory Request failed: "+errorThrown+"</font>");
return;
}
}).done(function ( data ) {
}).responseText;

var capacity_lists = []

var lines = responseData.split("\n");

for(var i=0; i< lines.length; i++){
capacity_lists.push(lines[i].split(","));
}
return capacity_lists;

}
return "";
}
*/

// for this demo configure local and remote urls for demo purposes
/*var url = {
local: 'grid-filter.json', // static data file
remote: 'grid-filter.php'
};
*/
// configure whether filter query is encoded or not (initially)
var encode = false;

// configure whether filtering is performed locally or remotely (initially)
var local = true;


var store = Ext.create('Ext.data.JsonStore', {
// store configs
autoDestroy: true,
//autoLoad: true,


proxy: {
type: 'ajax',
url: 'http://'+octopusPath + '/capacity_ext/capacity_tool_discoverer/',
reader: {
type: 'json',
root: 'data',
totalProperty: 'total'
}
},


remoteSort: false,
//sortInfo: {
// field: 'name',
// direction: 'ASC'
//},
//pageSize: 50,
storeId: 'myStore',

fields: [
{ name: 'name' },
{ name: 'service_group' },
{ name: 'azul_version' },
{ name: 'host_tech' },
{ name: 'ait_num' },
{ name: 'app_name' },
{ name: 'data_center' },
{ name: 'filer_mounts' },
{ name: 'instances' },
{ name: 'env' }
]
});

/*var capacity_data = doAzulInventoryRequest("prd");

var myData = [
['None','usvxapprmp01.tel.us.ml.com','0','0','HOST TECH','47892','CG-AMRS-SHARED-TRADESERVER','STATEN ISLAND','STTPFEED_9:BONDFEED_9:STTPFEED_8:BONDFEED_8'],
['brwxapmtcc01','brwxapmtcc01.latam.bankofamerica.com','0','0','HOST TECH','56001 56181','CG-AMRS-DMAEST-LATAM-HOTROD','SAO,IMFP']


];


var store = Ext.create('Ext.data.ArrayStore', {
fields: [
{ name: 'name' },
{ name: 'service_group' },
{ name: 'azul_zvm_version' },
{ name: 'azul_zst_version' },
{ name: 'host_tech' },
{ name: 'ait_num' },
{ name: 'app_name' },
{ name: 'data_center' },
{ name: 'instances' }
],
data: capacity_data
});*/
//store.load();

var filters = {
ftype: 'filters',
// encode and local configuration options defined previously for easier reuse
encode: encode, // json encode the filter query
local: local, // defaults to false (remote filtering)
filters: [{
type: 'list',
dataIndex: 'name',
options: name_column
}, {
type: 'list',
dataIndex: 'service_group',
options: service_group_column
}, {
type: 'list',
dataIndex: 'app_name',
options: app_name_column
},{
type: 'list',
dataIndex: 'env',
options: env_column
}]
};
//var ait_val;
// use a factory method to reduce code while demonstrating
// that the GridFilter plugin may be configured with or without
// the filter types (the filters may be specified on the column model
var createHeaders = function (finish, start) {


var columns = [{
dataIndex: 'name',
text: 'Name',
renderer: function(value, metaData, record, rowIdx, colIdx, store, view){
return '<a href=http://uswmapdcprp01:9090/ETTAMRS/GetonesecTrendCharts.jsp?server=' + value +'>' + value +'</a>';
}

}, {
dataIndex: 'service_group',
text: 'Service Group'

}, {
dataIndex: 'azul_version',
text: 'Azul Version'

}, {
dataIndex: 'host_tech',
text: 'Host Tech',
renderer: function(value, metaData, record, rowIdx, colIdx, store, view){
var name_column = record.get('name');
return '<a href=http://techinfo.bankofamerica.com/server.php?server=' + name_column +'>' + value +'</a>';
}

}, {
dataIndex: 'ait_num',
text: 'AIT Num',
renderer: function(value, metaData, record, rowIdx, colIdx, store, view){
var ait_column = value;
var ait_column_comma = ait_column.split("\n");
if (ait_column_comma.length > 1){
ait_num_one = '<a href=http://techinfo.bankofamerica.com/ait.php?ait=' + ait_column_comma[0] +'>' + ait_column_comma[0] +'</a>';
ait_num_two = '<a href=http://techinfo.bankofamerica.com/ait.php?ait=' + ait_column_comma[1] +'>' + ait_column_comma[1] +'</a>';
return ait_num_one + '</br>' + ait_num_two;
}
else{
return '<a href=http://techinfo.bankofamerica.com/ait.php?ait=' + value +'>' + value +'</a>';
}
}

}, {
dataIndex: 'app_name',
text: 'App Name',
renderer: function(value, metaData, record, rowIdx, colIdx, store, view){
var ait_column = record.get('ait_num');
var ait_column_comma = ait_column.replace("</br>",",");
return '<a href=http://ait.bankofamerica.com/ait/controller/viewApp?appid=' + ait_column_comma +'>' + value +'</a>';
}

},{
dataIndex: 'data_center',
text: 'Data Center'

},{
dataIndex: 'filer_mounts',
text: 'Filer-Mounts',


},{
dataIndex: 'instances',
text: 'Instances'

},{
dataIndex: 'env',
text: 'Env'

}];


return columns.slice(start || 0, finish);
};

var grid = Ext.create('Ext.ux.LiveFilterGridPanel', {
border: false,
region: 'center',
indexes:['name','service_group','azul_version', 'host_tech','ait_num','app_name','data_center','filer_mounts','instnaces','env'],
store: store,
columns: createHeaders(10),
loadMask: true,
features: [filters],
width: 400,
layout: 'fit',
bbar: Ext.create('Ext.Toolbar')
});


// add some buttons to bottom toolbar just for demonstration purposes
grid.child('[dock=bottom]').add([
'->',
{
text: 'Clear Filter Data',
handler: function () {
grid.filters.clearFilters();
}
}
]);

family = ["Analytics", "Client Connectivity", "Crossing", "DMA", "ETR", "Engines", "Monitoring", "TP Monitoring", "Tick", "Tradeserver"];

var familyCombo = Ext.create('Ext.form.field.ComboBox', {
fieldLabel: 'Family',
multiSelect: true,
width: 190,
labelWidth: 40,
store: family,
queryMode: 'local'
});

filer = ["nnjp00000n2", "nnjp00000n3", "nnjp00000n4", "nnjp00000n5"];

var filerCombo = Ext.create('Ext.form.field.ComboBox', {
fieldLabel: 'Filer',
multiSelect: true,
width: 190,
labelWidth: 40,
store: filer,
queryMode: 'local'
});

var win = Ext.create('widget.window', {
title: 'Capacity',
closable: true,
closeAction: 'hide',
//animateTarget: this,
width: 600,
height: 350,
layout: 'border',
maximizable: true,
maximized: true,
bodyStyle: 'padding: 5px;',
items: [{
region: 'west',
title: 'Query',
width: 200,
split: true,
collapsible: true,
collapsed: true,
floatable: false,
items:[familyCombo]
}, grid
]
}).show();
var name_column, service_group_column,app_name_column, env_column = []
//store.load();
store.load({
callback: function(r, options, success) {
if (success) {
name_column=store.collect('name',false);
service_group_column=store.collect('service_group',false);
app_name_column=store.collect('service_group',false);
env_column=store.collect('evn',false);
}
}
});



});

PS: I tried the same exact data, loading it DHTMLXGrid and DataTables and both were instant rendering.

scottmartin
4 Nov 2013, 1:26 PM
If you have that many records, I would recommend using paging or bufferedRenderer.

Scott.

shankar8rajah1
4 Nov 2013, 4:02 PM
Ok I will try that thanks!