]>
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 |