Question

我有以下代码，我试图使用控制器将列表项的记录传递给详细视图。没有数据传递，详细信息视图中不显示任何内容。

Main.js：

Ext.define('EventsTest.view.Main', {
extend: 'Ext.navigation.View',
xtype: 'main',

requires: [
    'EventsTest.store.Venues',
    'Ext.dataview.List'
],

config: {
    items: [
        {
            xtype: 'list',
            id: 'venuesList',
            itemTpl: '{name}, {distance}',
            store: 'Venues',
            onItemDisclosure: true,
            styleHtmlContent: true
        }
    ]
}
});

MainView.js：

Ext.define('EventsTest.view.MainView', {
    extend: 'Ext.Container',
    xtype: 'mainView',

    config: {
        title: JSON.stringify(this.data),
        styleHtmlContent: true,

        scrollable: true,

        items: [
            {
                xtype: 'panel',
                tpl: '<tpl for="."><h3>{name}</h3><br /><p>{distance}</p></tpl>',
                flex: 1
            }
        ]
    }
});

Main.js（控制器：我已经尝试过record.data（在代码中的许多示例中看到）和record.getData（）

Ext.define('EventsTest.controller.Main', {
    extend: 'Ext.app.Controller',

    config: {
        refs: {
            venuesList: '#venuesList',
        },

        control: {
            venuesList: {
                disclose: 'showItemDetail'
            }
        }

    },

    showItemDetail: function(item, record) {
        item.up('navigationview').push( {
            xtype: 'mainView',
            data: record.getData()
        });
    }
});

Venue.js（模特）：

Ext.define('EventsTest.model.Venue', {
    extend: 'Ext.data.Model',

    config: {
        fields: ['name', 'distance']
    }
});

Venues.js（商店）：

Ext.define('EventsTest.store.Venues', {
    extend: 'Ext.data.Store',

    reqiures: [
        'EventsTest.model.Venue'
    ],

    config: {
        model: 'EventsTest.model.Venue',

        data: [
            { name: 'Johnny', distance: '5 km' },
            { name: 'Billy', distance: '6 km' },
            { name: 'Sarah', distance: '7 km' },
            { name: 'William', distance: '8 km' },
        ]

    }
});

Answer 1

我认为您的tpl应放在Mainview.js之外的项目中，如下所示：

Ext.define('EventsTest.view.MainView', {
    extend: 'Ext.Container',
    xtype: 'mainView',

    config: {
        title: JSON.stringify(this.data),

        styleHtmlContent: true,

        scrollable: true,

        tpl: '<tpl for="."><h3>{name}</h3><br /><p>{distance}</p></tpl>'

        items: [
            {
                // Define your items here
            }
        ]
    }
});

希望它能起作用：）

修改

好的，我不确定你是否可以直接在你的视野中进行，因为我实际上并没有太多经验，但是另一种遵循你的要求的方法是通过你的控制器实现它。

因此，如果您的商品看起来像这样：

items: [ { xtype: 'panel', itemId: 'panel', flex: 1 } ]

我建议您使用itemId而不是id，因为如果您有多个具有相同ID的元素，您的应用程序迟早会被破坏，因为相同的ID会相互重叠。< / p>
因此，如果您想要实现面板的数据，请执行以下操作：

tpl: '<tpl for="."><h3>{name}</h3><br /><p>{distance}</p></tpl>',

然后您可以在控制器中设置面板的数据，如下所示：

showItemDetail: function(item, record) { item.up('navigationview').push( { xtype: 'example42', data: record.data }); Ext.ComponentQuery.query('#panel')[0].setHtml('<h3>'+record.get('name')+'</h3>'+ '<br /><p>'+record.get('distance')+'</p>'); }

这里我使用组件查询来引用面板的itemId并设置数据。您可以查看Ext.ComponentQuery以获取更多帮助。

也许我对你的问题错误理解，但希望这会有所帮助：）

record.data在Sencha Touch 2中没有将数据从控制器传递到视图中的嵌套组件

1 个答案: