JSFiddle - React, Tailwind, and code Playground

HTML

<link rel="stylesheet" href="http://docs.sencha.com/ext-js/4-0/extjs/resources/css/ext-all.css">
<p>Press "Swap Store" to reconfigure the current store with another store that has different URL, and press the "Refresh" button in PagingToolbar to see how it reload the store with different URL</p>
<ul id="log">
    
</ul>

CSS

body{
    padding: 10px;
    line-height: 1.4;
}
#log{
    margin-top: 10px;
    color:#f30;
    font-size: 11px;
}

JavaScript

Ext.define('NS.toolbar.Paging', {
    extend: 'Ext.toolbar.Paging',
    initComponent: function() {
        var me = this;
        me.callParent();
        me.on('afterrender', function() {
            me.ownerCt.on('reconfigure', function() {
                me.bindStore(me.ownerCt.store || 'ext-empty-store', true);
            });
        });
    },
    
    onLoad: function() {
        this.callParent();
        Ext.get('log').createChild({
            tag: 'li',
            html: 'Load <b>'+this.store.proxy.url+'</b>'
        });
    }
});

Ext.onReady(function() {
    
    var store1 = Ext.create('Ext.data.Store', {
        fields: ['name'],
        proxy: {
            type: 'ajax',
            url: 'load/all/name.json',
            reader: {
                type: 'json'
            }
        },
        data: [{
            name: 'John'
        },{
            name: 'Doe'
        }]
    });
    
    var store2 = Ext.create('Ext.data.Store', {
        fields: ['sex'],
        proxy: {
            type: 'ajax',
            url: 'load/all/sex.json',
            reader: {
                type: 'json'
            }
        },
        data: [{
            sex: 'Male'
        },{
            sex: 'Female'
        }]
    });
    
    var grid;
    
    Ext.create('Ext.window.Window', {
        items: grid = Ext.create('Ext.grid.Panel', {
            border: false,
            store: store1,
            bbar: Ext.create('NS.toolbar.Paging', {
                store: store1
            }),
            columns: [{
                header: 'Name',
                dataIndex: 'name'
            }]
        }),
        tbar: [{
            text: 'Swap Store',
            handler: function() {
                if (grid.store == store1) {
                    grid.reconfigure(store2, [{
                        header: 'Sex',
                        dataIndex: 'sex'
                    }]);
                }else{
                    grid.reconfigure(store1, [{
                   ...