Passing Data from Parent to child

[juandiegoh]

Hello, I'm trying to do something as simple as passing the Data from a parent to a child so the child can show the info that the parent has, I'm doing it but nothing happens and I only see an empty page.

This method calls the view, don't freak out about the code, I'm just practicing with this...

tapLevel2Button: function(button, e, options) {
        var movie1 = Ext.create('App.model.Movie', {
            image: './1.png',
            answer : 'raro 2',
            resolved: 'false',
        });


        var movie2 = Ext.create('App.model.Movie', {
            image: './2.jpeg',
            answer : 'raro 2',
            resolved: 'false',
        });


        var movie3 = Ext.create('App.model.Movie', {
            image: './3.jpeg',
            answer : 'raro 2',
            resolved: 'false',
        });


        var movie4 = Ext.create('App.model.Movie', {
            image: './4.jpeg',
            answer : 'raro 2',
            resolved: 'false',
        });


        this.getMainNavigation().push({
            xtype: 'moviescarousel',
            title: 'Level 2',
            data: [            
                movie1.data,
                movie2.data,
                movie3.data,
                movie4.data,
            ],
        });
    },

Inside the Carousel I have an item that is a DataView which I can't pass the data directly, I've tryed things like:

store: {
    fields: ['image'],
    data: this.getData(),
    itemTpl: '<div>{image}</div>',
},

or

store: {
    fields: ['image'],
    data: this.data,
    itemTpl: '<div>{image}</div>',
},

but neither of them actually worked. So I decided to do it when the page is activated, like this:

Ext.define('App.view.MoviesCarousel', {
    extend: 'Ext.carousel.Carousel',
    xtype: 'moviescarousel',


    requires: [
    'Ext.dataview.DataView',
    ],


    config: {
        styleHtmlContent: true,
        
        items: [
        {
            xtype: 'dataview',
            name: 'moviedataview',
            store: {
                fields: ['image'],
                itemTpl: '<div>{image}</div>',
            },
        },
        ],


        listeners: {
            activate : 'inicializar'
        },
    },


    inicializar : function() {
        var movieDataView = Ext.ComponentQuery.query('dataview[name=moviedataview]')[0];
        var datos = this.getData();
        movieDataView.getStore().setData(datos);
        movieDataView.refresh();
    }
});

Can anybody help me? How is this supposed to be done?

By the way, I'm trying to do something like this: http://stackoverflow.com/questions/8312571/image-gallery-using-sencha-touch

Is it so hard?

[Xan]

I have never tried having images in a store, just text. But the itemTpl: has always gone outside of the store: not inside.
example:
store: {
fields: ['img'],
data: [ {img: image.jpg}, {img: image2.jpg}, {img: image3.jpg} ]
},
itemTpl: {img}

[juandiegoh]

Thank you so much! It was so easy. I'm sorry my mistake!
I'm not trying to set images in the store, they are just the path to them...