How can I send an Ext JS AJAX request through a proxy and use a custom reader to retrieve the data?

Question

I am studying the Ext JS framework and faced the following difficulty of sending a request through a proxy in the store file.For some reason, the request does not go away, but there is no error either. Also, Maybe somewhere in the code below I made a mistake. I don't particularly understand how to get data from the store from other components, that is, for example, I get data in the FormViewStore, and I need to get them, for example, in the NavView component, can I do it somehow, if so, please tell me how?

Below is the FormView file

Ext.define("ModernApp.view.form.FormView", {
  extend: "Ext.form.Panel",
  xtype: "formview",
  title: "Custom Form",
  store: { type: "formviewstore" },
  controller: "formviewcontroller",
  cls: "formView",
  buttons: [
    {
      text: "Оправить",
      handler: "onSubmit",
    },
    {
      text: "Отмена",
      handler: "onCancel",
    },
  ],
  listeners: {
    afterrender: "onFormRender",
  },

  onFormRender() {
    console.log("onFormRender");
    var controller = this.getController();

    // Загрузка данных из сторы
    controller.loadFormViewStore();
  },
  items: [
    {
      xtype: "fieldset",
      title: "About You",
      instructions: "Tell us all about yourself",
      items: [
        {
          xtype: "textfield",
          name: "firstName",
          label: "First Name",
          listeners: {
            change: {
              fn: function (event) {
                const name = Ext.ComponentQuery.query(
                  "textfield[name=firstName]"
                )[0].getValue();

                const surname = Ext.ComponentQuery.query(
                  "textfield[name=lastName]"
                )[0].setValue(name || "");
              },
            },
          },
        },
        {
          xtype: "textfield",
          name: "lastName",
          label: "Last Name",
        },
        {
          xtype: "datefield",
          name: "birthday",
          label: "Birthday",
        },
        {
          xtype: "emailfield",
          name: "email",
          label: "Email",
        },
        {
          xtype: "passwordfield",
          name: "password",
          label: "Password",
        },
      ],
    },
  ],
});

Below is the FormViewStore file

Ext.define("ModerdApp.view.form.FormViewStore", {
  extend: "Ext.data.Store",
  alias: "formviewstore",
  proxy: {
    type: "ajax",
    url: "https://jsonplaceholder.typicode.com/posts",
    reader: {
      type: "myreader",
    },
  },
});

is the FormViewStore file

Ext.define("ModernApp.view.form.reader.Json", {
  extend: "Ext.data.reader.Json",
  alias: "myreader",
  getResponseData: function (responce) {
    console.log("response", responce);
  },
});

I looked at the spread in the documentation, but I did not find a specific example of how to make a request through a proxy and get data in a customReader. Then I went to StackOverflow in the questions section but didn't find an answer to my question. Next I tried to change the proxy configuration but it didn't help either

Answer 1

By checking your fiddle the problem is that you are trying to set the store for the form panel in FormView.js like:

store: { type: "formviewstore" },

But look at the documentation here: Ext.form.Panel does not have a config named store. This could work with a grid for example which does. I don't know what do you want to use this store for but you have to load it manually. (By the way a store is a collection of models, and forms usually display one model, not a list of models.)

But your store and proxy works, you can easily try it. For example add this code to the one of your button's handler (you can add it anywhere just to try out):

 buttons: [
    {
      text: "Оправить",
      handler: function() {
          // create a store
          const store = Ext.create('ModerdApp.view.form.FormViewStore');
          // load it
          store.load();
      },
    },
    {
      text: "Отмена",
      handler: "onCancel",
    },
  ],

Now if you press the button and check for console, after a short while you will see the output of console.log in FormViewReader.js, from getResponsData.

About the reader: it is pretty simple, it takes the response as input and has to return whatever you'd like to transform it. Just stop the debugger there and explore the structure of response and find out how you'd like to return it.

The following simple example assumes that the response had the result in responseText, you want do decode it and return the results and whether if was a success of error:

getResponseData: function (response) {
    var json =  Ext.JSON.decode(response.request.result.responseText);
    if (response.status==200) {
        json = {
            "success": "true",
            "results": json
        }
    }
    else {
        json = {
            "success": "false",
            "errors": json
        };
    }
    return json;
}