Extjs 6 combobox「queryMode: 'local'」 data not showing - extjs

Question

So I have a combobox that is loaded dynamically for a certain view.
Whenever I put the queryMode to remote, it would load the data if I clicked the combobox, but if set to local it won't show any data.
My store will return the requested data properly, it's just it won't show in the combobox.
Am I missing something here?
Hope someone can help me.
This is my controller for the view with the combobox:
Ext.define('Stm.controller.HpUpdate', {
extend: 'Ext.app.Controller',
requires: [
'Stm.view.contents.hpupd.Detail'
],
stores: [
'SiteDomain'
],
fromDetail: false,
isAbort: false,
isDataSeted: false,
firstSorters: undefined,
recordId: undefined,
isUpdate: false,
init: function() {
this.callParent(arguments);
console.log(Ext.getDisplayName(arguments.callee));
this.control({
'hup-list': {
afterRender: this.setupStmList
}
});
this.addRef([{
ref: 'list',
selector: 'hup-list'
},
{
ref: 'detail',
selector: 'hup-detail'
},
]);
},
setupStmList: function() {
console.log(Ext.getDisplayName(arguments.callee));
var me = this;
var store = me.getSiteDomainStore();
var record = Cps.Util.baseRecord();
store.load({
params: param,
callback: function(records, operation, success) {
var response = operation.response;
if (!response || response.length === 0) {
return;
}
var responseText = response.responseText;
if (!responseText || responseText.length === 0) {
return;
}
var res = Ext.decode(responseText);
if (res.common.st === 'mainte' || res.common.st === 'abort') {
return;
}
if (res.common.st === 'ng') {
Cps.Util.alert(res.common.msg);
return;
}
if (records.length === 0) {
return;
}
me.getList().down('#dtAplDateTimeFrom').down('#dateField').focus();
}
});
me.firstSorters = this.getHpUpdateStore().getSorters();
},
});
This is my view:
Ext.define('Stm.view.contents.hpupd.List', {
extend: 'Ext.container.Container',
alias: 'widget.hup-list',
layout: {
type: 'vbox',
align: 'stretch'
},
items: [{
xtype: 'cps-combobox',
fieldLabel: 'Domain',
itemId: 'cmbSiteDomain',
queryMode: 'local',
store: {
type: 'sitedomain'
},
width: 350,
displayField: 'siteDomain',
valueField: 'siteId',
}],
});
Store:
Ext.define('Stm.store.SiteDomain', {
extend: 'Extends.data.Store',
alias: 'store.sitedomain',
requires: [
'Cps.Setting',
'Stm.model.SiteInfo'
],
model: 'Stm.model.SiteInfo',
pageSize: Stm.Const.controller.dataCountLimit,
proxy: {
type: 'ajax',
url: Cps.Setting.getEntryUrl() + '/stm/st-update/site-domain',
reader: {
type: 'json',
rootProperty: 'data'
},
actionMethods: {
create: 'POST',
read: 'POST',
update: 'POST',
destroy: 'POST'
}
}
});

Answer 1

When you set queryMode to local it means that data will not be loaded from remote source and data should be defined by for example Ext.data.ArrayStore
{
xtype: 'combobox'
queryMode: 'local',
valueField: 'id',
displayField: 'name',
store: new Ext.data.ArrayStore({
fields: ['id', 'name'],
data: [[1, 'item1'], [2, 'item2']]
})
}
If you want to data to be loaded from remote source just once and combo query data locally you should add store items manually
Define your combo like:
{
xtype: 'combobox'
itemId: 'myCombo'
queryMode: 'local',
valueField: 'id',
displayField: 'name',
store: new Ext.data.ArrayStore({
fields: ['id', 'name'],
data: []
})
}
And then add items to the combo like:
Ext.Ajax.request({
url : 'Remote_Source',
success: function(response, opts) {
var json = Ext.decode(response.responseText),
store = me.down("#myCombo").getStore();
Ext.each(json.items, function(item){
store.add(item);
});
}
});
Note: This is sample code you should add your implementation

Answer 2

This is exactly what I am doing. First I build my store by adding items. And then I use the store in my combobox with querymode: local. When I expand the combobox, no items show. When I change querymode to remote, the items show upon expansion, but they are grayed, as the store tries to load data from the server, which fails of course. I have not idea what to do about it. It looks like a bug to me.