Sencha Touch 2.3: Pushing data from list view to detail view

Question

So I have made a simple list component view. When I tap a listing's disclosure button, I have a controller that will create a detail view that also pushes data about that respective listing into the detail view for use in a tpl property.

here is my code: app/view/Main:

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,
        }
    ]
}

});

app/controller/Main:

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

});

app/view/Detail:

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
        }
    ]
}

});

I think that the issue might be of scope. Since the tpl property is nested inside the 'items' property rather than the config, the component is unable to use the data passed to the detail view from the controller. So I am wondering not just how to push data from one view to another, but how to push data from one view to a specific component in another view.

score 0 · Accepted Answer · answered Jul 22 '14 at 18:50

You are absolutely right. You are not setting data of the nested panel, you are setting the data of the Prac.view.Detail instead.

Data is a config property of a panel. That means sencha will create a setData() method for you. When you use this method internally applyData() or updateData() will be called respectively.

In your case this should work:

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

So when one sets the data of the Prac.view.Detail the applyData method will be called and it grabs the nested panel to set its data instead.

Great, and the this.down() method seems to refers manipulates the DOM. — bdmike, Jul 25 '14 at 01:52

Sencha Touch 2.3: Pushing data from list view to detail view

1 Answers1