JSFiddle - React, Tailwind, and code Playground

by kien16

HTML

<link rel="stylesheet" href="http://cdn.sencha.io/ext-4.1.1-gpl/resources/css/ext-all.css">

JavaScript

Ext.onReady(function () {

// The data store containing the list of states
var states = Ext.create('Ext.data.Store', {
    fields: ['abbr', 'name'],
    data : [{
     "abbr":"AL", 
     "name":"<img src='http://icons.iconarchive.com/icons/famfamfam/silk/16/folder-picture-icon.png'>"
    },
    {
     "abbr":"AK", 
     "name":"<img src='http://icons.iconarchive.com/icons/famfamfam/silk/16/folder-picture-icon.png'>"
    },
    {
     "abbr":"AZ", 
     "name":"<img src='http://icons.iconarchive.com/icons/famfamfam/silk/16/folder-picture-icon.png'>"
    }]
});

// Create the combo box, attached to the states data store
Ext.create('Ext.form.ComboBox', {
    fieldLabel: 'Choose',
    store: states,
    tpl: '<tpl for="."><div class="x-boundlist-item" >{name} {abbr}</div></tpl>',
    displayTpl: Ext.create('Ext.XTemplate',
        '<tpl for=".">',
            '{name} {abbr}',
        '</tpl>'
    ),
    queryMode: 'local',
    displayField: 'abbr',
    valueField: 'abbr',
    renderTo: Ext.getBody()
});
    
});