首页 > 解决方案 > 需要帮助设置嵌套 JSON 的 hasMany 模型关系并在网格中显示数据 - EXTJS 6

问题描述

我从 Elastic 以这种格式返回了一些搜索结果

{
  "took": 267,
  "timed_out": false,
  "_shards": {
    "total": 5,
    "successful": 5,
    "skipped": 0,
    "failed": 0
  },
  "hits": {
    "total": 1911,
    "max_score": 29.118078,
    "hits": [
      {
        "_index": "myIndex",
        "_type": "doc",
        "_id": "27c9d14495f7732c6756f0d2688874f",
        "_score": 21.179974,
        "_source": {
          "file": {
            "filename": "file1.pdf"
          },
          "content": "samplecontent"
        }
      },
      {
        "_index": "myIndex",
        "_type": "doc",
        "_id": "27c9d14495f7732c6756f0d2688874f",
        "_score": 21.179974,
        "_source": {
          "file": {
            "filename": "file2.pdf"
          },
          "content": "samplecontent"
        }
      },
      {
        "_index": "myIndex",
        "_type": "doc",
        "_id": "27c9d14495f7732c6756f0d2688874f",
        "_score": 21.179974,
        "_source": {
          "file": {
            "filename": "file3.pdf"
          },
          "content": "samplecontent"
        }
      }
    ]
  }
}

例如,想在我的网格标题中显示 hits.total (1911),并在我的网格中显示 hits.hits._source.file.filename 和 hits.hits._source.content。我相信我需要设置一个 hasMany/belongsTo 模型,但是对于我发现的关于如何设置该关系以及选择要在网格中显示的那些嵌套字段的任何文档/示例感到有些困惑。任何帮助或澄清将不胜感激

我的商店定义为

Ext.define('search.store.results', {
    extend: 'Ext.data.Store',

    alias: 'store.results',

    model: 'search.model.hits',

    autoLoad: false,

    proxy: {
        type: 'ajax',
        url: 'http://myServer:9200/_search',
        reader: {
            type: 'json',
            rootProperty: 'hits'
        }
    }
});

我的模型被定义为

根据

Ext.define('search.model.Base', {
    extend: 'Ext.data.Model',

    schema: {
        namespace: 'search.model'
    }
});

命中

Ext.define('search.model.hits', {
    extend: 'search.model.Base',

    fields: [
        {name: 'total', type: 'number'}
    ],
    hasMany:{
        model: 'hit',
        name: 'hit'
    }
});

Ext.define('search.model.hit', {
    extend: 'search.model.Base',

    fields: [
        {name: '_source', type: 'source'}
    ]
});

资源

Ext.define('search.model.source', {
    extend: 'search.model.Base',

    fields: [
        {name: 'file', type: 'file'},
        {name: 'content', type: 'string'}
    ]
});

并归档

Ext.define('search.model.file', {
    extend: 'search.model.Base',

    fields: [
        {name: 'filename', type: 'string'}
    ]
});

但是,当我加载我的页面时,我马上就得到了这些错误

Uncaught Error: [Ext.createByAlias] Unrecognized alias: data.field.source

Uncaught Error: [Ext.createByAlias] Unrecognized alias: data.field.file

更新:如果我将模型更改为使用“参考”而不是 hasMany,这就是结果的样子

Ext.define('search.model.hits', {
    extend: 'search.model.Base',

    fields: [
        {name: 'total', type: 'number'},
        {name: 'hits', reference: 'hit'}
    ]
});

Ext.define('search.model.hit', {
    extend: 'search.model.Base',

    fields: [
        {name: '_source', reference: 'source'}
    ]
});

Ext.define('search.model.source', {
    extend: 'search.model.Base',

    fields: [
        {name: 'file', reference: 'file'},
        {name: 'content', type: 'string'}
    ]
});

Ext.define('search.model.file', {
    extend: 'search.model.Base',

    fields: [
        {name: 'filename', type: 'string'}
    ]
});

我的商店“加载”侦听器显示此信息,分为单独的数据结构,而不是全部位于箭头所在的“数据”结构下(我习惯于查找我的商店记录)

在此处输入图像描述

更新#2:如果我修改我的'hits'模型以使用hasMany,但其余部分使用'reference',它似乎可以在记录中正确分组我的数据 - 现在我只需要知道如何显示嵌套结果在一个网格中

Ext.define('search.model.hits', {
    extend: 'search.model.Base',

    fields: [
        {name: 'total', type: 'number'}
    ],
    hasMany:{
        model: 'hit',
        name: 'hit'
    }
});

生产

在此处输入图像描述

标签: extjsextjs6-classic

解决方案


推荐阅读