Sencha XTemplates 与来自控制器的调用出现问题

Question

我在使用 XTemplates 和使用 MVC 结构时遇到一些困难。我已经完成了一些教程，它们本身是有意义的，但是当我尝试将它们应用到我想要完成的任务时，效果并不那么好。

首先，我的应用程序由 TabBarMVC 和几个视图组成。某些视图将具有“子视图”。我让应用程序从“布局”的角度工作。选项卡是选项卡，视图可以访问子视图。现在的问题是将数据发送到子视图。

一个例子是我的“账单”页面到“详细信息”页面。在账单页面中，用户可以输入要分摊账单的总人数和人数。我的控制器获取这两个参数并将它们分开并将它们存储在“客人”对象中。我的 guest 对象将是一个包含 1-x 个 guest 对象的数组。 （基于要拆分的数量）。

然后，我将该对象发送到子视图中的更新方法以更新 XTemplate，但这并没有发生。我可以警告对象，并在调试器中查看数据，但我不知道如何更新 Xtemplate。

这是控制器代码：

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');
},

这是我的拆分详细信息

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 只是一个模板，不是一个控件，所以它不能刷新自己，但它可以为你生成新的 html。因此，您需要做的就是使用新生成的 html 更新面板：

updateWithRecord: function(record) {
    this.update(guestTemplate.apply(record));
    alert(record[0].amount);      
}