projects / extjs.git / blame
| Commit | Line | Data |
|---|---|---|
| 6527f429 DM |
1 | /**\r |
| 2 | * This example shows simple association binding. The orders grid is bound to the orders\r | |
| 3 | * of the selected customer. The binding statement is able to interpret that orders is an\r | |
| 4 | * association and can show the orders for our customer.\r | |
| 5 | */\r | |
| 6 | Ext.define('KitchenSink.view.binding.Associations', {\r | |
| 7 | extend: 'Ext.panel.Panel',\r | |
| 8 | alias: 'widget.binding-associations',\r | |
| 9 | width: 500,\r | |
| 10 | height: 300,\r | |
| 11 | referenceHolder: true,\r | |
| 12 | layout: 'hbox',\r | |
| 13 | //<example>\r | |
| 14 | otherContent: [{\r | |
| 15 | type: 'Model',\r | |
| 16 | path: 'classic/samples/model/Customer.js'\r | |
| 17 | },{\r | |
| 18 | type: 'Model',\r | |
| 19 | path: 'classic/samples/model/Order.js'\r | |
| 20 | },{\r | |
| 21 | type: 'Data',\r | |
| 22 | path: 'classic/samples/data/Customer.js'\r | |
| 23 | },{\r | |
| 24 | type: 'Data',\r | |
| 25 | path: 'classic/samples/data/Order.js'\r | |
| 26 | }],\r | |
| 27 | //</example>\r | |
| 28 | viewModel: {\r | |
| 29 | stores: {\r | |
| 30 | customers: {\r | |
| 31 | model: 'Customer',\r | |
| 32 | autoLoad: true\r | |
| 33 | }\r | |
| 34 | }\r | |
| 35 | },\r | |
| 36 | session: {},\r | |
| 37 | \r | |
| 38 | items: [{\r | |
| 39 | title: 'All Customers',\r | |
| 40 | xtype: 'grid',\r | |
| 41 | bind: '{customers}',\r | |
| 42 | reference: 'customerGrid',\r | |
| 43 | flex: 1,\r | |
| 44 | columns: [{\r | |
| 45 | text: 'Name', dataIndex: 'name', flex: 1\r | |
| 46 | }, {\r | |
| 47 | text: 'Phone', dataIndex: 'phone'\r | |
| 48 | }]\r | |
| 49 | }, {\r | |
| 50 | title: 'Orders',\r | |
| 51 | xtype: 'grid',\r | |
| 52 | bind: '{customerGrid.selection.orders}',\r | |
| 53 | flex: 1,\r | |
| 54 | margin: '0 0 0 10',\r | |
| 55 | columns: [{\r | |
| 56 | text: 'Date', xtype: 'datecolumn', dataIndex: 'date', flex: 1, format: 'Y-m-d'\r | |
| 57 | }, {\r | |
| 58 | text: 'Shipped', xtype: 'booleancolumn', dataIndex: 'shipped',\r | |
| 59 | trueText: '✓', falseText: '-', align: 'center'\r | |
| 60 | }],\r | |
| 61 | viewConfig: {\r | |
| 62 | emptyText: 'No orders',\r | |
| 63 | deferEmptyText: false\r | |
| 64 | }\r | |
| 65 | }]\r | |
| 66 | });\r |