How do I fully reload my Sencha Touch App when tapping 'refresh'?
        Posted  
        
            by 
                torr
            
        on Stack Overflow
        
        See other posts from Stack Overflow
        
            or by torr
        
        
        
        Published on 2012-10-06T02:52:56Z
        Indexed on 
            2012/10/06
            3:37 UTC
        
        
        Read the original article
        Hit count: 333
        
My list view layout is similar to Pinterest, with absolutely positioned blocks. Unfortunately, this seems to require a full re-initialization at refresh. If reload only the store (as below) the new blocks are incorrectly positioned.
How do I reload the app when the user clicks on refresh?
This is my View:
Ext.require(['Ext.data.Store', 'MyApp.model.StreamModel'], function() {
    Ext.define('MyApp.view.HomeView', {
        extend: 'Ext.navigation.View',
        xtype:  'homepanel',
        requires: [
            'Ext.dataview.List',
        ],
        config: {
            title:            'Home',
            iconCls:          'home',
            styleHtmlContent: true,
            navigationBar: {
                items: [
                    {
                        xtype:    'button',
                        iconMask: true,
                        iconCls:  'refresh',
                        align:    'left',
                        action:   'refreshButton'
                    }
                ]
            },
            items: {
                title: 'My',
                xtype: 'list',
                itemTpl: [
                    '<div class="post">',
                        ...
                    '</div>'
                ].join(''),
                store: new Ext.data.Store({
                    model: 'MyApp.model.StreamModel',
                    autoLoad: true,
                    storeId: 'stream'
                }),
            }
        }
    });
});
Model:
Ext.define('MyApp.model.StreamModel', {
    extend: 'Ext.data.Model',
    config: {
        fields: [
            'post_id',
            'comments'
        ],
        proxy: {
            type: 'jsonp',
            url:  'http://My.com/app',
            reader: {
                type: 'json',
            }
        }
    }
});
and my Controller:
Ext.define('MyApp.controller.RefreshController', {
    extend: 'Ext.app.Controller',
    requires: [
        'Ext.navigation.View'
    ],
    config: {
        control: {
            'button[action=refreshButton]': {
                tap: 'refresh'
            }
        }
    },
    refresh: function() {
        // Ext.StoreMgr.get('stream').load();
        // here I'd like to reload the app instead
        // not just the store
    }
});
© Stack Overflow or respective owner