Combobox using Sencha Architect - elasticsearch

Question

I been trying to load datas from elasticsearch into combobox but unsuccessfully, however load datas from json file to combobox it work.
the only different that is that load data from the store on json file, it successfully loaded the data, but when for elasticsearch, it reply '400: Bad Request'
[Json File]
[
{
"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 Reply]
{
"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"
}
}
]
}
}
My Model Code
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'
},
]
});
My Store Code [Json File- That Work]
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)]);
}
});
[My Another Store that retrieve from elasticsearch] - not working
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
},
});
[Views]
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:''
}
]
});