Sencha Touch 2.3:将数据从列表视图推送到详细视图

时间:2014-07-22 15:35:47

标签: extjs sencha-touch sencha-touch-2.2 sencha-touch-2.3

所以我做了一个简单的列表组件视图。当我点击列表的公开按钮时,我有一个控制器,它将创建一个详细视图,该视图还将有关该相应列表的数据推送到详细视图中,以便在tpl属性中使用。

这是我的代码: 应用程序/视图/主:

Ext.define ('Prac.view.Main', {
extend: 'Ext.Panel',
xtype: 'mainpanel',
requires: ['Prac.store.Names'],

config:{
    layout: 'vbox',

    items: [
        {
            xtype: 'titlebar',
            docked: 'top',
            title: 'Mainpanel',
            items: [
                {
                    xtype: 'button',
                    ui: 'confirm',
                    iconCls: 'add',
                    action: 'addName',
                    align: 'right'
                }
            ]
        },
        {   
            xtype: 'list',
            flex: 1,
            grouped: true,
            indexBar: true,
            itemTpl: '{firstName} {lastName}',
            store: 'Names',
            onItemDisclosure: true,
        }
    ]
}       

});

应用程序/控制器/主:

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

config: {
    refs: {
        view: 'viewpanel',
        det: 'detail'
    },
    control: {
        'list' : {
            disclose: 'showDetail'
        }
    }    
},
showDetail: function(list, record) {
    var det = Ext.create('Prac.view.Detail', {
       data: record.data 
    });
    Ext.Viewport.setActiveItem(det);
}

});

应用程序/视图/详情:

Ext.define('Prac.view.Detail', {
extend: 'Ext.Panel',
xtype: 'detail',

config: {
    items: [
        {
            xtype: 'titlebar',
            title: 'Detail View',
            docked: 'top'
        },
        {
            xtype: 'panel',
            styleHtmlContent: true,
            scrollable: 'vertical',
            title: 'Details',
            //html: 'Hello, World!'
            tpl: 'Hello {firstName} {lastName}',
            data: null
        }
    ]
}

});

我认为问题可能是范围的。由于tpl属性嵌套在'项目中。属性而不是配置,组件无法使用从控制器传递到详细视图的数据。所以我不知道如何将数据从一个视图推送到另一个视图,而是如何将数据从一个视图推送到另一个视图中的特定组件。

1 个答案:

答案 0 :(得分:0)

你是对的。您没有设置嵌套面板的数据,而是设置Prac.view.Detail的数据。

Data是面板的配置属性。这意味着sencha将为您创建setData()方法。当您在内部使用此方法时,将分别调用applyData()updateData()

在你的情况下,这应该有效:

Ext.define('Prac.view.Detail', {
    extend: 'Ext.Panel',
    xtype: 'detail',

    config: {
        items: [
            {
                xtype: 'titlebar',
                title: 'Detail View',
                docked: 'top'
            },
            {
                xtype: 'panel',
                styleHtmlContent: true,
                scrollable: 'vertical',
                title: 'Details',
                //html: 'Hello, World!'
                tpl: 'Hello {firstName} {lastName}',
                data: null
            }
        ]
    },

    updateData: function ( newData, oldData ) {
        var nestedPanel = this.down( 'panel' );
        nestedPanel.setData( newData );
    },

    applyData: function ( newData, oldData ) {
        var nestedPanel = this.down( 'panel' );
        nestedPanel.setData( newData );
    }
});

因此,当设置Prac.view.Detail的数据时,将调用applyData方法并且它会抓取嵌套面板来设置其数据。