Sencha XTemplates가 컨트롤러에서 호출 할 때 발생합니다.

Question

XTemplates 및 MVC 구조에 어려움이 있습니다. 몇 가지 자습서를 살펴 보았지만 그 자체로는 의미가 있지만 내가 성취하고자하는 대상에 적용하려고 할 때 잘 수행되지 않습니다.

우선 내 앱은 TabBarMVC와 여러 개의보기로 구성됩니다. 일부보기에는 '하위보기'가 있습니다. 나는 애플 리케이션을 '레이아웃'관점에서 작업하게한다. 탭은 탭 이동이고 뷰는 하위 뷰에 액세스 할 수 있습니다. 이제 문제는 데이터를 하위 뷰로 보냅니다.

예를 들어 내 청구서 페이지 세부 정보 페이지입니다. 청구서 페이지에서 사용자는 청구서를 분할 할 총 및 수를 입력 할 수 있습니다. 내 컨트롤러는 두 매개 변수를 모두 가져 와서이를 '게스트'객체에 저장합니다. 내 손님 객체는 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);  
}