Ext.require([
    'Ext.form.field.ComboBox',
    'Ext.window.MessageBox',
    'Ext.form.FieldSet',
    'Ext.tip.QuickTipManager',
    'Ext.data.*'
]);

// Define the model for a State
Ext.define('State', {
    extend: 'Ext.data.Model',
    fields: [
        {type: 'string', name: 'abbr'},
        {type: 'string', name: 'name'},
        {type: 'string', name: 'slogan'}
    ]
});

// The data for all states
var states = [
    {"abbr":"AL","name":"Alabama","slogan":"The Heart of Dixie"},
    {"abbr":"AK","name":"Alaska","slogan":"The Land of the Midnight Sun"},
    {"abbr":"AZ","name":"Arizona","slogan":"The Grand Canyon State"},
    {"abbr":"AR","name":"Arkansas","slogan":"The Natural State"},
    {"abbr":"CA","name":"California","slogan":"The Golden State"},
    {"abbr":"CO","name":"Colorado","slogan":"The Mountain State"},
    {"abbr":"CT","name":"Connecticut","slogan":"The Constitution State"},
    {"abbr":"DE","name":"Delaware","slogan":"The First State"},
    {"abbr":"DC","name":"District of Columbia","slogan":"The Nation's Capital"},
    {"abbr":"FL","name":"Florida","slogan":"The Sunshine State"},
    {"abbr":"GA","name":"Georgia","slogan":"The Peach State"},
    {"abbr":"HI","name":"Hawaii","slogan":"The Aloha State"},
    {"abbr":"ID","name":"Idaho","slogan":"Famous Potatoes"},
    {"abbr":"IL","name":"Illinois","slogan":"The Prairie State"},
    {"abbr":"IN","name":"Indiana","slogan":"The Hospitality State"},
    {"abbr":"IA","name":"Iowa","slogan":"The Corn State"},
    {"abbr":"KS","name":"Kansas","slogan":"The Sunflower State"},
    {"abbr":"KY","name":"Kentucky","slogan":"The Bluegrass State"},
    {"abbr":"LA","name":"Louisiana","slogan":"The Bayou State"},
    {"abbr":"ME","name":"Maine","slogan":"The Pine Tree State"},
    {"abbr":"MD","name":"Maryland","slogan":"Chesapeake State"},
    {"abbr":"MA","name":"Massachusetts","slogan":"The Spirit of America"},
    {"abbr":"MI","name":"Michigan","slogan":"Great Lakes State"},
    {"abbr":"MN","name":"Minnesota","slogan":"North Star State"},
    {"abbr":"MS","name":"Mississippi","slogan":"Magnolia State"},
    {"abbr":"MO","name":"Missouri","slogan":"Show Me State"},
    {"abbr":"MT","name":"Montana","slogan":"Big Sky Country"},
    {"abbr":"NE","name":"Nebraska","slogan":"Beef State"},
    {"abbr":"NV","name":"Nevada","slogan":"Silver State"},
    {"abbr":"NH","name":"New Hampshire","slogan":"Granite State"},
    {"abbr":"NJ","name":"New Jersey","slogan":"Garden State"},
    {"abbr":"NM","name":"New Mexico","slogan":"Land of Enchantment"},
    {"abbr":"NY","name":"New York","slogan":"Empire State"},
    {"abbr":"NC","name":"North Carolina","slogan":"First in Freedom"},
    {"abbr":"ND","name":"North Dakota","slogan":"Peace Garden State"},
    {"abbr":"OH","name":"Ohio","slogan":"The Heart of it All"},
    {"abbr":"OK","name":"Oklahoma","slogan":"Oklahoma is OK"},
    {"abbr":"OR","name":"Oregon","slogan":"Pacific Wonderland"},
    {"abbr":"PA","name":"Pennsylvania","slogan":"Keystone State"},
    {"abbr":"RI","name":"Rhode Island","slogan":"Ocean State"},
    {"abbr":"SC","name":"South Carolina","slogan":"Nothing Could be Finer"},
    {"abbr":"SD","name":"South Dakota","slogan":"Great Faces, Great Places"},
    {"abbr":"TN","name":"Tennessee","slogan":"Volunteer State"},
    {"abbr":"TX","name":"Texas","slogan":"Lone Star State"},
    {"abbr":"UT","name":"Utah","slogan":"Salt Lake State"},
    {"abbr":"VT","name":"Vermont","slogan":"Green Mountain State"},
    {"abbr":"VA","name":"Virginia","slogan":"Mother of States"},
    {"abbr":"WA","name":"Washington","slogan":"Green Tree State"},
    {"abbr":"WV","name":"West Virginia","slogan":"Mountain State"},
    {"abbr":"WI","name":"Wisconsin","slogan":"America's Dairyland"},
    {"abbr":"WY","name":"Wyoming","slogan":"Like No Place on Earth"}
];

function createStore() {
    // The data store holding the states; shared by each of the ComboBox examples below
    return Ext.create('Ext.data.Store', {
        autoDestroy: true,
        model: 'State',
        data: states
    });
}

