Listview Sencha Touch2：带有布局vbox的容器内的列表和详图面板

您好，我是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');
    }
});

---

我怎样才能做到这一点？有人能帮我吗？谢谢。

首先在控制器中添加新的引用-

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

这将为您提供sencha touch提供的一个现成的getter

getter

，包括以下内容-

var panel =  this.getDetailsPanel();

然后将您的

方法更改为以下--

这将为
myDetails
组件设置数据

仔细看，我已经从这个方法中删除了一行-

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

在
onitemap
方法的
record
参数中，您已经拥有了所需的一切。所以你可能不需要再去商店买了

最重要的一点是，要使其发挥作用，您需要将
模板
添加到组件中。像下面

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

{
xtype:“组件”，
弹性：3，
id:'myDetail'，
样式：“背景色：浅黄色”，
tpl:“{name}”
}

这里
{name}
将显示从控制器传递的值

这肯定会奏效的。试试看。作为旁注，不要使用
组件
来显示详细信息，而是使用面板。组件更通用。所以您可以使用面板来代替。
您是否在控制器中添加了引用，并且组件是上面定义的组件？Refs指的是具有id
myDetail
的组件。谢谢。我怎样才能添加单独的面板（我的意思是说不同的屏幕）而不是列表项点击上的文本？
        {
            xtype:'component',
            flex:3,
            id: 'myDetail',
            style:'background-color:lightyellow',
            tpl: "<h2>{name}</h2>"
        }