How to manually load data in sencha Ext js from API without using "autosync" & "autoLoad: true"?

Question

Ext.define('EmpMgmt.store.Personnel', {
    extend: 'Ext.data.Store',
    alias: 'store.personnel',
    model: 'EmpMgmt.model.Personnel',

fields: [
    { name: 'name' },
    { email: 'email' },
    { phone: 'phone' },
],
proxy: {
    type: 'rest',
    url: 'https://jsonplaceholder.typicode.com/users',
    reader: {
    type: 'json',
    rootProperty: 'data'
},
},
launch: ()=> {
    var yourStore = Ext.getStore('EmpMgmt.store.Personnel'); 
    yourStore.load(); 
},
});

I want to load data from API manually but dont know exact way about how to approach it? I am newbie in sencha ext js

Answer 1

You can manually load your store using the ViewController and ViewModel of it's view. Assuming that you have a view like this:

    Ext.define('EmpMgmt.view.Personnel', {
       extend: 'Ext.grid.Grid',
       xtype: 'personnel',
       viewModel: 'personnel',
       bind: '{personnel}', //this config will bind the store from your viewModel
       title: 'Personnel',
       columns: [{
          text: 'Name',
          dataIndex: 'name' //the same name from the Model's configuration
       }, {
          text: 'E-mail',
          dataIndex: 'email' //the same name from the Model's configuration
       }]
    })

In your viewModel you can do this:

Ext.define('EmpMgmt.view.PersonnelViewModel', {
   extend: 'Ext.app.ViewModel',
   alias: 'viewmodel.personnel',
   stores: {
      personnel: {
         type: 'personnel' //here your store is defined by saying "Hey ViewModel's store I'am a store of type Personnel" the one you created in the example
      }
   }
})

And finally your ViewController can load the store manually:

Ext.define('EmpMgmt.view.PersonnelViewController', {
       extend: 'Ext.app.ViewController',
       alias: 'controller.personnel',
       initViewModel: function () { //triggers everytime your application initialize the viewModel, you can use "init" too
          const me = this;
          const viewModel = me.getViewModel();
          const store = viewModel.getStore('personnel');
          store.load();//will load your store at this method load() from ExtJS's Store
       }
    })

Despite the code, I strongly recommend you to see more at the sencha's Documentation about Store, ViewModel and Controller.

If something isn't clear or you have more doubts, don't hesitate to ask!

Hope it helps!