Ext.onReady(function() {
    Ext.tip.QuickTipManager.init();

    var bookStore = new Ext.data.Store({
        proxy: {
            type: 'jsonp',
            startParam: 'startIndex',
            limitParam: 'maxResults',
            url: 'https://www.googleapis.com/books/v1/volumes',
            reader: {
                type: 'json',
                totalProperty: 'totalItems',
                root: 'items'
            }
        },
        fields: [{
            name: 'title',
            mapping: function(raw) {
                var result = raw.volumeInfo.title;
                if (raw.volumeInfo.subtitle) {
                    result = result + ' - ' + raw.volumeInfo.subtitle;
                }
                return result;
            }
        }, {
            name: 'ISBN',
            mapping: function(raw) {
                var ids = raw.volumeInfo.industryIdentifiers;
                return ids ? ids[0].identifier : 'No identifier for this book';
            }
        }]
    });

    var bookCombo = Ext.create('Ext.form.field.ComboBox', {
        fieldLabel: 'Select Book',
        renderTo: 'remoteQueryCombo',
        displayField: 'title',
        valueField: 'ISBN',
        width: 500,
        labelWidth: 130,
        store: bookStore,
        queryParam: 'q',
        queryMode: 'remote',

        // Do not use the default "all" for unbounded remote datasets.
        // Issue the last query again.
        // We could also have used the hideTrigger config
        triggerAction: 'last',

         listConfig: {
            getInnerTpl: function() {
                return '{%var value = this.field.getRawValue().replace(/([.?*+^$[\\]\\\\(){}|-])/g, "\\\\$1");%}' + 
                    '{[values.title.replace(new RegExp(value, "i"), function(m) {return "<b>" + m + "</b>";})]}';
            }
        },
        listeners: {
            select: function() {
                Ext.Msg.alert('Chosen book', 'Buying ISBN: ' + this.getValue());
            }
        }
    });

    var Country = Ext.define('Country', {
            extend: 'Ext.data.Model',
            fields: ['name', {
                name: 'region',
                mapping: 'region.value'
            }]
        }),
        countryStore = new Ext.data.Store({
            model: Country,
            proxy: {
                type: 'jsonp',
                callbackKey: 'prefix',
                limitParam: 'per_page',
                url: 'http://api.worldbank.org/countries?format=jsonp',
                reader: {
                    type: 'json',

                    // Response is an array where element [1] is the array of records
                    getData: function(raw) {
                        return raw[1];
                    }
                }
            },
            sorters: {
                property: 'region'
            },

            // Data includes aggregates which are not countries
            filters: {
                fn: function(rec) {
                    return rec.get('region') !== 'Aggregates'
                }
            },
            // Load whole dataset.
            // API only returns 25 by default.
            pageSize: 1000,
            autoLoad: true
        });

    var countryCombo = Ext.create('Ext.form.field.ComboBox', {
        fieldLabel: 'Select Country',
        renderTo: 'remoteLoadedCombo',
        displayField: 'name',
        width: 500,
        labelWidth: 130,
        store: countryStore,
        queryMode: 'local',
        tpl: '<ul class="x-list-plain">' +
                '{% var lastRegion, region; %}' +
                '<tpl for=".">' +
                    '{% region = values.region;' +
                    // Only show region headers when there are more than 10 choices
                    'if (this.store.getCount() > 10 && region !== lastRegion) {' + 
                        'lastRegion = region;%}' +
                        '<li class="x-grid-group-hd x-grid-group-title">{region}</li>' +
                    '{%}%}'+
                    '<li class="x-boundlist-item">' +
                        '{name}' +
                    '</li>'+
                '</tpl>'+
            '</ul>'
    });

    // Simple ComboBox using the data store
    var simpleCombo = Ext.create('Ext.form.field.ComboBox', {
        fieldLabel: 'Select a single state',
        renderTo: 'simpleCombo',
        displayField: 'name',
        width: 320,
        labelWidth: 130,
        store: createStore(),
        queryMode: 'local',
        typeAhead: true
    });

    // ComboBox with a custom item template
    var customTplCombo = Ext.create('Ext.form.field.ComboBox', {
        fieldLabel: 'Select a single state',
        renderTo: 'customTplCombo',
        displayField: 'name',
        width: 320,
        labelWidth: 130,
        store: createStore(),
        queryMode: 'local',
        listConfig: {
            getInnerTpl: function() {
                return '<div data-qtip="{name}. {slogan}">{name} ({abbr})</div>';
            }
        }
    });

    // ComboBox with multiple selection enabled
    var multiCombo = Ext.create('Ext.form.field.ComboBox', {
        fieldLabel: 'Select multiple states',
        renderTo: 'multiSelectCombo',
        multiSelect: true,
        displayField: 'name',
        width: 320,
        labelWidth: 130,
        store: createStore(),
        queryMode: 'local'
    });

    // ComboBox transformed from HTML select
    var transformed = Ext.create('Ext.form.field.ComboBox', {
        typeAhead: true,
        transform: 'stateSelect',
        width: 135,
        forceSelection: true
    });

    ////// Collapsible code panels; ignore: /////

    Ext.select('pre.code').each(function(pre) {
        Ext.create('Ext.form.FieldSet', {
            contentEl: pre,
            renderTo: pre.parent(),
            title: 'View code for this example',
            collapsible: true,
            collapsed: true
        });
    });
});