List XTemplate Question

[danvega]

Working on a list that will be grouped by start times.

--------------------------
9:00 AM - 10:00 AM
--------------------------
Class
Presenter
--------------------------
Class
Presenter
--------------------------
Class
Presenter
--------------------------
10:30 AM - 11:30 AM
--------------------------
Class
Presenter
--------------------------
Class
Presenter


My question using XTemplate how can I style/group the headers



// Data Model
Ext.regModel('Schedule', {
fields: ['start','end','class','presenter']
});


var tpl = new Ext.XTemplate(
'<tpl for=".">',
'<tpl if="">',
'<div class="group-header">',
'{start} - {end}',
'</div>',
'</tpl>',
'<div class="schedule">',
'<strong>{class}</strong><br/>',
'{presenter}',
'</div>',
'</tpl>'
);



I tried using the following for the if statement based on the docs but it didn't like it



<tpl if="{[values.start === parent.start]}">

[TommyMaintz]

I would suggest using the grouping capabilities in List. Look at examples/list/ for an example on how to group your store / list. Then you can customly style the headers to look the way you want.

[danvega]

Ok this makes a lot more sense now that I understand how the groupString works. With that said I am not sure how am going to order my list. My list has a start time and end time. Originally I wanted to be able to group by

Start - End

------------------------
9:00 AM - 10:30 AM
------------------------
Session 1
Session 2

------------------------
9:00 AM - 10:30 AM
------------------------
Session 1
Session 2

------------------------
9:00 AM - 10:30 AM
------------------------
Session 1
Session 2
------------------------
11:00 AM - 12:00 PM
------------------------

But because its sorting on a single field I am fine if it just has the start time



getGroupString: function(record){
return record.get('StartTime');
}


Still this is not going to work though because 1:00 PM comes before 9:00 AM as far as strings go. Does anyone have a way to fix this ?

[evant]

Use the same principal as here:



Ext.setup({
tabletStartupScreen: 'tablet_startup.png',
phoneStartupScreen: 'phone_startup.png',
icon: 'icon.png',
glossOnIcon: false,
onReady : function() {
Ext.regModel('Contact', {
fields: [{
name: 'firstName',
sortType: function(val){
return parseInt(val);
}
}, 'lastName']
});

var groupingBase = {
tpl: '<tpl for="."><div class="contact"><strong>{firstName}</strong> {lastName}</div></tpl>',
itemSelector: 'div.contact',

singleSelect: true,
grouped: true,
indexBar: true,

store: new Ext.data.Store({
model: 'Contact',
sorters: 'firstName',

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

data: [
{firstName: '10', lastName: 'Maintz'},
{firstName: '9', lastName: 'Spencer'},
{firstName: '8', lastName: 'Avins'},
{firstName: '7', lastName: 'Conran'}
]
})
};

if (!Ext.platform.isPhone) {
new Ext.List(Ext.apply(groupingBase, {
floating: true,
width: 350,
height: 350,
centered: true,
modal: true,
hideOnMaskTap: false
})).show();
}
else {
new Ext.List(Ext.apply(groupingBase, {
fullscreen: true
}));
}
}
});


Notice what happens if you remove the sortType.

[danvega]

And that makes total sense to me but I don't see how you can define some kind of compare function. It lookes like this method is just return a type.

The values I have are

9:00 AM
9:00 PM
10:30 AM

Parsing this into an integer is not going to work. Does anyone have an example of actually implementing a compare function?

[evant]

Course you can!



var re = /(\d{1,2}):(\d{2}) (AM|PM)/;
var result = '11:59 PM'.match(re);

var pm = result[3] == 'PM',
hours = (parseInt(result[1]) * 60) + (pm ? 12 * 60 : 0),
mins = parseInt(result[2]);

var total = hours + mins;
console.log(total);

[danvega]

That worked out great, thank you for the help.

I guess I just don't understand where you got that from though. When I look at the docs for Model

http://www.sencha.com/deploy/touch/docs/?class=Ext.data.Model

I don't see any mention of sortType: function() { }