JSFiddle - React, Tailwind, and code Playground
HTML
<link rel="stylesheet" href="http://dev.sencha.com/deploy/ext-4.0.0/resources/css/ext-all.css">
JavaScript
Ext.define('ItemTemplateModel', {
extend: 'Ext.data.Model',
fields: [
{ name: 'id', type: 'int' },
{ name: 'imageUri', type: 'string' },
{ name: 'name', type: 'string' }
]
});
var itemTemplateStore = Ext.create('Ext.data.Store', {
model: 'ItemTemplateModel',
autoLoad: false,
proxy: {
type: 'memory',
reader: {
type: 'json',
root: 'entries'
}
}
});
var comboBox = Ext.create('Ext.form.field.ComboBox', {
store: itemTemplateStore,
fieldLabel: 'Item Template',
name: 'template',
displayField: 'name',
valueField: 'id',
editable: false,
typeAhead: false,
triggerAction: 'all'
});
Ext.create('Ext.form.Panel', {
title: 'Form',
renderTo: Ext.getBody(),
items: comboBox
});
var extraData = { entries: [
{ id: 184, name: 'Item4', imageUri: 'parts/speed/lv5/{1}' },
{ id: 183, name: 'Item3', imageUri: 'parts/defence/lv5/{1}' },
{ id: 182, name: 'Item2', imageUri: 'parts/attack/lv5/{1}' },
{ id: 173, name: 'Item1', imageUri: 'parts/attack/lv2/{1}' }
]};
setTimeout(function() {
itemTemplateStore.loadRawData(extraData);
}, 2000);