为此，您需要使用JsonStore 的loadData 方法。
loadData 方法将数据数组直接加载到 Store。
如果数据已经是正确的格式（例如，它不需要由阅读器处理），则使用此方法非常有用。如果您的数据需要处理以解码数据结构，请使用MemoryProxy 或loadRawData。
在这个FIDDLE中，我使用combobox和Ext.Ajax.request创建了一个演示。我希望这将帮助/指导您实现您的要求。
代码片段
Ext.application({
name: 'Demo',
launch: function () {
//Create combobox
Ext.create('Ext.form.ComboBox', {
fieldLabel: 'Choose Country',
queryMode: 'local',
margin: 10,
store: Ext.create('Ext.data.JsonStore', {
fields: ['code', 'name'],
storeId: 'countryJsonStore'
}),
displayField: 'name',
valueField: 'code',
renderTo: Ext.getBody(),
listeners: {
afterrender: function (combo) {
//Call Ajax request to get data from json/server
Ext.Ajax.request({
//Here is server url/your method name
url: 'country.json',
method: 'GET',
headers: {
'Content-Type': 'application/json'
},
success: function (response) {
var data = Ext.decode(response.responseText).data;
/*
* Loads an array of data straight into the Store.
* Using this method is great if the data is in
* the correct format already (e.g. it doesn't need to be processed by a reader).
* If your data requires processing to decode the data structure, use a MemoryProxy or loadRawData.
*/
combo.getStore().loadData(data);
}
});
}
}
});
}
});
ExtJS 3.0 可以参考这个FIDDLE
代码片段 Extjs 3.0
Ext.onReady(function() {
// create the combo instance
var combo = new Ext.form.ComboBox({
typeAhead: true,
triggerAction: 'all',
lazyRender: true,
mode: 'local',
store: new Ext.data.JsonStore({
// store configs
autoDestroy: true,
storeId: 'myStore',
fields: ['country_id', 'country_name']
}),
valueField: 'country_id',
displayField: 'country_name',
listeners: {
afterrender: function(combo) {
//Call Ajax request to get data from json/server
Ext.getBody().mask('Please wait...');
Ext.Ajax.request({
//Here is server url/your method name
url: 'http://vocab.nic.in/rest.php/country/json',
method: 'GET',
headers: {
'Content-Type': 'application/json'
},
success: function(response) {
Ext.getBody().unmask();
var data = Ext.decode(response.responseText);
/*
* Loads an array of data straight into the Store.
* Using this method is great if the data is in
* the correct format already (e.g. it doesn't need to be processed by a reader).
* If your data requires processing to decode the data structure, use a MemoryProxy or loadRawData.
*/
combo.getStore().loadData(data.countries.map(item => {
return item.country;
}));
}
});
}
}
});
combo.render(document.body);
});
你也可以在jsonstore.中使用代理
你可以看到在这个FIDDLE
代码片段
Ext.onReady(function() {
var store = new Ext.data.JsonStore({
autoLoad: true,
root: 'countries',
url: 'http://vocab.nic.in/rest.php/country/json',
fields: ['country', {
name: 'code',
type: 'string',
convert: function(v, rec) {
return rec.country.country_id;
}
}, {
name: 'name',
type: 'string',
convert: function(v, rec) {
return rec.country.country_name;
}
}]
});
// create the combo instance
var combo = new Ext.form.ComboBox({
mode: 'local',
store: store,
valueField: 'code',
displayField: 'name',
});
combo.render(document.body);
});