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); 

у вас уже есть все, что нужно в record аргумента onItemTap метода. Таким образом, вам, вероятно, не нужно будет получать его из магазина снова.

Важнейшее значение вещь, для этого нужно работать, вам нужно добавить template к вашему компоненту. как следующая

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

Здесь {name} будет отображать значение, передаваемое от контроллера.

Это определенно сработает. Попробуй. И в качестве примечания, вместо того, чтобы использовать component, чтобы показать детали, используйте panel. Компонент более общий. Таким образом, вы можете использовать панель вместо этого.