0

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

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

4

1 回答 1

1

首先在控制器中添加新的参考 -

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

这将为您getter提供 sencha touch 提供的现成产品，包括以下内容 -

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

于 2013-04-03T09:45:55.263 回答