Sencha Touch2：容器內部的列表和詳細面板與佈局盒vbox

Question

您好我是sencha touch2的新手，在一個容器中，我在右側顯示左側列表和詳細視圖。現在想要顯示列表中已粘貼項目文本的詳細布局。 這裏是我的看法。

Ext.define('TestApp.view.VboxEx',{ 
    extend:'Ext.Container', 
    xtype:'vbox_ex', 
    requires:['Ext.dataview.List'], 
    config:{ 
     layout:{ 
      type:'hbox' 
     }, 
     items:[ 
     { 
      docked:'top', 
      xtype:'titlebar', 
      title:'Vertical box' 
     }, 

      { 
       xtype: 'list', 
       id: 'mylist', 
       flex:1, 
       docked: 'left', 
       style:'background-color:lightgreen', 
       store: 'Training_data', 
       pinHeaders: false, 
       width: 331, 
       itemTpl: [ 
        '{name}' 
       ] 

      }, 

      { 
       xtype:'component', 
       flex:3, 
       id: 'myDetail', 
       html:'Flex3', 
       style:'background-color:lightyellow' 
      } 

     ] 

    } 


}); 

這裏是我的控制器：

Ext.define('TestApp.controller.MyController', { 
    extend: 'Ext.app.Controller', 
    config:{ 
     refs: { 
      listView: '#mylist' 
      }, 


     control: { 
      'listView': { 
       itemtap: 'onItemTap' 
      } 


     } 
    }, 

    onItemTap: function(view, index, target, record, event) { 
     console.log('Item was tapped on the Data View'); 
     var record = view.getStore().getAt(index); 
     var selectdValue = record.get('name'); 
     console.log('Selceted Item index: '+index); 
     console.log('Selceted Item value: '+selectdValue); 
     // here how can i change the text(selected value) in my detail panel ? 
    }, 

    onLaunch: function() { 
     console.log('onLaunch'); 
    } 
}); 

我怎樣才能做到這一點？誰能幫幫我嗎 ？謝謝。所有的

Answer 1

首先在控制器中添加新的裁判 -

refs:{ 
listView: '#mylist', 
detailsPanel : '#myDetail' 
} 

這會給你的煎茶觸摸與下面提供了一個現成的getter -

var panel = this.getDetailsPanel(); 

然後更改您onItemTap方法如下 -

onItemTap: function(view, index, target, record, event) { 
     console.log('Item was tapped on the Data View');  
     var selectdValue = record.get('name'); 
     console.log('Selceted Item index: '+index); 
     console.log('Selceted Item value: '+selectdValue); 
     // here how can i change the text(selected value) in my detail panel ? 

     this.getDetailsPanel().setData(record.getData()); 
    }, 

這會將數據設置爲您的myDetails組件。

細心觀察，我已經移除這個方法是一個線 -

var record = view.getStore().getAt(index); 

你已經擁有你onItemTap方法record參數所需要的一切。所以你可能不需要再次從商店中獲得它。

最重要的事情，爲此工作是，您需要將template添加到您的組件。像以下

 { 
      xtype:'component', 
      flex:3, 
      id: 'myDetail', 
      style:'background-color:lightyellow', 
      tpl: "<h2>{name}</h2>" 
     } 

這裏{name}將顯示從控制器傳遞的值。

這一定會奏效。嘗試一下。並且作爲一個附註，而不是使用component來顯示細節使用面板。組件更通用。所以你可以使用面板來代替。