extjs 如何通过代理发送Ext JS AJAX 请求并使用自定义读取器检索数据？

yhuiod9q 于 2023-06-05 发布在其他

关注(0)|答案(1)|浏览(216)

我正在学习Ext JS框架，遇到了以下困难：通过存储文件中的代理发送请求。由于某种原因，请求不会消失，但也没有错误。另外，也许在下面的代码中，我犯了一个错误。我不是特别了解如何从其他组件中获取存储中的数据，也就是说，比如我在FormViewStore中获取数据，我需要在NavView组件中获取它们，我能以某种方式做到吗，如果可以，请告诉我如何做到？

下面是FormView文件

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",
        },
      ],
    },
  ],
});

下面是FormViewStore文件

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

为FormViewStore文件

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

我查看了文档中的扩展，但没有找到如何通过代理发出请求并在customReader中获取数据的具体示例。然后我去了StackOverflow的问题部分，但没有找到我的问题的答案。接下来，我尝试更改代理配置，但也没有任何帮助

extjs

来源：https://stackoverflow.com/questions/76365907/how-can-i-send-an-ext-js-ajax-request-through-a-proxy-and-use-a-custom-reader-to

1条答案

按热度按时间

pgky5nke1#

通过检查您的fiddle，问题是您试图在FormView.js中设置表单面板的存储，如下所示：

store: { type: "formviewstore" },

但是看看这里的文档：Ext.form.Panel没有名为store的配置。例如，这可以与网格一起工作。我不知道你想用这个商店做什么，但你必须手动加载它。（顺便说一下，商店是模型的集合，表单通常显示一个模型，而不是模型列表。
但是你的商店和代理工作，你可以很容易地尝试它。例如，将以下代码添加到按钮的处理程序中（您可以将其添加到任何地方以进行尝试）：

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

现在，如果您按下按钮并检查控制台，过一会儿您将看到console.log的输出在FormViewReader.js中，来自getResponsData。
关于读者：它非常简单，它将响应作为输入，并且必须返回您想要转换的任何内容。只需在此处停止调试器，研究response的结构，并找出您希望如何返回它。
下面这个简单的例子假设响应的结果是responseText，你想解码它并返回结果，以及如果是成功还是错误：

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;
}

赞(0）回复(0）举报 2023-06-05

我来回答

extjs 如何通过代理发送Ext JS AJAX 请求并使用自定义读取器检索数据？

1条答案

相关问题

热门标签

最新问答