2013-08-03 57 views
1

我想從控制器傳遞數據到現有的視圖,我試過以下但他們都不工作,我想傳遞一個數據,以便我可以顯示它一個現有的面板。從控制器傳遞數據到sencha現有的視圖tocuh

從控制器

1. Ext.Viewport.setActiveItem('profileinfo'); 
    Ext.Viewport.setData(record.data); 

2. Ext.Viewport.setActiveItem('profileinfo').setData(record.data); 

3. Ext.Viewport.setActiveItem('profileinfo', {data:record.data}); 

4. Ext.Viewport.setActiveItem({ xtype:'profileinfo', data:record.data}); 

其中profileinfo是那裏有一個titlebar面板,我顯示title{member_data}這是數據

loadList:function(me, index, target, record, e, eOpts){ 


     console.log(record.data.member_name); 

      Ext.Viewport.setActiveItem({ 
       xtype:'profileinfo', 
       data:record.data} 
      ); 



    } 

我可以在我的profileinfo面板的initialize看到的一部分功能data可用 但我無法使用訪問它210

initialize: function(){ 
     this.callParent(); 

     console.log("initialized"); 
     console.log(this.config.data); // able to see the data 
    } 

但數據沒有反映在面板

{ 

     xtype:'titlebar', 
     title:'{member_name}' // its displaying {member_name} text rather then data itself 


    } 

更新

這裏是profileinfo代碼

Ext.define('demo.view.ProfileInfo', { 
     extend: 'Ext.form.Panel', 
     xtype: 'profileinfo', 
     requires: [ 'Ext.TitleBar','demo.view.ProfileMemberInfo'], 
     config: { 


      layout:'vbox', 


      items: [ 

      { 
       xtype: 'titlebar', 
       title: 'demo', 
       cls: 'bms-bg-head', 
       height:'65px', 
       center:true, 
       html:'<div class="demo-mini-logo"></div>' 
      },{ 




        xtype:'label', 
        // nothing is visible here 
        html:'{member_name}' 



      }] 
     }, 

     initialize: function(){ 
      this.callParent(); 

      // record is visible 
      console.log(this.config.record); 





    } 

}); 

這裏控制器代碼

loadList:function(me, index, target, record, e, eOpts){ 



      Ext.Viewport.setActiveItem({ 
       xtype:'profileinfo', 
       record:record 
       } 
      ); 





    } 
+0

我更新了答案 – Viswa

回答

3

你說你越來越面板的initialize方法的數據,所以,你可以做到這一點

initialize: function(){ 
     this.callParent(); 
     console.log("initialized"); 
     var data = this.config.data; 
     this.down('titlebar').setTitle(data.member_data); 
} 

根據您的意見,您可以將數據設置爲面板,您setRecord

更新

不得不在FormPanel中的引用在你的控制器

config : { 
     refs : { 
      Profileinfo: 'profileinfo' 
     } 
    } 

在ProfileInfo鑑於

對於選擇標籤,我建議你給的itemId標記像這

{ 
    xtype:'label', 
    itemId: 'member' 
} 

在你的控制器loadList功能

如果您有字段(文本框,selectfield等)裏面FormPanel中,你可以使用setValues()爲我做如下設置數據。

但標籤不是一個字段,因此,您必須選擇它,然後用setHtml()設置數據

loadList:function(me, index, target, record, e, eOpts){ 

Ext.Viewport.setActiveItem({ xtype:'profileinfo'}); 

this.getProfileinfo().setValues(record.getData()); 

//As you posted in your question, I am assuming member label is child of Profileinfo 
this.getProfileinfo().getComponent('member').setHtml(record.getData().member_name) 

} 

最重要的是

屬性或字段在record應該匹配的名稱然後只有setValues()工作。

如果您在frompanel

有場這樣
{ 
    xtype: 'textfield', 
    label: 'First Name', 
    name: 'Firstname' 
} 

record.getData()應該有它Firstname財產。


更新面板與TPL

設置數據可以說,你有面板這樣

Ext.define('MailApp.view.MessageDetails', { 
    extend: 'Ext.Panel', 
    xtype: 'messageDetails', 
    config: { 
     items : [{ 
       xtype: 'titlebar', 
       docked: 'top', 
       itemId: 'detailsTitle' 
       }, 
      { 
      xtype : 'panel', 
      itemId : 'details', 
      tpl : new Ext.Template(
      '<div class="details">', 
      '<p>From : {from}</p>', 
      '<p>Subject : {subject}</p>', 
      '<p>Message : {message}</p>',     
      </div>' 
      ) 
     }] 
    } 
}); 

在你的控制器loadList功能

loadList:function(me, index, target, record, e, eOpts){ 
var data = record.getData(); 

Ext.Viewport.setActiveItem({ xtype:'messageDetails'}); 

// Don't forget to put refference to work this.getMessageDetails() 

this.getMessageDetails().getComponent('details').setData(data); 

this.getMessageDetails().getComponent('detailsTitle').setHtml(data.detailsTitle) 

} 

當您打印的console.log(record.data()),你應該有

Object {from: "Apple", subject: "welcome", message: "Apple welcomes you to mail app", detailsTitle: " Mail Deatils", id: "ext-record-1", xindex: 1} 

我的意思是性能應該與第三方物流領域。

這是你可以使用tpl在面板的自定義HTML中設置數據。

+0

有無論如何設置它使用'{member_name}'因爲我有其他組件設置,即使你建議的代碼也不起作用 – Hunt

+0

你的意思是不工作..你得到任何錯誤或者它設置爲undefined? – Viswa

+0

沒有錯誤,但數據未顯示 – Hunt

相關問題