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

   1 /**
   2  * This example illustrates a combo box which loads the data source from a server
   3  * but queries the local result set. It uses a custom item template for the dropdown list.
   4  */
   5 Ext.define('KitchenSink.view.form.combobox.RemoteLoad', {
   6     extend: 'Ext.form.Panel',
   7     xtype: 'remote-loaded-combo',
   8
   9     //<example>
  10     requires: [
  11         'KitchenSink.model.State',
  12         'KitchenSink.store.RemoteStates'
  13     ],
  14
  15     exampleTitle: 'Remote loaded ComboBox',
  16     otherContent: [{
  17         type: 'Model',
  18         path: 'classic/samples/model/State.js'
  19     }, {
  20         type: 'Store',
  21         path: 'classic/samples/store/RemoteStates.js'
  22     }],
  23     //</example>
  24
  25     title: 'Remote loaded ComboBox',
  26     width: 500,
  27     layout: 'form',
  28     viewModel: {},
  29
  30     items: [{
  31         xtype: 'fieldset',
  32         layout: 'anchor',
  33         items: [{
  34             xtype: 'component',
  35             anchor: '100%',
  36             html: [
  37                 '<h3>Remote loaded, local query mode</h3>',
  38                 '<p>This ComboBox uses remotely loaded data, to perform querying ',
  39                 'client side.</p>',
  40                 '<p>This is suitable when the dataset is not too big or dynamic ',
  41                 'to be manipulated locally.</p>',
  42                 '<p>This example uses a custom template for the dropdown list ',
  43                 'to illustrate grouping.</p>'
  44             ]
  45         }, {
  46             xtype: 'displayfield',
  47             fieldLabel: 'Selected State',
  48             bind: '{states.value}'
  49         }, {
  50             xtype: 'combobox',
  51             reference: 'states',
  52             publishes: 'value',
  53             fieldLabel: 'Select State',
  54             displayField: 'state',
  55             anchor: '-15',
  56             store: {
  57                 type: 'remote-states',
  58                 autoLoad: true
  59             },
  60             minChars: 0,
  61             queryMode: 'local',
  62             tpl: [
  63                 '<ul class="x-list-plain">',
  64                     '<tpl for=".">',
  65                         '<li class="',
  66                             Ext.baseCSSPrefix, 'grid-group-hd ',
  67                             Ext.baseCSSPrefix, 'grid-group-title">{abbr}</li>',
  68                         '<li class="x-boundlist-item">',
  69                             '{state}, {description}',
  70                         '</li>',
  71                     '</tpl>',
  72                 '</ul>'
  73             ]
  74         }]
  75     }]
  76 });