How to get data using proxy in ExtJS 6

In ExtJs have store proxy and also Ajax request you can use both.

1. Proxies are used by Ext.data.Store to handle the loading and saving of Ext.data.Model data. Usually developers will not need to create or interact with proxies directly.
2. Ajax singleton instance of an Ext.data.Connection. This class is used to communicate with your server side code.

I have created and Sencha Fiddle demo. Here I have create 2 local json file (user.json & user1.json).

I am fetching data using store proxy(from user.json) and Ext.ajax request(from user1.json).

Hope this will help you to solve your problem.

*Note this will work for both modern and classic.

Ext.define('User', {
    extend: 'Ext.data.Model',
    fields: ['name', 'email', 'phone']
});
Ext.create('Ext.data.Store', {
    storeId: 'userStore',
    model: 'User',
    proxy: {
        type: 'ajax',
        url: 'user.json',
        reader: {
            dataType: 'json',
            rootProperty: 'data'
        }
    }
});
Ext.create('Ext.panel.Panel', {
    width: '100%',
    renderTo: Ext.getBody(),
    padding: 15,
    items: [{
        xtype: 'button',
        margin:5,
        text: 'Get Data using Store Load',
        handler: function () {
            var gridStore = this.up().down('#grid1').getStore();
            gridStore.load(function () {
                Ext.Msg.alert('Success', 'You have get data from user.json using store.load() method..!');
            });
        }
    }, {
        xtype: 'grid',
        itemId:'grid1',
        title: 'User Data Table1',
        store: Ext.data.StoreManager.lookup('userStore'),
        columns: [{
            text: 'Name',
            dataIndex: 'name'
        }, {
            text: 'Email',
            dataIndex: 'email',
            flex: 1
        }, {
            text: 'Phone',
            dataIndex: 'phone'
        }],
        height: 200,
        width: '100%',
    }, {
        xtype: 'button',
        margin:5,
        text: 'Get Data using Ajax request',
        handler: function () {
            var me = this.up(),
                gridStore = me.down('#grid2').getStore();
            me.down('#grid2').mask('Pleas wait..');
            Ext.Ajax.request({
                url: 'user1.json',
                method: 'GET',
                success: function (response) {
                    me.down('#grid2').unmask();
                    var data = Ext.decode(response.responseText);
                    gridStore.loadData(data.data);
                    Ext.Msg.alert('Success', 'You have get data from user1.json using Ext.Ajax.request method..!');
                },
                failure: function (response) {
                    me.down('#grid2').unmask();
                    //put your failure login here.
                }
            });
        }
    }, {
        xtype: 'grid',
        itemId: 'grid2',
        title: 'User Data table2',
        store: Ext.create('Ext.data.Store', {
            fields: ['name', 'email', 'phone']
        }),
        columns: [{
            text: 'Name',
            dataIndex: 'name'
        }, {
            text: 'Email',
            dataIndex: 'email',
            flex: 1
        }, {
            text: 'Phone',
            dataIndex: 'phone'
        }],
        height: 200,
        width: '100%',
    }]

});

Please read the points below to understand this. This link on architecture would be helpful.

a. Since you are have created a Universal application, it means you are using Ext JS 6 or above. For this, the folder structure of CMD generated app is as follows:

app
    model
    store
    view
classic
    src
        view
modern
    src
        view

b. The app folder is for classes shared by the classic and modern views. This will typically be model definitions in app/model, and shared controllers and view models in app/view folders.

c. Code in classic folder can reference classes in app folder, but can not reference code in modern folder. Similarly, code in modern folder can reference classes in app folder, but can not reference code in classic folder. (It means the model, store, viewmodel and viewcontroller classes in modern and classic apps can extend these classes from the app folder.)

d. Best practice is to declare store in a viewmodel but if the store config is complex, then define its class in the store folder.

e.To declare store in a viewmodel of classic app, example is given below. Similarly you will do for the modern app also.

//MyApp/classic/src/view/main/MainModel.js
stores: {
  articles: {
    model: 'MyApp.model.MyModel',// in classic/src/model folder
    autoLoad: true,
    proxy: {
      type: 'ajax',//if it's cross-domain, use jsonp
      url : 'users.json',
      reader: {
       type: 'json', //this is default
       rootProperty: 'data'//the location in data feed from where you want to start reading the data
      }
   }
 }

}

Now bind this store in the view. For example, in a grid:

{
 xtype: 'grid',
 bind: {
   store: '{articles}'
 }
 //More code
}

f. If store is defined in a class (e.g.classic/src/store/Articles.js), then declare in a viewmodel like this. Binding will be same as above.

//MyApp/classic/src/view/main/MainModel.js
stores: {
  articles: {
    type: 'mystore' //this is alias of store class.
    model: 'MyApp.model.MyModel', //in classic/src/model folder
  }
}

Hope this solves your problem.