projects / extjs.git / blame
| Commit | Line | Data |
|---|---|---|
| 6527f429 DM |
1 | /**\r |
| 2 | * This example demonstrates a chained store, a store that is backed by the data of another\r | |
| 3 | * store. Sorting and filtering of the stores are independent. Removing a value in the source\r | |
| 4 | * store removes it from the chained store. Model instances are shared, so editing the data\r | |
| 5 | * in one store will be reflected in the other.\r | |
| 6 | */\r | |
| 7 | Ext.define('KitchenSink.view.binding.ChainedStores', {\r | |
| 8 | extend: 'Ext.container.Container',\r | |
| 9 | xtype: 'binding-chained-stores',\r | |
| 10 | //<example>\r | |
| 11 | requires: [\r | |
| 12 | 'Ext.layout.container.VBox',\r | |
| 13 | 'Ext.layout.container.HBox',\r | |
| 14 | 'Ext.grid.Panel',\r | |
| 15 | 'KitchenSink.model.Person',\r | |
| 16 | 'KitchenSink.view.binding.ChainedStoresModel',\r | |
| 17 | 'KitchenSink.view.binding.ChainedStoresController'\r | |
| 18 | ],\r | |
| 19 | otherContent: [{\r | |
| 20 | type: 'ViewModel',\r | |
| 21 | path: 'classic/samples/view/binding/ChainedStoresModel.js'\r | |
| 22 | }, {\r | |
| 23 | type: 'ViewController',\r | |
| 24 | path: 'classic/samples/view/binding/ChainedStoresController.js'\r | |
| 25 | }, {\r | |
| 26 | type: 'Model',\r | |
| 27 | path: 'classic/samples/model/Person.js'\r | |
| 28 | }],\r | |
| 29 | //</example>\r | |
| 30 | \r | |
| 31 | width: 680,\r | |
| 32 | height: 600,\r | |
| 33 | layout: {\r | |
| 34 | type: 'vbox',\r | |
| 35 | align: 'stretch'\r | |
| 36 | },\r | |
| 37 | \r | |
| 38 | viewModel: 'binding.chainedstores',\r | |
| 39 | controller: 'binding.chainedstores',\r | |
| 40 | \r | |
| 41 | items: [{\r | |
| 42 | xtype: 'grid',\r | |
| 43 | bind: '{everyone}',\r | |
| 44 | title: 'All People',\r | |
| 45 | flex: 1,\r | |
| 46 | columns: [{\r | |
| 47 | dataIndex: 'firstName',\r | |
| 48 | text: 'First Name',\r | |
| 49 | flex: 1,\r | |
| 50 | field: 'textfield'\r | |
| 51 | }, {\r | |
| 52 | dataIndex: 'lastName',\r | |
| 53 | text: 'Last Name',\r | |
| 54 | flex: 1,\r | |
| 55 | field: 'textfield'\r | |
| 56 | }, {\r | |
| 57 | dataIndex: 'age',\r | |
| 58 | text: 'Age',\r | |
| 59 | width: 120,\r | |
| 60 | field: 'numberfield',\r | |
| 61 | align: 'right'\r | |
| 62 | }, {\r | |
| 63 | dataIndex: 'favoriteColor',\r | |
| 64 | text: 'Fav. Color',\r | |
| 65 | flex: 1,\r | |
| 66 | renderer: 'renderColor',\r | |
| 67 | field: 'textfield'\r | |
| 68 | }, {\r | |
| 69 | xtype: 'widgetcolumn',\r | |
| 70 | width: 110,\r | |
| 71 | widget: {\r | |
| 72 | xtype: 'button',\r | |
| 73 | text: 'Remove',\r | |
| 74 | handler: 'onRemoveClick'\r | |
| 75 | }\r | |
| 76 | }],\r | |
| 77 | plugins: [{\r | |
| 78 | ptype: 'rowediting',\r | |
| 79 | listeners: {\r | |
| 80 | edit: 'onEditComplete'\r | |
| 81 | }\r | |
| 82 | }]\r | |
| 83 | }, {\r | |
| 84 | xtype: 'grid',\r | |
| 85 | bind: {\r | |
| 86 | store: '{adults}',\r | |
| 87 | title: 'People aged {minimumAge} or over'\r | |
| 88 | },\r | |
| 89 | flex: 1,\r | |
| 90 | reference: 'adultsGrid',\r | |
| 91 | margin: '10 0 0 0',\r | |
| 92 | tbar: [{\r | |
| 93 | xtype: 'slider',\r | |
| 94 | fieldLabel: 'Minimum Age',\r | |
| 95 | width: 300,\r | |
| 96 | bind: '{minimumAge}'\r | |
| 97 | }],\r | |
| 98 | columns: [{\r | |
| 99 | dataIndex: 'firstName',\r | |
| 100 | text: 'First Name',\r | |
| 101 | flex: 1\r | |
| 102 | }, {\r | |
| 103 | dataIndex: 'lastName',\r | |
| 104 | text: 'Last Name',\r | |
| 105 | flex: 1\r | |
| 106 | }, {\r | |
| 107 | dataIndex: 'age',\r | |
| 108 | text: 'Age',\r | |
| 109 | width: 120,\r | |
| 110 | align: 'right'\r | |
| 111 | }, {\r | |
| 112 | dataIndex: 'favoriteColor',\r | |
| 113 | text: 'Fav. Color',\r | |
| 114 | flex: 1,\r | |
| 115 | renderer: 'renderColor'\r | |
| 116 | }]\r | |
| 117 | }]\r | |
| 118 | }); |