ComboBox for Forms Plugin

by KevinABoucher

HTML

<link rel="stylesheet" href="http://dev.sencha.com/ext/5.0.1/examples/shared/example.css">
<script src="http://dev.sencha.com/ext/5.0.1/examples/shared/include-ext.js"></script>
<div id="combobox-plugin"><div>

JavaScript

Ext.onReady(function() {

    var combo = Ext.create('Ext.form.field.ComboBox', {
        renderTo: 'combobox-plugin',
        fieldLabel: 'Snapshot',
        displayField: 'name',
        valueField: 'value',
        value: '',
        store: Ext.create('Ext.data.Store', {
            model: 'Snapshot',
            data: snapshots
        }),
        queryMode: 'local',
        editable: true,
        emptyText: 'No Selection',
        listConfig: {
        tpl: '<div class="my-boundlist-item-menu">No Selection</div>'
            + '<tpl for=".">'
            + '<div class="x-boundlist-item">{name}</div></tpl>',
        listeners: {
            el: {
                delegate: '.my-boundlist-item-menu',
                click: function() {
                    combo.clearValue();
                }
            }
        }
    }
    });

});

var snapshots = [
    {"name":"Centos 1","value":"1","description":"The baseline"},
    {"name":"Snapshot 2","value":"2","description":"First run"},
    {"name":"Another snapshot","value":"3","description":"Another test"}
];

Ext.define('Snapshot', {
    extend: 'Ext.data.Model',
    fields: [
        {type: 'string', name: 'name'},
        {type: 'string', name: 'value'},
        {type: 'string', name: 'description'}
    ]
});