add extjs 6.0.1 sources

[extjs.git] / extjs / examples / kitchensink / classic / samples / view / form / combobox / RemoteLoad.js

/**\r
 * This example illustrates a combo box which loads the data source from a server\r
 * but queries the local result set. It uses a custom item template for the dropdown list.\r
 */\r
Ext.define('KitchenSink.view.form.combobox.RemoteLoad', {\r
    extend: 'Ext.form.Panel',\r
    xtype: 'remote-loaded-combo',\r
\r
    //<example>\r
    requires: [\r
        'KitchenSink.model.State',\r
        'KitchenSink.store.RemoteStates'\r
    ],\r
    \r
    exampleTitle: 'Remote loaded ComboBox',\r
    otherContent: [{\r
        type: 'Model',\r
        path: 'classic/samples/model/State.js'\r
    }, {\r
        type: 'Store',\r
        path: 'classic/samples/store/RemoteStates.js'\r
    }],\r
    //</example>\r
    \r
    title: 'Remote loaded ComboBox',\r
    width: 500,\r
    layout: 'form',\r
    viewModel: {},\r
    \r
    items: [{\r
        xtype: 'fieldset',\r
        layout: 'anchor',\r
        items: [{\r
            xtype: 'component',\r
            anchor: '100%',\r
            html: [\r
                '<h3>Remote loaded, local query mode</h3>',\r
                '<p>This ComboBox uses remotely loaded data, to perform querying ',\r
                'client side.</p>',\r
                '<p>This is suitable when the dataset is not too big or dynamic ',\r
                'to be manipulated locally.</p>',\r
                '<p>This example uses a custom template for the dropdown list ',\r
                'to illustrate grouping.</p>'\r
            ]\r
        }, {\r
            xtype: 'displayfield',\r
            fieldLabel: 'Selected State',\r
            bind: '{states.value}'\r
        }, {\r
            xtype: 'combobox',\r
            reference: 'states',\r
            publishes: 'value',\r
            fieldLabel: 'Select State',\r
            displayField: 'state',\r
            anchor: '-15',\r
            store: {\r
                type: 'remote-states',\r
                autoLoad: true\r
            },\r
            minChars: 0,\r
            queryMode: 'local',\r
            tpl: [\r
                '<ul class="x-list-plain">',\r
                    '<tpl for=".">',\r
                        '<li class="',\r
                            Ext.baseCSSPrefix, 'grid-group-hd ',\r
                            Ext.baseCSSPrefix, 'grid-group-title">{abbr}</li>',\r
                        '<li class="x-boundlist-item">',\r
                            '{state}, {description}',\r
                        '</li>',\r
                    '</tpl>',\r
                '</ul>'\r
            ]\r
        }]\r
    }]\r
});\r