Question

Inside my Controller i have function that runs after user clicks on item, which loads a store and creates/populates TabPanel with DataView (it works). When user clicks on only one specified item (if clause) i want to split store and create 2 panels with 2 DataViews. How can i pass custom parameter (record.data.name) to store listener so i could check which item was clicked? Or maybe there is different method to achieve what i want? Here is code of my Controller:

init: function() {
    this.control({
        'gallery_menu': {
            itemclick: this.show_gallery
        }
    });
},
imageStoreLoaded: function(ImageStore, store1, store2) {


},
show_gallery: function(view, record, item, index, e, opts) {


    Ext.getCmp('hania-viewport').setLoading('Loading data...');

    var tabb = Ext.ComponentQuery.query('.gallery_panel');

    var ImageStore = Ext.create('Gallery.store.Images');

    ImageStore.load({url: 'myphoto/index.php/api/feed/json/' + record.data.uuid});

    var gallery_view;

    if (record.data.name == 'Specified_item1') {
        var store1 = Ext.create('Gallery.store.Images');
        var store2 = Ext.create('Gallery.store.Images');

        //THIS WONT WORK - STORE IS NOT LOADED YET;
        ImageStore.each(function(r) {
                if (r.data.name.substring(0, 2) == 'PS') {
                    console.log('PS');
                    store1.add(r.copy());
                }else{
                    console.log('NOT PS');
                    store2.add(r.copy());
                }               
        });

        //IF I ADD LISTENER HOW CAN I RETURN/REFERENCE store1, store2 ???
        //OR how can i pass record.data.name so i could check which item was clicked?   
        ImageStore.addListener('load',this.imageStoreLoaded, this);

        var panel1 = Ext.widget('gallery_view', {
            title: 'xxx',
            autoScroll: true,
            store: store1,
            flex: 1
        });


        var panel2 = Ext.widget('gallery_view', {
            title: 'yyy',
            autoScroll: true,
            store: store2,
            flex: 2
        });

        gallery_view = Ext.create('Ext.panel.Panel',{
            id: record.data.uuid,
            title: 'abc',
            layout: {                   
                type: 'hbox',
                pack: 'start',
                align: 'stretch'
            },
            closable: true,
            autoScroll: true,
            items: [panel1, panel2]
        });

    }else{

        gallery_view = Ext.widget('gallery_view', {
            title: record.data.name + ' - Photo Gallery',
            id: record.data.uuid,
            closable:true,
            scrollable:true,
            autoScroll: true,
            store: ImageStore
        });
    }

     if (tabb[0].down('#' + record.data.uuid)) {
        tabb[0].setActiveTab(record.data.uuid);
     }else{
        tabb[0].add(gallery_view);
        tabb[0].setActiveTab(gallery_view);
     };

}

Answer 1

And the code:


show_gallery: function(view, record, item, index, e, opts) {


    Ext.getCmp('hania-viewport').setLoading('Loading data...');

    var tabb = Ext.ComponentQuery.query('.gallery_panel');

    var ImageStore = Ext.create('Gallery.store.Images');

    ImageStore.load({url: 'myphoto/index.php/api/feed/json/' + record.data.uuid});

    var gallery_view;

    if (record.data.name == 'Do kogo jestem podobna?') {
        var store1 = Ext.create('Gallery.store.Images');
        var store2 = Ext.create('Gallery.store.Images');

        function doStuff() {

            console.log(ImageStore);

            ImageStore.each(function(r) {
                if (r.data.raw_name.substring(0, 2) == 'PS') {
                    console.log('PS');
                    store1.add(r.copy());
                }else{
                    console.log('NOT PS');
                    store2.add(r.copy());
                }               
            });

            console.log(store1); 
            console.log(store2);
        }


        ImageStore.addListener('load',doStuff, this);

        var view1 = Ext.widget('gallery_view', {
            title: 'xxx',
            store: store1,
            flex: 1
        });

        var panel1 = Ext.create('Ext.panel.Panel',{
            title: 'Tata',
            items: view1,
            flex: 1
        });

        var view2 = Ext.widget('gallery_view', {
            //autoScroll: true,
            store: store2,
            flex: 1
        });

        var panel2 = Ext.create('Ext.panel.Panel',{
            title: 'Mama',
            items: view2,
            flex: 1
        });

        gallery_view = Ext.create('Ext.panel.Panel',{
            id: record.data.uuid,
            title: 'Do kogo jestem podobna?',
            width: 800,
            bodyStyle: 'padding: 25px;',
            layout: {                   
                type: 'hbox',
                pack: 'start',
                align: 'stretch'
            },
            closable: true,
            autoScroll: true,
            items: [panel1, panel2]
        });

    }else{

        gallery_view = Ext.widget('gallery_view', {
            title: record.data.name + ' - Photo Gallery',
            id: record.data.uuid,
            closable:true,
            scrollable:true,
            autoScroll: true,
            store: ImageStore
        });
    }

     if (tabb[0].down('#' + record.data.uuid)) {
        tabb[0].setActiveTab(record.data.uuid);
     }else{
        tabb[0].add(gallery_view);
        tabb[0].setActiveTab(gallery_view);
     };

}