DataView - Question for understanding

[slngr]

Hello,

I have a question about the DataView component in ST. Created it like this:

Ext.define('App.view.HomeDataView', {    extend: 'Ext.DataView',
    xtype: 'home_dataview',
        
    config: {


        defaults: {
            styleHtmlContent: true
        },
      
        // Store declaration for tile data
        store: 
			{
			  fields: ['id', 'name', 'img_url'], 
			  data: [
				{id: 'tile1', name: 'Blog', img_url: 'img/thumbnail.png'},
				{id: 'tile2', name: 'Style Filter', img_url: 'img/thumbnail.png'}
			  ] 
			}
		,
        
		itemTpl: '<h1>test</h1><h2>{name}</h2>'
    },


    initialize: function() {
        console.log('>> Home_DATA_VIEW [created]');
		var data = this.getStore().data.items[0];
		console.log(data);
        this.callParent();
    },
});

Everything works like a charm, but if I comment the following two lines out:

//var data = this.getStore().data.items[0];
		//console.log(data);

I get an error like this:

Uncaught TypeError: Object [object Object],[object Object] has no method 'each'

Why does this happen? Must the DataView initialized? Where should I initialize the DataView in MVC architecture?

Thank you

[mitchellsimoens]

Looks like this is because the store hasn't translated the data array into a valid Ext.util.MixedCollection yet. I would caution you that you could be sharing the same store for any instance of that class if you define it like that.

[slngr]

Well is there a better solution or declaration? Sorry my english is not the best and I don't really understand what's wrong here. Want to make a clean DataView in MVC.

Is my solution the only one possible, or should I change it into another one?

[mitchellsimoens]

You can set the store in initialize

[slngr]

Could you be so kind and give a little code example again? How do I setup the store in the DataView initialize function?

[mitchellsimoens]

it kind of depends on when the store is applied to the dataview. For instance you shouldn't do this:

initialize: function() {
    this.store = Ext.create('Ext.data.Store', {...});

    this.callParent(arguments);
}

You should use the setStore

initialize: function() {
    this.setStore(Ext.create('Ext.data.Store', {...}));

    this.callParent(arguments);
}