首页 > 解决方案 > 使用 Sencha Architect 的组合框

问题描述

我一直在尝试将elasticsearch中的数据加载到组合框但未成功,但是将json文件中的数据加载到组合框它可以工作。

唯一不同的是,从 json 文件中的 store 加载数据,它成功加载了数据,但是对于 elasticsearch,它回复 '400: Bad Request'

[Json 文件]

    [
 {
"index":"color",
"_type":"_doc",
"_id":1,
"_score":1.0,
"_source": 
  {
    "name":"Red"
  }
 },
 {
"index":"color",
"_type":"_doc",
"_id":2,
"_score":1.0,
"_source": 
  {
    "name":"Blue"
  }
 }
]

[ElasticSearch Json 回复]

  {
  "took":3,
  "timed_out":false,
  "_shards":
  {
    "total":1,
    "successful":1,
    "skipped":0,
    "failed":0
  },
  "hits":{
    "total":{
      "value":4,
      "relation":"eq"
    },
    "max_score":1.0,
    "hits":[
      {
        "_index":"color",
        "_type":"_doc",
        "_id":1,
        "_score":1.0,
        "_source":{
          "name":"Red"
        }
      },
      {
        "_index":"color",
        "_type":"_doc",
        "_id":2,
        "_score":1.0,
        "_source":{
          "name":"Blue"
        }
      },
      {
        "_index":"color",
        "_type":"_doc",
        "_id":3,
        "_score":1.0,
        "_source":{
          "name":"Green"
        }
      },
      {
        "_index":"color",
        "_type":"_doc",
        "_id":4,
        "_score":1.0,
        "_source":{
          "name":"Yellow"
        }
      }
      ]
  }
}

我的模型代码

Ext.define('MyApp.model.ColorModel',{
    extend: 'Ext.data.Model',
    alias: 'model.colormodel,

    requires: [
        'Ext.data.field.String',
        'Ext.data.field.Integer'
    ],

    fields: [
      {
        type:'string',
        name:'_index'
      },
      {
        type:'string',
        name:'_type'
      },
      {
        type:'string',
        name:'_id'
      },
      {
        type:'int',
        name:'_score'
      },
      {
        name:'_source'
      },
    ]

});

我的商店代码 [Json 文件 - 有效]

Ext.define('MyApp.store.ColorStore',{
    extend: 'Ext.data.Store",
    
    requires: [
        'MyApp.model.ColorModel',
        'Ext.data.proxy.Ajax',
        'Ext.data.reader.Json'
    ],

    constructor: function(cfg) {
        var me = this;
        cfg = cgf || {};
        me.callParent([Ext.apply({
            storeId:'ColorStore',
            model:'MyApp.model.ColorModel',
            proxy: {
                type:'ajax',
                url: 'http://localhost:8888/data/color.json,
                withCredentials:true,
                reader: {
                    type:'json' 
                }
              }
        }, cfg)]);
    }
});

[从弹性搜索中检索的我的另一个商店] - 不工作

Ext.define('MyApp.store.ESColorStore',{
    extend: 'Ext.data.Store",
    
    requires: [
        'MyApp.model.ColorModel',
        'Ext.data.proxy.Ajax',
        'Ext.data.reader.Json'
    ],

    constructor: function(cfg) {
        var me = this;
        cfg = cgf || {};
        me.callParent([Ext.apply({
            storeId:'ESColorStore',
            model:'MyApp.model.ColorModel',
            proxy: me.processMyAjaxProxy1({
                type:'ajax',
                read: function(operation, callback, scope){
                    var request = this.bulidRequest(operation, callback,scope);
                    var query = {
                        "from": operation.params.from,
                        "size": operation.params.size,
                        "query": {
                            "query_string" : { }
                        },
                        "sort": [
                        {
                           "name.raw":{
                            "order": "asc"
                            }
                        }   
                        ]
                    };


                Ext.apply(request, {
                    headers: this.headers,
                    timeout: this.timeout,
                    scope: this,
                    callback: this.createRequestCallback(request,operation,callback,scope),
                    method: 'POST',
                    params: operation.params,
                    jsonData: query,
                    disableCaching:true,
                    success: function(rec) {
                        console.log('[ESColorStore], successfully retrieved query: ' + rec.responseText);
                    }
                    failure: function(rec) {
                        console.log('[ESColorStore], failed retrieved query: ' + rec.responseText);
                    }
                });

                Ext.Ajax.request(request);
                
                return request;
                },
                reader: {
                    type:'json' 
                }
              }
        }, cfg)]);
    },

    proccessMyAjaxProxy1: function(config) {
        config.api = {
            read: 'http://localhost:9200/color/_search'
        };
        config.url = 'http://localhost:9200/color/';
        return config
    },
});

[意见]

Ext.define('MyApp.view.MyPanel', {
    extend: 'Ext.Panel',
    alias: 'widget.mypanel',

    requires: [
        'MyApp.view.MyPanelViewModel',
        'Ext.field.ComboBox'
    ],

    viewModel: {
        type: 'mypanel'
    },
    title: 'My Panel',
    
    items: [
      {
        xtype:'comobobox',
        name:'select-the-color',
        width: 419,
        docked: 'top',
        label:'Select The Color',
        autoLoadOnValue: true,
        displayField: '_source.name',
        selectOnTab:false,
        store:'ESColorStore',
        valueField:'_source.name',
        queryCaching: false,
        queryParam:''
      }
    ]
});

标签: elasticsearchextjssencha-architect

解决方案


推荐阅读