Combobox

by Johan Vandeplas

HTML

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

CSS

.x-boundlist-selected .x-combo-list-item img.chkCombo {
    background: transparent url('data:image/gif;base64,R0lGODlhEAAQAIcAAENZkkRZkkZblEdclUhdlkhelklel0pfl0tgmFZpnV1woWBypGN1pWR2pWZ3p21+qkD/QHaGq46Pj4uZu4yZupCdva6zuZ2nwKOuyK+4z7C50be/1bm/0LrB1bzD1sbIysXJzcrLzMnM0MvP1c3P0cnP3czQ1s3R1tXV1tXY3NXZ3dra29vc3Nzd3s/U4tzf5N7g4d/i5d7h6d/i6eHi4uDi5ubm5ufn6Onp6uvr7Ozt7e3u7urs8O3u8fLz9PLz9vT09PX19fb29vj4+Pn5+fj5+gAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAACH5BAMAABAALAAAAAAQABAAAAicACEIHEiwoMGDBSUoXMhw4UAJQCJKBDKEiBAgEh4CscCRo4gLEV4EySgQooURKE30SACAgxCSEEyiPFEjQ4AGNzBqtKAiRgofCgR4YKGzJBAQJTDs6ECAwRAURWMCgfFAgAsHBzYIaREVIgkZAwocWFAECI2uQD7wmGAAgQaLNtCGWDGDQoUfOnLgQBsxCJEhQSbCbEhYIcLDEAICADs=');
  
}
.x-boundlist-item img.chkCombo{
  width: 16px;  
  vertical-align: text-top;
  background: transparent...

JavaScript

Ext.onReady(function () {
    // The data store containing the list of states
    var states = Ext.create('Ext.data.Store', {
        fields: ['id', 'name'],
        data: [{
            "id": 1,
                "name": "Alabama"
        }, {
            "id": 2,
                "name": "Alaska"
        }, {
            "id": 3,
                "name": "Arizona"
        }
        //...
        ]
    });

    Ext.create('Ext.panel.Panel', {
        title: 'Hello',
        widht: 300,
        height: 300,
        layout: 'hbox',
        renderTo: Ext.getBody(),
        items: [{
            xtype: 'combo',
            id: 'BCCAddress',
            name: 'BCCAddress',
            maxHeight: 150,
            width: 210,
            multiSelect: true,
            emptyText: "Select Bcc email addresses",
            store: states,
            displayField: 'name',
            valueField: 'id',
            forceSelection: true,
            editable: true,
            mode: 'local',
            triggerAction: 'all',
            listConfig: {
                getInnerTpl: function () {
                    return '<div class="x-combo-list-item"><img src="' + Ext.BLANK_IMAGE_URL + '" class="chkCombo-default-icon chkCombo" /> {name} </div>';
                }
            }
        }, {
            xtype: 'textarea',
            id: 'out',
            margin: 5,
            fieldLabel: 'output',
            width: 200,
            height: 250,
            labelWidth: 40
        }]
    });
});