Sencha Touch 2：將數據從控制器傳遞到視圖

Question

我試圖從列表中加載項目公開的詳細信息視圖，但不使用NavigationView和“push（）”命令。

控制器 ：

Ext.define('App.controller.MyPlans', {
    extend: 'Ext.app.Controller',
    requires: ['App.view.EventDetail',
        'App.view.PlansContainer'],

    config: {
        refs: {

        },
        control: {
            'MyPlansList': {
                disclose: 'onDisclose'
            }
        }
    },

    onDisclose: function (view, record) {
        console.log("My Plans list disclosure " + record.get('id'));
        var eventDetailView = Ext.create('App.view.EventDetail');
        eventDetailView.setRecord(record);
        Ext.Viewport.setActiveItem(eventDetailView);
    }
});

視圖：

Ext.define('App.view.EventDetail', {
    extend: 'Ext.Panel',
    xtype: 'EventDetail',

    config: {

        items: [{
            xtype: 'toolbar',
            docked: 'top',
            title: 'Event Name',
            items: [{
                xtype: 'button',
                id: 'addRunBackBtn',
                ui: 'back',
                text: 'Back'
            }]
        }, {
            xtype: 'panel',
            styleHtmlContent: true,
            itemTpl: [
                '<h1>{name}</h1>',
                '<h2>{location}</h2>',
                '<h2>{date}</h2>']
        }],

    }
});

我基本上試圖使用“setRecord（）”命令將數據傳遞給視圖，但似乎沒有任何東西在視圖中加載。 有什么想法嗎？？

謝謝

Answer 1

而不是ItemTpl只是寫Tpl。 我懷疑itemTpl是否存在沒有列表xtype。

其他的事情是把Tpl放在配置中：

{tpl:['<div class="ListItemContent">{descriptionddata}</div>']}

我之前/之上的答案是好的，但如果你打算將格式保留在視圖中而不是在控制器中，那么它的工作方式是使用setData而不是setRecord

detailview.setData({title:record.get('title'), description:record.get('descriptiondata')});

Answer 2

我在這里發現了這個問題：

面板沒有itemTpl

{
    xtype: 'panel',
    styleHtmlContent: true,
    itemTpl : [
        '<h1>{name}</h1>',
        '<h2>{location}</h2>',
        '<h2>{date}</h2>'
    ]
}

可能的方法之一可能是：

更改視圖：

{
    xtype: 'panel',
    id: 'thePanel',
    styleHtmlContent: true
}

更改控制器：

onDisclose: function(me, record, target, index, e, eOpts) {
  ... 
  Ext.getCmp('thePanel').setHtml('<h1>'+record.get('name')+'</h1><h2>'+record.get('location')+'</h2><h2>'+record.get('date')'</h2>'); //For setting the Data
  ...
}

希望這可以幫助！

Answer 3

而不是面板嘗試列表如下

Ext.define('App.view.EventDetail', {
    extend: 'Ext.TabPanel',
    xtype: 'EventDetail',
    config: {
        items: [{
            xtype: 'toolbar',
            docked: 'top',
            title: 'Event Name',
            items: [{
                xtype: 'button',
                id: 'addRunBackBtn',
                ui: 'back',
                text: 'Back'
            }]
        }, {
            xtype: 'list',
            styleHtmlContent: true,
            itemTpl: [
                '<h1>{name}</h1>',
                '<h2>{location}</h2>',
                '<h2>{date}</h2>']
        }],
    }
});