Sencha Touch 2.3 : 목록보기에서 자세히보기로 데이터 푸시

Question

그래서 간단한 목록 구성 요소보기를 만들었습니다. 목록의 공개 버튼을 탭하면 해당 목록에 대한 데이터를 tpl 속성에 사용할 세부 정보보기로 푸시하는 세부 정보보기를 만드는 컨트롤러가 있습니다. 응용 프로그램 /보기/홈페이지 : 여기

내 코드입니다

Ext.define ('Prac.view.Main', { 
extend: 'Ext.Panel', 
xtype: 'mainpanel', 
requires: ['Prac.store.Names'], 

config:{ 
    layout: 'vbox', 

    items: [ 
     { 
      xtype: 'titlebar', 
      docked: 'top', 
      title: 'Mainpanel', 
      items: [ 
       { 
        xtype: 'button', 
        ui: 'confirm', 
        iconCls: 'add', 
        action: 'addName', 
        align: 'right' 
       } 
      ] 
     }, 
     { 
      xtype: 'list', 
      flex: 1, 
      grouped: true, 
      indexBar: true, 
      itemTpl: '{firstName} {lastName}', 
      store: 'Names', 
      onItemDisclosure: true, 
     } 
    ] 
}  

}); 홈페이지

응용 프로그램/컨트롤러/:

Ext.define ('Prac.controller.Main', { 
extend: 'Ext.app.Controller', 

config: { 
    refs: { 
     view: 'viewpanel', 
     det: 'detail' 
    }, 
    control: { 
     'list' : { 
      disclose: 'showDetail' 
     } 
    }  
}, 
showDetail: function(list, record) { 
    var det = Ext.create('Prac.view.Detail', { 
     data: record.data 
    }); 
    Ext.Viewport.setActiveItem(det); 
} 

});

응용 프로그램 /보기/세부 사항 :

Ext.define('Prac.view.Detail', { 
extend: 'Ext.Panel', 
xtype: 'detail', 

config: { 
    items: [ 
     { 
      xtype: 'titlebar', 
      title: 'Detail View', 
      docked: 'top' 
     }, 
     { 
      xtype: 'panel', 
      styleHtmlContent: true, 
      scrollable: 'vertical', 
      title: 'Details', 
      //html: 'Hello, World!' 
      tpl: 'Hello {firstName} {lastName}', 
      data: null 
     } 
    ] 
} 

});

나는이 문제가 범위라고 생각합니다. tpl 속성은 config가 아닌 'items'속성에 중첩되어 있으므로 구성 요소는 컨트롤러의 상세보기에 전달 된 데이터를 사용할 수 없습니다. 그래서 한보기에서 다른보기로 데이터를 밀어 넣는 방법뿐만 아니라 한보기의 데이터를 다른보기의 특정 구성 요소로 푸시하는 방법도 궁금합니다.

Answer 1

당신이 옳습니다. 중첩 된 패널의 데이터를 설정하지 않고 대신 Prac.view.Detail의 데이터를 설정합니다.

데이터는 패널의 구성 속성입니다. 즉, Sencha가 setData() 메소드를 생성합니다. 이 메서드를 내부적으로 사용하면 applyData() 또는 updateData()이 각각 호출됩니다.

는 귀하의 경우에는이 작업을해야합니다 :

Ext.define('Prac.view.Detail', { 
    extend: 'Ext.Panel', 
    xtype: 'detail', 

    config: { 
     items: [ 
      { 
       xtype: 'titlebar', 
       title: 'Detail View', 
       docked: 'top' 
      }, 
      { 
       xtype: 'panel', 
       styleHtmlContent: true, 
       scrollable: 'vertical', 
       title: 'Details', 
       //html: 'Hello, World!' 
       tpl: 'Hello {firstName} {lastName}', 
       data: null 
      } 
     ] 
    }, 

    updateData: function (newData, oldData) { 
     var nestedPanel = this.down('panel'); 
     nestedPanel.setData(newData); 
    }, 

    applyData: function (newData, oldData) { 
     var nestedPanel = this.down('panel'); 
     nestedPanel.setData(newData); 
    } 
}); 

그래서 하나는 applyData 메소드가 호출 될 Prac.view.Detail의 데이터를 설정하고, 대신 데이터를 설정하는 중첩 된 패널을 잡고 때.