projects / extjs.git / blame
| Commit | Line | Data |
|---|---|---|
| 6527f429 DM |
1 | /**\r |
| 2 | * This example shows selection binding. The selection from each component\r | |
| 3 | * is bound to the same source and is automatically updated when a selection\r | |
| 4 | * in any component changes.\r | |
| 5 | */\r | |
| 6 | Ext.define('KitchenSink.view.binding.Selection', {\r | |
| 7 | extend: 'Ext.panel.Panel',\r | |
| 8 | alias: 'widget.binding-selection',\r | |
| 9 | width: 600,\r | |
| 10 | height: 270,\r | |
| 11 | \r | |
| 12 | //<example>\r | |
| 13 | otherContent: [{\r | |
| 14 | type: 'Model',\r | |
| 15 | path: 'classic/samples/model/Customer.js'\r | |
| 16 | },{\r | |
| 17 | type: 'Model',\r | |
| 18 | path: 'classic/samples/model/field/PhoneNumber.js'\r | |
| 19 | },{\r | |
| 20 | type: 'Data',\r | |
| 21 | path: 'classic/samples/data/Customer.js'\r | |
| 22 | }],\r | |
| 23 | //</example>\r | |
| 24 | \r | |
| 25 | viewModel: {\r | |
| 26 | stores: {\r | |
| 27 | customers: {\r | |
| 28 | model: 'Customer',\r | |
| 29 | autoLoad: true\r | |
| 30 | }\r | |
| 31 | }\r | |
| 32 | },\r | |
| 33 | \r | |
| 34 | layout: 'vbox',\r | |
| 35 | \r | |
| 36 | items: [{\r | |
| 37 | xtype: 'combobox',\r | |
| 38 | margin: '10 0 0 10',\r | |
| 39 | forceSelection: true,\r | |
| 40 | editable: false,\r | |
| 41 | displayField: 'name',\r | |
| 42 | valueField: 'id',\r | |
| 43 | triggerAction: 'all',\r | |
| 44 | queryMode: 'local',\r | |
| 45 | labelWidth: 160,\r | |
| 46 | bind: {\r | |
| 47 | store: '{customers}',\r | |
| 48 | selection: '{selectedCustomer}'\r | |
| 49 | },\r | |
| 50 | fieldLabel: 'Customer Combo'\r | |
| 51 | }, {\r | |
| 52 | xtype: 'container',\r | |
| 53 | width: 600,\r | |
| 54 | margin: '15 0 0 0',\r | |
| 55 | flex: 1,\r | |
| 56 | layout: {\r | |
| 57 | type: 'hbox',\r | |
| 58 | align: 'stretch'\r | |
| 59 | },\r | |
| 60 | padding: 15,\r | |
| 61 | items: [{\r | |
| 62 | title: 'Customers Grid',\r | |
| 63 | flex: 1,\r | |
| 64 | xtype: 'grid',\r | |
| 65 | bind: {\r | |
| 66 | store: '{customers}',\r | |
| 67 | selection: '{selectedCustomer}'\r | |
| 68 | },\r | |
| 69 | columns: [{\r | |
| 70 | text: 'Name', dataIndex: 'name', flex: 1\r | |
| 71 | }, {\r | |
| 72 | text: 'Phone', dataIndex: 'phone'\r | |
| 73 | }]\r | |
| 74 | }, {\r | |
| 75 | flex: 1,\r | |
| 76 | cls: 'binding-selection-view',\r | |
| 77 | itemSelector: '.customer',\r | |
| 78 | xtype: 'dataview',\r | |
| 79 | tpl: '<h1>Customer View</h1><tpl for="."><div class="customer"><div class="indicator"></div>{name}<div class="indicator rtl"></div></div></tpl>',\r | |
| 80 | bind: {\r | |
| 81 | store: '{customers}',\r | |
| 82 | selection: '{selectedCustomer}'\r | |
| 83 | }\r | |
| 84 | }]\r | |
| 85 | }]\r | |
| 86 | });\r |