PDA

View Full Version : Filtering data or a better solution



danvega
24 Jul 2010, 8:00 AM
21647So I have a ton of data that working with here and I am trying to find the best solution. Here is some data for a conference, you will see each item has a date and a schedule. In the full example there is an array of items for schedule (20+ each day) but for this example I will keep it simple.

My first thought was to somehow load only the data for the day (by default the 7/28/2010) and then when a user clicked the day button update the store with the correct data. With all of the data in one lump json string though I was not sure how to do it.

My next thought was just load all of the data, group it by day and filter it when a day is clicked on.

Date



[
{
"schedule": [
{
"seats": 1000,
"starttime": "9:00 AM",
"endtime": "10:30 AM",
"topic": {
"id": 437.0,
"name": "Keynote"
},
"speakers": [
{
"id": 882.0,
"name": "Joe Smith"
}
],
"location": "Ballroom"
}
],
"date": "2010\/07\/28"
},

{
"schedule": [
{
"seats": 1000,
"starttime": "9:00 AM",
"endtime": "10:30 AM",
"topic": {
"id": 437.0,
"name": "Keynote"
},
"speakers": [
{
"id": 882.0,
"name": "Joe Smith"
}
],
"location": "Ballroom"
}
],
"date": "2010\/07\/29"
},

{
"schedule": [
{
"seats": 1000,
"starttime": "9:00 AM",
"endtime": "10:30 AM",
"topic": {
"id": 437.0,
"name": "Keynote"
},
"speakers": [
{
"id": 882.0,
"name": "Joe Smith"
}
],
"location": "Ballroom"
}
],
"date": "2010\/07\/30"
},

{
"schedule": [
{
"seats": 1000,
"starttime": "9:00 AM",
"endtime": "10:30 AM",
"topic": {
"id": 437.0,
"name": "Keynote"
},
"speakers": [
{
"id": 882.0,
"name": "Joe Smith"
}
],
"location": "Ballroom"
}
],
"date": "2010\/07\/31"
}

]


This works great until you go to filter it.



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

Ext.regModel("Schedule",{
fields:[
{name:'date',type:'date'},
{name:'schedule',type:'object',
fields:[
{name:'seats',type:'int'},
{name:'starttime',type:'string'},
{name:'endtime',type:'string'},
{name:'topic',type:'object',
fields: [
{name:'id',type:'int'},
{name:'name',type:'string'}
]
},
{name:'speakers',type:'object',
fields:[
{name:'id',type:'int'},
{name:'name',type:'string'}
]
}
]
}
]
});

var tpl = [
'<tpl for=".">',
'<tpl for="schedule">',
'<div class="session">{starttime} - {endtime}<br/>',
'<tpl for="topic">',
'Name: {name} ',
'</tpl>',
'<tpl for="speakers">Speaker: {name}</tpl>',
'</div>',
'</tpl>',
'</tpl>'
];

var list = new Ext.List({
id:'sessions',
fullscreen:true,
cls:'session-list',
tpl:tpl,
singleSelect:true,
itemSelector: 'div.session',
grouped:true,
store: new Ext.data.Store({
autoLoad:true,
model:'Schedule',
proxy: {
url: 'test.json',
type: 'ajax',
reader: 'json'
},
getGroupString: function(record){
return record.get('date').format('m/d/Y');
}
})
});

var sb = new Ext.SplitButton({
defaults:{
xtype:'button',
handler:function(b,e){
var f = new Ext.util.MixedCollection();
f.add("property","date");
f.add("value",b.id);
Ext.getCmp('sessions').getStore().filter(f);
}
},
centered:true,
items:[
{id:'2010/07/28',text:'Wed'},
{id:'2010/07/29',text:'Thur'},
{id:'2010/07/30',text:'Fri'},
{id:'2010/07/31',text:'Sat'}
]
});

var panel = new Ext.Panel({
fullscreen:true,
items:[
{
xtype:'container',
layout:'vbox',
items:[sb,list]
}
]
});

panel.show();

}

});


When you try and filter it you get an error "Uncaught TypeError: Object false has no method 'call'"

ext-touch-debug.js


createMultipleFilterFn: function(filters) {
return function(record) {
var isMatch = true;

for (var i=0, j = filters.length; i < j; i++) {
var filter = filters[i],
fn = filter.fn,
scope = filter.scope;

isMatch = isMatch && fn.call(scope, record);


if (isMatch !== true) {
break;
}
}

return isMatch;
};
}



At this point I will take any advice.. You think you know what your doing and I keep hitting road blocks ...

A solution to this or a better one, anything so I can finish this today

danvega
25 Jul 2010, 11:16 AM
I solved this .. I was trying to think about how to do this in Sencha when really this is js or server side thing. Ill post an example later when I can pull it out of my app.