Sencha XTemplates issue with call from controller - sencha-touch

Question

I am having some difficulty with XTemplates and using the MVC structure. I have went through a few of the tutorials and by themselves they make sense but when I try to apply them to what I am trying to accomplish it does not work that well.
First off, my app consists of TabBarMVC and several views. Some of the views will have 'sub views'. I have the app working from a 'layout' perspective. Tabs are tabbing and views can access subviews. Now the issue is sending data to subviews.
An example is my Bill page to Detail page. In the bill page a user can enter a total and number of people to split the bill against. My controller takes both parameters and divides them and stores them in a 'guests' object. My guests object will be an array of 1-x number of guest objects. (based on the number to split).
I then send that object to an update method in my sub view to update a XTemplate but that is not happening. I can alert the object, and view the data in debugger but I do not know how to update the Xtemplate.
Here is the controller code:
splitdetail: function(options)
{
if ( ! this.splitdetailView)
{
var totalBill = options.data['totalBill'];
var numGuests = options.data['splitBy'];
var totalPerGuest = totalBill / numGuests;
var guestObject = new Array();
var theGuest;
for (var i=0; i<numGuests; i++) {
theGuest = {amount: totalPerGuest}
guestObject.push(theGuest);
}
app.views.calculatorSplitDetail.updateWithRecord(guestObject);
this.splitdetailView = this.render({
xtype: 'CalculatorSplitDetail',
switchAnimation: { type: 'slide'}
});
}
this.application.viewport.setActiveItem(this.splitdetailView, 'slide');
},
and here is my split detail
var guestTemplate = new Ext.XTemplate(
'<tpl for=".">',
'<div class=" x-field guest-amount-row x-field-number x-label-align-left">',
'<div class="x-form-label" style="width: 30%; ">',
'<span>Total bill</span>',
'</div>',
'<div class="x-form-field-container">',
'<input type="number" name="totalGuestAmount" class="x-input-number" value="{amount}">',
'</div>',
'</div>',
'</tpl>'
);
app.views.CalculatorSplitDetail = Ext.extend(Ext.form.FormPanel, {
initComponent: function() {
Ext.apply(this, {
scroll: false,
items: [
guestTemplate,
]
});
app.views.CalculatorSplitDetail.superclass.initComponent.call(this);
},
styleHtmlContent: true,
baseCls: 'calculator-splitdetail-panel',
updateWithRecord: function(record) {
guestTemplate.apply(record);
alert(record[0].amount);
}
});
Ext.reg('CalculatorSplitDetail', app.views.CalculatorSplitDetail);

Answer 1

guestTemplate is just a template, not a control, so it can't refresh itself, but it can generate new html for you. So all you need to do is update your panel with newly generated html:
updateWithRecord: function(record) {
this.update(guestTemplate.apply(record));
alert(record[0].amount);
}