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',
            'ments'
        ],
        proxy: {
            type: 'jsonp',
            url:  '',
            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
    }
});

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',
            'ments'
        ],
        proxy: {
            type: 'jsonp',
            url:  'http://My./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
    }
});

• javascript
• extjs
• sencha-touch
• sencha-touch-2

1 Answer 1

refresh: function() {
    // Ext.StoreMgr.get('stream').load();

    // here I'd like to reload the app instead
    // not just the store
    window.location.reload();

}