在 Sencha Touch 2 中，record.data 未将数据从控制器传递到嵌套组件

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 会相互重叠。

所以如果你想像这样实现面板的数据：

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 以获得更多帮助。

也许我对您的问题的理解有误，但希望这会有所帮助:)