PDA

View Full Version : Ext.data.Store Filtering and Sorting



timsMyth
28 Jul 2010, 10:02 AM
Hi All,

I've been going round and round for a few days now on filtering my data store. I'm reading a same domain json data file into a store. Going forward I want to be able to filter that data store at various points. For now, I've been trying to just get the filtering working. Also, I've observed the same issue with sorting. The app runs fine, no debug errors but when I use either of those methods, I simply show no data in my list. Any help would be a lifesaver.

JSON Data (from a local file for now):


{
"tsData": [
{"company": "CompanyA",
"channel": "internet",
"actualtotal": "69386.00",
"budgettotal": "350668.00",
"priortotal": "146917.00"
},
{"company": "CompanyA",
"channel": "phone",
"actualtotal": "620287.00",
"budgettotal": "1026824.00",
"priortotal": "499073.00"
},
{"company": "CompanyA",
"channel": "Total",
"actualtotal": "689673.00",
"budgettotal": "1377492.00",
"priortotal": "645990.00"},
{"company": "Grand",
"channel": "Total",
"actualtotal": "2126413.00",
"budgettotal": "4444084.00",
"priortotal": "1944777.00"},
{"company": "CompanyC",
"channel": "phone",
"actualtotal": "23130.00",
"budgettotal": "140984.00",
"priortotal": "460988.00"},
{"company": "CompanyC",
"channel": "Total",
"actualtotal": "23130.00",
"budgettotal": "140984.00",
"priortotal": "710693.00"},
{"company": "CompanyB",
"channel": "internet",
"actualtotal": "212462.00",
"budgettotal": "544138.00",
"priortotal": "258820.00"},
{"company": "CompanyB",
"channel": "phone",
"actualtotal": "326255.00",
"budgettotal": "623764.00",
"priortotal": "329274.00"},
{"company": "CompanyB",
"channel": "Total",
"actualtotal": "538717.00",
"budgettotal": "1167902.00",
"priortotal": "588094.00"},
{"company": "CompanyD",
"channel": "internet",
"actualtotal": "283266.00",
"budgettotal": "672145.00",
"priortotal": "0.00"},
{"company": "CompanyD",
"channel": "phone",
"actualtotal": "576124.00",
"budgettotal": "1012475.00",
"priortotal": "0.00"},
{"company": "CompanyD",
"channel": "Total",
"actualtotal": "859390.00",
"budgettotal": "1684620.00",
"priortotal": "0.00"},
{"company": "CompanyE",
"channel": "phone",
"actualtotal": "15503.00",
"priortotal": "0.00"},
{"company": "CompanyE",
"channel": "Total",
"actualtotal": "15503.00",
"budgettotal": "15503.00",
"priortotal": "15503.00"}
]
}



And the infamous JavaScript:


Ext.setup({
tabletStartupScreen: 'tablet_startup.png',
phoneStartupScreen: 'phone_startup.png',
icon: 'icon.png',
glossOnIcon: false,
onReady: function(){

Ext.regModel('tsData', {
fields: [
'company',
'channel',
'actualtotal',
'budgettotal',
'priortotal'
]
});

var tradinData = new Ext.data.Store({
model: 'tsData',

getGroupString : function(record) {
return record.get('company')[0];
},

proxy: {
type: 'ajax',
url: 'tsData.json',
reader: {type: 'json', root: 'tsData'}
},
autoLoad: true
});

/* just trying this in my wandering
var filterArray = [];
var filterObj = {};
filterObj['property'] = "company";
filterObj['value'] = "CompanyA";
filterObj['anyMatch'] = false;
filterObj['caseSensitive'] = false;

filterArray.push(filterObj);
*/

tradinData.filter([{property:'company', value:'CompanyA', anyMatch:true, caseSensitive:true}], true);
tradinData.sort('channel', 'ASC');

var list = new Ext.List({
tpl: [
'<tpl for=".">',
'<div class="tots">',
'<p><strong>{company} - {channel}</strong></p>',
'<p>Actual: {actualtotal} Budget: {budgettotal} Prior: {priortotal}</p>',
'</div>',
'</tpl>'
],
itemSelector: 'div.tots',
singleSelect: true,
//grouped: true,
store: tradinData,
listeners: {
itemtap: function(view, index, item, e){
var rec = view.store.getAt(index);
main.setCard(1);
detail.update({
company: rec.get('company'),
channel: rec.get('channel'),
actualtotal: rec.get('actualtotal'),
budgettotal: rec.get('budgettotal'),
priortotal: rec.get('priortotal')
});
}
}
});


var detail = new Ext.Panel({
tpl: [
'<tpl for=".">',
'<div class="deets">',
'<p><strong>{company} - {channel}</strong></p>',
'<p>Actual: {actualtotal} Budget: {budgettotal} Prior: {priortotal}</p>',
'</div>',
'</tpl>'
],
itemSelector: 'div.deets',
scroll: 'vertical',
dockedItems: [{
xtype: 'toolbar',
dock: 'top',
ui: 'light',
items: [{
text: 'Back',
ui: 'back',
handler: function(){
main.setCard(0);
}
}]
}]
});


var main = new Ext.Container({
fullscreen: true,
layout: 'card',
items:[list, detail]
}).show();

}

});


Help will rescue another puzzled coder from the abyss!

Thanks,

Tim

timsMyth
10 Aug 2010, 11:41 PM
Just a ping for this one. Wondering why no one has commented on this. Am I missing something here?

luciesfly
11 Aug 2010, 10:23 PM
var tradinData = new Ext.data.Store({
model: 'tsData',

getGroupString : function(record) {
return record.get('company')[0];
},
data : [
{"company": "CompanyA",
"channel": "internet",
"actualtotal": "69386.00",
"budgettotal": "350668.00",
"priortotal": "146917.00"
},
{"company": "CompanyA",
"channel": "phone",
"actualtotal": "620287.00",
"budgettotal": "1026824.00",
"priortotal": "499073.00"
},
{"company": "CompanyA",
"channel": "Total",
"actualtotal": "689673.00",
"budgettotal": "1377492.00",
"priortotal": "645990.00"},
{"company": "Grand",
"channel": "Total",
"actualtotal": "2126413.00",
"budgettotal": "4444084.00",
"priortotal": "1944777.00"},
{"company": "CompanyC",
"channel": "phone",
"actualtotal": "23130.00",
"budgettotal": "140984.00",
"priortotal": "460988.00"},
{"company": "CompanyC",
"channel": "Total",
"actualtotal": "23130.00",
"budgettotal": "140984.00",
"priortotal": "710693.00"},
{"company": "CompanyB",
"channel": "internet",
"actualtotal": "212462.00",
"budgettotal": "544138.00",
"priortotal": "258820.00"},
{"company": "CompanyB",
"channel": "phone",
"actualtotal": "326255.00",
"budgettotal": "623764.00",
"priortotal": "329274.00"},
{"company": "CompanyB",
"channel": "Total",
"actualtotal": "538717.00",
"budgettotal": "1167902.00",
"priortotal": "588094.00"},
{"company": "CompanyD",
"channel": "internet",
"actualtotal": "283266.00",
"budgettotal": "672145.00",
"priortotal": "0.00"},
{"company": "CompanyD",
"channel": "phone",
"actualtotal": "576124.00",
"budgettotal": "1012475.00",
"priortotal": "0.00"},
{"company": "CompanyD",
"channel": "Total",
"actualtotal": "859390.00",
"budgettotal": "1684620.00",
"priortotal": "0.00"},
{"company": "CompanyE",
"channel": "phone",
"actualtotal": "15503.00",
"priortotal": "0.00"},
{"company": "CompanyE",
"channel": "Total",
"actualtotal": "15503.00",
"budgettotal": "15503.00",
"priortotal": "15503.00"}
]
/*proxy: {
type: 'ajax',
url: 'tsData.json',
reader: {type: 'json', root: 'tsData'}
},
autoLoad: true*/
});

timsMyth
12 Aug 2010, 2:55 AM
I have no problem loading the data. I want to know how to get filtering and sorting working. Not sure I understand your post above.

mikeyroy
12 Aug 2010, 7:05 AM
I'm looking for a solution to this as well, the store works great loads up into a list fine, but want to filter & limit the records displayed at various points.

evant
12 Aug 2010, 7:23 PM
The filtering is a bit buggy at the moment, we'll look into correcting it for the next release.

timsMyth
13 Aug 2010, 1:41 AM
Hi Dr. Evan,

No problems, I built a workaround just reading each(rec) for the store and loading a new store with the filtered recs. I just want to thank you for your tireless work on this forum. Your answers are always good sources of code/knowledge. I know it's a lot of work. Also, I want to say that Sencha Touch rocks!

Cheers,

Tim