ComboBox Test App

Application.js

/**
 * The main application class. An instance of this class is created by app.js when it
 * calls Ext.application(). This is the ideal place to handle application launch and
 * initialization details.
 */
Ext.define('test.Application', {
    extend: 'Ext.app.Application',

    name: 'test',

    stores: [
        // TODO: add global / shared stores here
    ],

    requires: [
        'Ext.field.InputMask'
    ],

    launch: function () {
        // TODO - Launch the application

        // The data store containing the list of states
        var states1 = Ext.create('Ext.data.Store', {
            data : [
                {"abbr":"AL", "name":"Alabama"},
                {"abbr":"AK", "name":"Alaska"},
                {"abbr":"AZ", "name":"Arizona"}
            ]
        });
        var states2 = Ext.create('Ext.data.Store', {
            data : [
                {"abbr":"AL", "name":"Alabama"},
                {"abbr":"AK", "name":"Alaska"},
                {"abbr":"AZ", "name":"Arizona"}
            ]
        });
        var states3 = Ext.create('Ext.data.Store', {
            data : [
                {"abbr":"AL", "name":"Alabama"},
                {"abbr":"AK", "name":"Alaska"},
                {"abbr":"AZ", "name":"Arizona"}
            ]
        });
        // Create the combo box, attached to the states data store
        var combo1 = Ext.create('Ext.form.ComboBox', {
            fieldLabel: 'Choose State',
            store: states1,
            queryMode: 'local',
            displayField: 'name',
            valueField: 'abbr',
            hideTrigger: true,
            clearable: true,
            label: '!forceSelection',
            listeners: {
                change: function(combo, newValue, oldValue) {
                    console.log('change', combo.getLabel(), newValue, oldValue)
                    message1.setHtml('value: ' + combo.getValue())
                },
                select: function(select, record) {
                    console.log('select', select, 'record', record)
                    //return false;
                }
            }
        });

        var combo2 = Ext.create('Ext.form.ComboBox', {
            fieldLabel: 'Choose State 2',
            store: states2,
            queryMode: 'local',
            displayField: 'name',
            valueField: 'abbr',
            hideTrigger: true,
            clearable: true,
            forceSelection: true,
            label: 'forceSelection',
            listeners: {
                change: function(combo, newValue, oldValue) {
                    console.log('change', combo.getLabel(), newValue, oldValue)
                    message2.setHtml('value: ' + combo.getValue())
                },
                select: function(select, record) {
                    console.log('select', select, 'record', record)
                    //return false;
                }
            }
        });

        var combo3 = Ext.create('Ext.form.ComboBox', {
            fieldLabel: 'Choose State 3',
            store: states3,
            queryMode: 'local',
            displayField: 'name',
            valueField: 'abbr',
            hideTrigger: true,
            clearable: true,
            forceSelection: false,
            label: 'clear !forceSelection',
            listeners: {
                change: function(combo, newValue, oldValue) {
                    console.log('change', combo.getLabel(), newValue, oldValue)
                    message3.setHtml('value: ' + combo.getValue())
                },
                select: function(select, record) {
                    console.log('select', select, 'record', record)
                    return false;
                }
            }
        });

        var message1 = Ext.create({
            xtype: 'component',
            html: 'value:'
        });
        var message2 = Ext.create({
            xtype: 'component',
            html: 'value:'
        });
        var message3 = Ext.create({
            xtype: 'component',
            html: 'value:'
        });
        var message4 = Ext.create({
            xtype: 'component',
            html: 'value:'
        });

        Ext.define('MyStore', {
            extend: 'Ext.data.Store',
            data : [
                {"abbr":"AL", "name":"Alabamax"},
                {"abbr":"AK", "name":"Alaskax"},
                {"abbr":"AZ", "name":"Arizonax"}
            ]
        });

        var vm = Ext.create('Ext.app.ViewModel', {
            stores: {
                myStore: new MyStore()
            },
            data: {
                query: 'two way bound value'
            }
        });

        var vc = Ext.create('Ext.app.ViewController', {
            onSelect: function () {
                var val = vm.get('query')
                console.log('vm select', val)
                message4.setHtml('value: ' + val)
                vm.set('query', 'foo')
            },
            onChange: function () {
                console.log('getValue', combo4.getValue())
                setTimeout(function() {
                    var val = vm.get('query')
                    console.log('vm change', val);
                    message4.setHtml('value: ' + val);
                }, 1)
            }
        })

        var combo4 = Ext.create('Ext.form.ComboBox', {
            id: 'combo4',
            fieldLabel: 'Choose State 3',
            bind: {
                store: '{myStore}',
                value: '{query}'
            },
            queryMode: 'local',
            displayField: 'name',
            valueField: 'abbr',
            hideTrigger: true,
            clearable: true,
            forceSelection: false,
            label: 'Bind',
            listeners: {
                change: 'onChange',
                select: 'onSelect'
            }
        });
        Ext.create({
            fullscreen: true,
            xtype: 'container',
            padding: 50,
            clearFilterOnBlur: false,
            viewModel: vm,
            controller: vc,

            layout: 'vbox',
            items: [combo1, message1, combo2, message2, combo3, message3, combo4, message4]
        })
    },

    onAppUpdate: function () {
        Ext.Msg.confirm('Application Update', 'This application has an update, reload?',
            function (choice) {
                if (choice === 'yes') {
                    window.location.reload();
                }
            }
        );
    }
});