JSFiddle - React, Tailwind, and code Playground

by marcusschiesser

HTML

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

JavaScript

Ext.onReady(function () {

    Ext.define('User', {
        extend: 'Ext.data.Model',
        fields: [
            {name: 'name', type: 'string'},
            {name: 'surname', type: 'string'},
            {
                name : 'displayValue',
                convert : function(v, record) {
                    return record.data.surname + ", " + record.data.name;
                }
            }
        ]
    });

    var store = Ext.create('Ext.data.Store', {
        model: 'User',
        data: [
            {name: 'Homer', surname: 'Simpson'},
            {name: 'Maggie', surname: 'Simpson'}
        ]
    });

    Ext.create('Ext.form.ComboBox', {
        fieldLabel: 'Choose State',
        renderTo: Ext.getBody(),
        queryMode: 'local',
        store: store,
        displayField: 'displayValue',
        valueField: 'name',
    });

});