Store updates, but dataview doesn't until I refresh page

[riyaad]

Hello World

I have a tabpanel with 3 panels: dataview (Schedule), form (Settings) & panel (About). When the user updates his/her Settings, the store is updated/filtered accordingly. The store is tied to the dataview. Problem is that I need to explicitly refresh the page (click browser's refresh) in order to display the new filtered data. Could someone please assist? I'm not sure where I'm going wrong here.

Store ..

Ext.define('MyApp.store.Movies', {
   extend: 'Ext.data.Store',


    config: {
        model: 'MyApp.model.Movie',
        autoLoad: true,


        proxy: {
            type: 'ajax',
            url: 'data/json',
            reader: {
                type: 'json',
                rootProperty: 'MovieSchedule'
            }
        },


//        timedout: 1000,


        listeners: {


//            exception: function() {
//                console.log('we are offline');
//            },


            load: function() {


                var since;
                var bouquet;
                var rated;


                var offline   = Ext.getStore('MoviesOffline');
                var userstore = Ext.getStore('User');


                userstore.each(function(record) {
                    since   = record.get('since');
                    bouquet = record.get('bouquet');
                    rated   = record.get('rated');
                });


                console.log('we\'re looking for ' + since + ', ' + bouquet + ' and ' + rated);


                offline.filter([
                    {
                        // Bouquet filter
                        property: 'bouquets',
                        value: bouquet,
                        anyMatch: true,
                        caseSensitive: true
                    },
                    {
                        // Movies made since filter
                        filterFn: function(item) {
                           return item.data.release_date >= since;
                       }
                    },
                    {
                        // Movies rated at least filter
                       filterFn: function(item) {
                           return item.data.score >= rated;
                       }
                    }
                ]);


                offline.load();


                this.each(function(record) {
                    offline.add(record.data);
                });


                offline.sync();


                console.log('Updated: Offline store now has ' + offline.getCount() + ' items!');
            }
        }
    }
});

Ext.define('MyApp.view.Schedule', {                                                 
    extend: 'Ext.Panel',                                                            
    xtype: 'schedule',                                                              
    //id: 'schedule',                                                               
                                                                                    
    config: {                                                                       
        title: 'Schedule',                                                          
        iconCls: 'bookmarks',                                                       
        fullscreen: true,                                                           
                                                                                    
        layout: {                                                                   
            type: 'fit'                                                             
        },                                                                          
                                                                                    
        items: [                                                                    
            {                                                                       
                xtype: 'titlebar',                                                  
                title: 'Schedule',                                                  
                docked: 'top'                                                       
            },                                                                      
            {                                                                       
                xtype: 'dataview',                                                                                                    
                padding: '5px',                                                     
                store: 'MoviesOffline',                                             
                itemTpl: tpl,                                                       
                itemCls: 'movie-entry',                                             
                style: {                                                            
                    background: 'black'                                             
                }                                                                   
            }                                                                       
        ]                                                                           
    }                                                                               
});

Tab panel

xt.define('MyApp.view.Main', {
    extend: 'Ext.tab.Panel',
    xtype: 'main',


    requires: [
        'MyApp.view.About',
        'MyApp.view.Welcome'
    ],


    config: {
        itemId: 'main',
        fullscreen: true,
        tabBarPosition: 'bottom',


        items: [
            {
                xtype: 'schedule',


                listeners: {
                    // or activate?
                    show: function() {
                        console.log('Schedule now active ..');


                        //Ext.getCmp('dataview').refresh()


                    }
                }
            },
            {
                xtype: 'settings'
            }
        ]
    },


    // this section selects the 3rd tab panel


    initialize: function() {
        main = this;
        App.getCorrectPanel();
        main.callParent(arguments);
    }
});

[mitchellsimoens]

Two things...

You shouldn't use the fullscreen config for child items.

You are creating a global variable 'main' in your tab panel. Add 'var ' before it.

[riyaad]

Hi Mitchell

Thank you for your response (really appreciated)...also been reading this link
Just a note that changing

main = this;

to

var main = this;

results in the following error: "Uncaught ReferenceError: main is not defined"

That said, I know that my dataview is tied to my store (data is being displayed), the problem though is that when the store is filtered, the dataview doesn't get updated. I need to refresh the browser in order to get the new filtered data displaying. Any ideas?

[riyaad]

Ideas, suggestions - greatly appreciated

[robert_k]

Riyaad,

Are you using the reference to "main" anywhere else in your project, and expecting the same object? By adding

var main = this;

you scope it locally to the function (naturally this denies it from other scopes).

[riyaad]

Hi Robert,

I am, in (bold below)

Ext.application({
    name: 'MyApp',


    models: [ 'Movie', 'Bouquet', 'Rated', 'Since', 'User' ],
    views: [ 'Main', 'Schedule', 'Movies', 'Settings', 'Form', 'Details' ],
    controllers: [ 'Details', 'Settings' ],
    stores: [ 'Movies', 'MoviesOffline', 'Bouquet', 'Rated', 'Since', 'User' ],


    launch: function(){
        Ext.create('MyApp.view.Main');
    }
});


App = function(){


    return {
         getCorrectPanel: function(){


             console.log('We trying to ...');


             var userStore = Ext.getStore('User');
             var count     = userStore.getCount();


             userStore.each(function(record){
                 console.log(record.get('bouquet'));
                 console.log(record.get('rated'));
                 console.log(record.get('age'));
                 console.log(record.get('gender'));
                 console.log(record.get('since'));
             })


             console.log('count is: ' + count);


             if (count == 0){
                 console.log('Show the Welcome Panel');
                 main.add(Ext.create('MyApp.view.Welcome'));
                 main.getTabBar().getComponent(1).setBadgeText('1');
                 main.setActiveItem(2);
            }
            else {
                 console.log('Show the About Panel');
                 main.add(Ext.create('MyApp.view.About'));
           }
        }
    };
}();

But I doubt that's the issue though, I'm trying to programatically update my dataview when I click back to my schedule tab. Currently I need to manually refresh the page so the my dataview can read the updated store.

[robert_k]

Riyaad, this issue is because you're not making a controller for this functionality: a controller is where this stuff belongs. You should not have to update the page so that the DataView refreshes itself, it's bound to the store object (if you pass it the store) so that it updates itself.

Ext.define('MyApp.controller.Main', {
    extend : 'Ext.app.Controller',

    refs: {
        view: 'main'
    },

    initialize: function() {
        this.callParent(arguments);

        var view = this.getView();

        view.getTabBar().getComponent(1).setBadgeText('1');
        view.setActiveItem(2);
        // ...
    }
});

And to refresh a DataView, if it must be done manually, just call refresh.

[mitchellsimoens]

^^added red code to extend Controller

[riyaad]

Thank you both - will have to refractor some code to get this working and post the solution when done.

Appreciated ...

[riyaad]

added the main controller as

Ext.define('MyApp.controller.Main', {
    extend: 'Ext.app.Controller',
    store: 'MyApp.store.User',


    config: {
        refs: {
            view: 'main'
        }
    },


    initialize: function() {


        console.log('Init main controller');


        this.callParents(arguments);


        var main_view = this.getView();


        console.log('We need to ...');


        var userStore = Ext.getStore('User');
        var count     = userStore.getCount();


        userStore.each(function(record){
            console.log(record.get('bouquet'));
            console.log(record.get('rated'));
            console.log(record.get('age'));
            console.log(record.get('gender'));
            console.log(record.get('since'));
        });


        console.log('count is: ' + count);


        if (count == 0) {
            console.log('Show the Welcome Panel');
            main_view.add(Ext.create('MyApp.view.Welcome'));
            main_view.getTabBar().getComponent(1).setBadgeText('1');
            main_view.setActiveItem(2);
        }
        else {
            console.log('Show the About Panel');
            main_view.add(Ext.create('MyApp.view.About'));
        }
    }
});

in my main view I have...

Ext.define('MyApp.view.Main', {
    extend: 'Ext.tab.Panel',
    xtype: 'main',
    id: 'main',


    requires: [
        'MyApp.view.About',
        'MyApp.view.Welcome'
    ],


    config: {
        //itemId: 'main',
        fullscreen: true,
        tabBarPosition: 'bottom',


        items: [
            {
                xtype: 'schedule',


                listeners: {
                    show: function() {
                        console.log('Schedule now active ..');
                    }
                }
            },
            {
                xtype: 'settings'
            }
        ]
    },


});

In app I have ...

controllers: [ 'Main', 'Details', 'Settings' ],

Problem: the main controller doesn't fire up ...
Why does my initialize not fire up?