How to display a single page of dynamic data

[acasaccia]

Hi everybody, from the sencha documentation I see that the folllowing are the components which can be bound to a store:

Store-bound components

• Ext.dataview.DataView
• Ext.Carousel
• Ext.List
• Ext.NestedList

What if I have to show a single component with data taken from a single element in a store? I tried instantiating a component and using tpl and data but with no success so far. data config is supposed to be retrieved dynamically from the first element of the store, but the function is never executed. This is the code:

Ext.define('MyApp.view.Featured', {
    extend: 'Ext.Container',
    config: {
        layout: 'fit',
        items: [
            {
                xclass: 'Ext.TitleBar',
                docked: 'top',
                title: 'Featured'
            },
            {
                xclass: 'Ext.Component',
                styleHtmlContent: true,
                tpl: ['<h5>{creazione}</h5>' +
'<h3>{titolo}</h3>' +
'<p>{abstract}</p>'].join(''),
                data: function() {
                    console.log('here'); // these are never executed
                    debugger;
                    var data = {};
                    Ext.getStore('Featured').load({
                        scope: this,
                        callback: function(records, operation, success) {
                            if (success) {
                                data = Ext.getStore('Featured').first().getData();
                            }
                        }
                    });
                    return data;
                }
            }
        ]
    }
});

If I use a list with only one element and bind it to the "Featured" store, all works correctly, but I don't see why I should instantiate a list component when I want to display a single one.

Thanks in advance for your answers.

[SebasSP]

This has confused me for a while as well. Now I get a reference to the view in the controller and also retreive my data there. I then call

this.getMyView().setData({ /*data object here*/ })

This works, but I'd still like to know the best practice for dynamically displaying a single data item.

[acasaccia]

Thank you SebasSP for sharing your experience. I ended up using a DataView instead of a Component. It renders itself nicely and I can use a Store transparently like I would have done with a List.
Still, a thought on this topic from one of the framework developers would be welcome