projects / extjs.git / blame
| Commit | Line | Data |
|---|---|---|
| 6527f429 DM |
1 | /**\r |
| 2 | * This example illustrates a combo box which loads data from a local array\r | |
| 3 | * and uses a custom item template.\r | |
| 4 | */\r | |
| 5 | Ext.define('KitchenSink.view.form.combobox.CustomTemplate', {\r | |
| 6 | extend: 'Ext.form.Panel',\r | |
| 7 | xtype: 'custom-template-combo',\r | |
| 8 | \r | |
| 9 | //<example>\r | |
| 10 | requires: [\r | |
| 11 | 'KitchenSink.model.State',\r | |
| 12 | 'KitchenSink.store.States'\r | |
| 13 | ],\r | |
| 14 | \r | |
| 15 | exampleTitle: 'Custom Template ComboBox',\r | |
| 16 | otherContent: [{\r | |
| 17 | type: 'Model',\r | |
| 18 | path: 'classic/samples/model/State.js'\r | |
| 19 | }, {\r | |
| 20 | type: 'Store',\r | |
| 21 | path: 'classic/samples/store/States.js'\r | |
| 22 | }],\r | |
| 23 | //</example>\r | |
| 24 | \r | |
| 25 | title: 'Custom Template ComboBox',\r | |
| 26 | width: 500,\r | |
| 27 | layout: 'form',\r | |
| 28 | viewModel: {},\r | |
| 29 | \r | |
| 30 | items: [{\r | |
| 31 | xtype: 'fieldset',\r | |
| 32 | layout: 'anchor',\r | |
| 33 | items: [{\r | |
| 34 | xtype: 'component',\r | |
| 35 | anchor: '100%',\r | |
| 36 | html: [\r | |
| 37 | '<h3>Custom Item Templates</h3>',\r | |
| 38 | '<p>This ComboBox uses the same data, but also illustrates ',\r | |
| 39 | 'how to use an optional custom template to create custom UI ',\r | |
| 40 | 'renditions for list items by overriding the getInnerTpl method. ',\r | |
| 41 | 'In this case each item shows the state\'s abbreviation, and has ',\r | |
| 42 | 'a QuickTip which displays the state\'s nickname when hovered over.</p>'\r | |
| 43 | ]\r | |
| 44 | }, {\r | |
| 45 | xtype: 'displayfield',\r | |
| 46 | fieldLabel: 'Selected State',\r | |
| 47 | bind: '{states.value}'\r | |
| 48 | }, {\r | |
| 49 | xtype: 'combobox',\r | |
| 50 | reference: 'states',\r | |
| 51 | publishes: 'value',\r | |
| 52 | fieldLabel: 'Select State',\r | |
| 53 | displayField: 'state',\r | |
| 54 | anchor: '-15',\r | |
| 55 | store: {\r | |
| 56 | type: 'states'\r | |
| 57 | },\r | |
| 58 | queryMode: 'local',\r | |
| 59 | listConfig: {\r | |
| 60 | itemTpl: [\r | |
| 61 | '<div data-qtip="{state}: {description}">{state} ({abbr})</div>'\r | |
| 62 | ]\r | |
| 63 | }\r | |
| 64 | }]\r | |
| 65 | }]\r | |
| 66 | });\r |