PDA

View Full Version : Performing Calculations on Template Values before display



lukefowell89
30 Nov 2010, 9:16 AM
Just wondering how I would go about performing calculations upon a value I am passing to a template before I want it to display.

Basically what I am doing is pulling dates on an online diary to a dataview, where I am placing all of the items upon the page based upon the time of their start. E.g. The diary starts at 8am until 9pm, So my idea is to take the "start time" and the "end time" from the database, the multiply the start time by 30 to get the pixels, then substract 8*30 which will place the item according to the 8am start time (rather than 00:00)

This part of it works and the items are placing in the right order (just as a basic start), but I want the div to span the length of the entry e.g. start 9:00, end 10:00 would be placed at 9*30 = 270 - (8*30) = 30. So i set top: 30.

Here is my code so far for the whole thing:


Ext.onReady(function(){

var dateStore = new Ext.data.JsonStore({
storeId: 'dateStore',
root: 'results',
id: 'dataStore',
phantom: false,
idProperty: 'id',
fields:['id','day','month','year','start_hour','start_minute','end_hour','end_minute','details','name']
});

var userStore = new Ext.data.JsonStore({
storeId: 'userStore',
root: 'results',
id: 'userStore',
autoLoad: true,
url: 'get-users.php',
phantom: false,
idProperty: 'id',
fields:['name']
});

var datePicker = new Ext.DatePicker({
listeners: {
select: function(e)
{
this.getDateInfo(e);
},
render: function(e){
this.getDateInfo(e);
}
},
getDateInfo: function(dateObj){

var day = dateObj.value.format('jS');
var month = dateObj.value.format('F');
var year = dateObj.value.format('Y');
var day_int = dateObj.value.format('d');
var month_int = dateObj.value.format('m');
var year_int = dateObj.value.format('Y');

Ext.Ajax.request({
url: 'get-date.php',
params: {day: day_int, month: month_int, year: year_int},
success: function(response)
{
var jsonData = Ext.util.JSON.decode(response.responseText);
if(jsonData.total > 0)
{
dateStore.loadData(jsonData);
}
datePicker.showDatePanel(jsonData, day, month, year);
},
failure: function(response)
{
datePicker.showErrorPanel(day, month, year);
}
});
},
showDatePanel: function(data,d,m,y)
{

if (data.total != 0) {
var day = data.results[0].day;
var month = data.results[0].month;
var year = data.results[0].year;

var details = data.results[0].details;
var name = data.results[0].name;

var datePanel = Ext.getCmp('detail-panel');
datePanel.removeAll();
datePanel.setTitle(d+' '+m+' '+y);
datePanel.add(new Ext.Panel({
id: 'datePanel',
frame: true,
height: 420,
items: new Ext.DataView({
store: dateStore,
tpl: new Ext.XTemplate(
'<tpl for=".">',
'<div class="diary-entry" style="background: #ffaaaa; margin: 10px; position:absolute; top:{start_hour * 30-8*30}; height:200px;">',
'<div><b>Name:</b> {name}</div>',
'<div><b>Details:</b> {details}</div></div>',
'</tpl>'
)

})
}));
datePanel.doLayout(d,m,y);
}
else
{
var datePanel = Ext.getCmp('detail-panel');
datePanel.removeAll();
datePanel.setTitle(d+' '+m+' '+y);
datePanel.add(new Ext.Panel({
id: 'datePanel',
frame: true,
height: 420,
items:{
html: 'Sorry no Entries today'

}
}));
datePanel.doLayout();
}
},
showErrorPanel: function()
{
var datePanel = Ext.getCmp('detail-panel');
datePanel.removeAll();
datePanel.add(new Ext.Panel({
title: 'Error',
html: 'Sorry, there has been a problem connecting to the database',
id: 'datePanel',
frame: true
}));
datePanel.doLayout();
}
});

var userKey = new Ext.Panel({
width: 177,
title: 'User Key',
style: {marginTop: '10px'},
minHeight: 100,
items: new Ext.DataView({
store: userStore,
tpl: new Ext.XTemplate(
'<tpl for=".">',
'<div style="background: #fff; padding: 10px;"><div style="float: left; background: #{colour}; width: 20px; height: 12px; margin-right: 5px;"></div><div style="float: left; font-size: 12px;"> {name}</div><div style="clear:both"></div></div>',
'</tpl>'
)
})
})

var viewport = new Ext.Viewport({
layout: 'border',
items: [{
region: 'west',
items: [datePicker, userKey],
collapsible: true,
width: 200,
title: 'Date Selector',
bodyStyle: {padding: '5px'},
collapseMode: 'mini',
frame: true
},{
region: 'center',
collapsible: true,
id: 'detail-panel',
bodyStyle: {padding: '10px'}
}],
bodyStyle: {padding: '10px'}
});
});


I would be very grateful if anyone could suggest better ways of using Ext to achieve the same thing. The only reason I am doing it this way, is I understand it, therefore can do things with it. By looking at another source code isnt going to help me unless I understand why things are done as they are.

Thanks

lukefowell89
30 Nov 2010, 9:18 AM
Oh Btw, I wanted to be able to do (End_time * 30) - (Start_time * 30) to get the height. I also realise that this only works when its a whole hour, and would probably do something like make the hours into minutes then divide by 2 or multiply by 0.5.

Condor
30 Nov 2010, 9:21 AM
So you are looking for:

{[(values.End_time * 30) - (values.Start_time * 30)]}

lukefowell89
1 Dec 2010, 1:11 AM
oh ok, so I can perform all my calculations between the {} ? Thanks

Condor
1 Dec 2010, 6:25 AM
No, look more closely. You can specify any javascript when using {[...]}.