Ext.application({
name: 'Fiddle',
launch: function() {
Ext.define('My.Example', {
extend: 'Ext.Panel',
tpl: new Ext.XTemplate(
'<table border=\'1\' width=\'100%\' height=\'100%\'>',
' <tr>',
' <th></th>',
' <th>$(000\'s)</th>',
' <th>%Sales</th>',
' </tr>',
' <tr>',
' <td>Sales:</td>',
' <td>{sales}</td>',
' <td> </td>',
' </tr>',
' <tr>',
' <td>COGS:</td>',
' <td>{cogs}</td>',
//' <td><tpl"this.cogsSales(cogs, sales)"/></td>',
' <td>{[this.cogsSales(values.cogs, values.sales)]}</td>',
' </tr>',
' <tr>',
' <td>Gross Profit:</td>',
' <td>{grossProfit}</td>',
' <td>{[this.profitSales(values.grossProfit, values.sales)]}</td>',
' </tr>',
'</table>', {
// XTemplate configuration:
disableFormats: true,
// member functions:
cogsSales: function(cogs, sales) {
return cogs / sales;
},
profitSales: function(grossProfit, sales) {
return grossProfit / sales;
}
})
});
var panel = new Ext.create('My.Example', {
data: {
sales: 0,
cogs: 0,
grossProfit: 0
},
renderTo: Ext.getBody()
});
var button = new Ext.create('Ext.button.Button', {
text: "click me",
listeners: {
click: function() {
panel.update({
cogs: 100,
grossProfit: 300,
sales: 500
});
}
},
renderTo: Ext.getBody()
});
}
});