Sencha Touch2：带有布局 vbox 的 Container 内的列表和详细信息面板

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 -

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

这会给你一个现成的getter 由 sencha touch 提供，并带有以下内容-

var panel =  this.getDetailsPanel();

然后把你的onItemTap方法改成following --

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 来显示详细信息，而是使用 panel 。组件更通用。所以你可以改用面板。