在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
            }
        ]
    }
});

希望它能工作:)

編輯

好的，我不確定您是否可以直接在您看來進行操作，因為實際上我對sencha touch沒有太多的經驗，但是滿足您要求的另一種方法是通過控制器來實現。

因此，如果您的商品如下所示：

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以獲得更多幫助。

也許我對您的問題有誤解，但希望能對您有所幫助