record.data not passing data from controller to nested component in view in Sencha Touch 2

Question

I have the following code in which I am trying to pass a list item's record to a detail view using a controller. No data gets passed and nothing is displayed in the detail view.

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 (controller: I have tried both record.data (as seen in many examples across code) and 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 (model):

Ext.define('EventsTest.model.Venue', {
    extend: 'Ext.data.Model',

    config: {
        fields: ['name', 'distance']
    }
});

Venues.js (store):

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

    }
});

Eli · Accepted Answer · 2013-01-01T05:08:56.233

I think your tpl should placed outside items in your Mainview.js like this:

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

Hope it will works :)

EDIT

Ok, I'm not sure you can do it directly in your view or not since I'm actually not experienced too much in sencha touch but another way to follow your requirement is achieve it through your controller.

So if your items look like this:

items: [
    {
         xtype: 'panel',
         itemId: 'panel',
         flex: 1
    }
]

I'd suggest you using itemId instead of id since if you've multiple elements with the same id, sooner or later your application will broken since same id will overlap each other function.

So if you want to achieve data of your panel like this:

tpl: '<tpl for="."><h3>{name}</h3><br /><p>{distance}</p></tpl>',

Then in you can set your panel's data like following in your controller:

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

Here I'm using component queries to refer to the itemId of the panel and set it data. You can check out Ext.ComponentQuery for more help.

Maybe I'm understand wrongly about your question but hope this helps :)

That does work, but I am trying to get the data passed into nested components within the container component (the view). Is there another way to do this? — M Azam, Dec 31 '12 at 18:37

record.data not passing data from controller to nested component in view in Sencha Touch 2

1 Answers1