Question

您好我是sencha touch2的新手，在一个容器中，我在左侧显示一个列表，在右侧显示详细视图。现在想要显示列表的cliked item文本的详细布局。这是我的观点。

   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'
}

这将为您提供由sencha touch提供的现成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来显示详细信息。组件更通用。所以你可以改用面板。

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

1 个答案: