Ниже я создал магазин с именем Ext.data.FlatStore, который расширяет значение по умолчанию ArrayStore. Во время построения сконфигурированные данные обрабатываются.
{
xtype: 'combo',
queryMode: 'local',
store: Ext.create('Ext.data.FlatStore', {
data: [ 'yes', 'no', 'maybe' ]
})
}
Демоверсия @ JSFiddle
Ext.require(['*']);
String.capitalize = function (str) {
return str.charAt(0).toUpperCase() + str.substr(1).toLowerCase();
};
Ext.define('Ext.data.FlatStore', {
extend: 'Ext.data.ArrayStore',
config: {
data: []
},
fields: [{
name: 'id',
type: 'int'
}, {
name : 'value'
}, {
name: 'display',
type: 'string',
convert: function (newValue, model) {
return String.capitalize(model.get('value'));
}
}],
constructor: function (config) {
var me = this;
config.data = config.data.map(function (value, index, values) {
return [index, value];
});
me.callParent(arguments);
me.loaded = true;
}
}),
Ext.define('App.view.MainView', {
extend: 'Ext.panel.Panel',
xtype: 'mainView',
alias: 'widget.mainview',
controller: 'mainView',
title: 'Outer Panel',
referenceHolder: true,
layout: {
type: 'border'
},
initComponent: function () {
var me = this;
me.items = [{
region: 'center',
xtype: 'panel',
title: 'Inner Panel',
margin: 20,
bodyStyle: 'padding: 8px;',
layout: 'vbox',
items: [{
xtype: 'combo',
store: Ext.create('Ext.data.FlatStore', {
data: [ 'yes', 'no', 'maybe' ]
}),
displayField: 'display',
valueField: 'value',
fieldLabel: 'Response',
typeAhead: true,
queryMode: 'local',
forceSelection: true,
triggerAction: 'all',
emptyText: 'Choose...',
selectOnFocus: true,
applyTo: 'local-states'
}]
}],
me.callParent();
}
});
Ext.define('App.controller.MainViewController', {
extend: 'Ext.app.ViewController',
alias: 'controller.mainView',
init: function () {
var me = this;
}
});
Ext.define('App.app.App', {
extend: 'Ext.app.Application',
name: 'App',
launch: function () {
Ext.create('Ext.Viewport', {
layout: 'fit',
flex: 1,
items: [{
xtype: 'mainview'
}]
});
}
});
Ext.onReady(function () {
Ext.application('App.app.App');
});