PDA

View Full Version : Load data into Memory Proxy Store



erictung
15 Jul 2013, 6:28 PM
Hi, I have developed a screen where I have successfully implemented a grid using memory paging and the UX filtering control code plugins.

What I would like to do is load the data into the store using an external method, something along the lines of:

var dataStore = Ext.create('Ext.data.Store', {
id: "Company.store.SomeList",
model: 'Company.model.SomeList',
//data: rawdata, // commented this out so that I can load data into the "dataStore" later
remoteSort: true,
remoteFilter: true,
pageSize: iDefaultPageSize,
proxy: { type: "memory", enablePaging: true },
sorters: [
{ property: "Name", direction: "ASC" }
],
requires: [ "Company.model.SomeList" ]
});

var remoteStore = Ext.create('Ext.data.Store', {
id: "Company.store.SomeList-remote",
model: 'Company.model.SomeList',
autoLoad: true,
proxy: {
type: "ajax",
url: "/Data"
},
requires: [ "Company.model.SomeList" ],
listeners:{
load: function(self, records, successful)
{
dataStore.loadRawData(self.proxy.reader.rawData);
}
}
});



However, when i do the above the grid completely ignores the sorting/paging settings set on the store.

Could some one point out where I'm getting off track?

Thanks! - Eric

slemmon
17 Jul 2013, 1:31 PM
May be hard to say without seeing your fields to see if your model has a field called 'Name'.
But, to show it can work here's an inclusive example:



Ext.define('KitchenSink.model.Company', {
extend: 'Ext.data.Model',
fields: [{
name: "company"
}, {
name: "price",
type: "float"
}, {
name: "change",
type: "float"
}, {
name: "pctChange",
type: "float"
}, {
name: "lastChange",
type: "date",
dateFormat: "n/j h:ia"
}, {
name: "rating",
type: "int",
convert: function (c, a) {
var b = a.get("pctChange");
if (b < 0) {
return 2
}
if (b < 1) {
return 1
}
return 0
}
}]
});


var data = [
["3m Co", 71.72, 0.02, 0.03, "9/1 12:00am"],
["Alcoa Inc", 29.01, 0.42, 1.47, "9/1 12:00am"],
["Altria Group Inc", 83.81, 0.28, 0.34, "9/1 12:00am"],
["American Express Company", 52.55, 0.01, 0.02, "9/1 12:00am"],
["American International Group, Inc.", 64.13, 0.31, 0.49, "9/1 12:00am"],
["AT&T Inc.", 31.61, -0.48, -1.54, "9/1 12:00am"],
["Boeing Co.", 75.43, 0.53, 0.71, "9/1 12:00am"],
["Caterpillar Inc.", 67.27, 0.92, 1.39, "9/1 12:00am"],
["Citigroup, Inc.", 49.37, 0.02, 0.04, "9/1 12:00am"],
["E.I. du Pont de Nemours and Company", 40.48, 0.51, 1.28, "9/1 12:00am"],
["Exxon Mobil Corp", 68.1, -0.43, -0.64, "9/1 12:00am"],
["General Electric Company", 34.14, -0.08, -0.23, "9/1 12:00am"],
["General Motors Corporation", 30.27, 1.09, 3.74, "9/1 12:00am"],
["Hewlett-Packard Co.", 36.53, -0.03, -0.08, "9/1 12:00am"],
["Honeywell Intl Inc", 38.77, 0.05, 0.13, "9/1 12:00am"],
["Intel Corporation", 19.88, 0.31, 1.58, "9/1 12:00am"],
["International Business Machines", 81.41, 0.44, 0.54, "9/1 12:00am"],
["Johnson & Johnson", 64.72, 0.06, 0.09, "9/1 12:00am"],
["JP Morgan & Chase & Co", 45.73, 0.07, 0.15, "9/1 12:00am"],
["McDonald's Corporation", 36.76, 0.86, 2.4, "9/1 12:00am"],
["Merck & Co., Inc.", 40.96, 0.41, 1.01, "9/1 12:00am"],
["Microsoft Corporation", 25.84, 0.14, 0.54, "9/1 12:00am"],
["Pfizer Inc", 27.96, 0.4, 1.45, "9/1 12:00am"],
["The Coca-Cola Company", 45.07, 0.26, 0.58, "9/1 12:00am"],
["The Home Depot, Inc.", 34.64, 0.35, 1.02, "9/1 12:00am"],
["The Procter & Gamble Company", 61.91, 0.01, 0.02, "9/1 12:00am"],
["United Technologies Corporation", 63.26, 0.55, 0.88, "9/1 12:00am"],
["Verizon Communications", 35.57, 0.39, 1.11, "9/1 12:00am"],
["Wal-Mart Stores, Inc.", 45.45, 0.73, 1.63, "9/1 12:00am"]
];






Ext.define('KitchenSink.view.grid.SlidingPager', {
extend: 'Ext.grid.Panel',

requires: [
'Ext.data.*',
'Ext.grid.*',
'Ext.util.*',
'Ext.toolbar.Paging',
'KitchenSink.model.Company'
],
xtype: 'sliding-pager',


stripeRows: true,
height: 320,
width: 600,
frame: true,
title: 'Sliding Pager',

initComponent: function(){
this.width = 650;
var store = new Ext.data.Store({
model: KitchenSink.model.Company,
//remoteSort: true,
pageSize: 10,
proxy: {
type: 'memory',
enablePaging: true,
data: data,
reader: {
type: 'array'
}
},
sorters: [
{ property: "company", direction: "ASC" }
]
});

Ext.apply(this, {
store: store,
columns: [{
text: 'Company',
sortable: true,
dataIndex: 'company',
flex: 1
},{
text: 'Price',
sortable: true,
renderer: Ext.util.Format.usMoney,
dataIndex: 'price',
width: 75
},{
text: 'Change',
sortable: true,
renderer: this.changeRenderer,
dataIndex: 'change',
width: 80
},{
text: '% Change',
sortable: true,
renderer: this.pctChangeRenderer,
dataIndex: 'pctChange',
width: 100
},{
text: 'Last Updated',
sortable: true,
dataIndex: 'lastChange',
width: 115,
renderer: Ext.util.Format.dateRenderer('m/d/Y')
}],
bbar: {
xtype: 'pagingtoolbar',
pageSize: 10,
store: store,
displayInfo: true,
}
});
this.callParent();
},

afterRender: function(){
this.callParent(arguments);
this.getStore().load();
},

changeRenderer: function(val) {
if (val > 0) {
return '<span style="color:green;">' + val + '</span>';
} else if(val < 0) {
return '<span style="color:red;">' + val + '</span>';
}
return val;
},

pctChangeRenderer: function(val){
if (val > 0) {
return '<span style="color:green;">' + val + '%</span>';
} else if(val < 0) {
return '<span style="color:red;">' + val + '%</span>';
}
return val;
}
});




Ext.widget('sliding-pager', {
renderTo: document.body
});

Proffnet
3 Nov 2015, 7:56 AM
dataStore.setProxy({type: "memory", enablePaging: true, data:_yourData_});

dataStore.load();

Hope it helps.