コントローラからの呼び出しでSencha XTemplatesの問題が発生する

Question

XTemplatesとMVC構造体を使用するのに問題があります。私はチュートリアルのいくつかを見てきましたが、それ自体は意味がありますが、私が達成しようとしているものにそれらを適用しようとすると、うまくいきません。

まず、私のアプリはTabBarMVCといくつかのビューで構成されています。一部のビューには「サブビュー」があります。私はアプリを「レイアウト」の観点から操作しています。タブはタブで表示され、ビューはサブビューにアクセスできます。今問題はサブビューにデータを送信することです。

例は、Billページの詳細ページです。請求書ページでは、ユーザーは、法案を分割するために合計と人数を入力することができます。私のコントローラーは、両方のパラメーターを取り、それらを分割し、それらを「ゲスト」オブジェクトに保管します。ゲストオブジェクトは1-x個のゲストオブジェクトの配列になります。 （分割する数に基づいて）。

次に、そのオブジェクトをサブビューの更新メソッドに送信して、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);  
}