extjs5 一个容器中有几个组件公用一个控制器和一个模型
1 Ext.define('TestViewModel', { 2 extend: 'Ext.app.ViewModel', 3 4 alias: 'viewmodel.test', // connects to viewModel/type below 5 constructor: function(config){ 6 //这里可以看出实例化了几次的 model 7 console.log(config); 8 this.callParent(config); 9 }, 10 11 data: { 12 firstName: 'John', 13 lastName: 'Doe' 14 }, 15 16 formulas: { 17 // We'll explain formulas in more detail soon. 18 name: function (get) { 19 var fn = get('firstName'), ln = get('lastName'); 20 return (fn && ln) ? (fn + ' ' + ln) : (fn || ln || ''); 21 } 22 } 23 }); 24 25 Ext.define('TestView', { 26 extend: 'Ext.panel.Panel', 27 layout: 'form', 28 29 requires: [ 30 'TestViewModel' 31 ], 32 33 // Always use this form when defining a view class. This 34 // allows the creator of the component to pass data without 35 // erasing the ViewModel type that we want. 36 viewModel: { 37 type: 'test' // references alias "viewmodel.test" 38 }, 39 40 bind: { 41 title: 'Hello {name}' 42 }, 43 44 defaultType: 'textfield', 45 items: [{ 46 fieldLabel: 'First Name', 47 bind: '{firstName}' 48 },{ 49 fieldLabel: 'Last Name', 50 bind:{ 51 value: '{lastName}' 52 } 53 },{ 54 xtype: 'button', 55 text: 'Submit', 56 bind: { 57 hidden: '{!name}' 58 } 59 },{ 60 xtype: 'demo' 61 }] 62 }); 63 64 Ext.onReady(function () { 65 Ext.create('TestView', { 66 renderTo: Ext.getBody(), 67 width: 400 68 }); 69 }); 70 71 72 Ext.define('Demo', { 73 extend: 'Ext.panel.Panel', 74 layout: 'form', 75 alias: 'widget.demo', 76 77 requires: [ 78 'TestViewModel' 79 ], 80 // Always use this form when defining a view class. This 81 // allows the creator of the component to pass data without 82 // erasing the ViewModel type that we want. 83 initComponent: function(){ 84 //this.ownerCt 85 //var parent = this.findParentByType('panel'); 86 //console.log(parent.title); 87 88 var f = this.getViewModel().get('firstName'); 89 console.log(f); 90 this.callParent(arguments); 91 }, 92 //这个地方为空,就可以和主容器使用相同的一个model,如果你viewModel:{type: test},就相当于又 93 //实例化了一个model 94 viewModel: { 95 96 }, 97 98 bind: { 99 title: '{firstName}' 100 } 101 102 });
/*
当一个容器中有几个组件公用一个控制器和一个模型
在组件中 使用 controller: 'main'时 可以容器组件共用一个,此时实例化容器时,也就是一个控制器
但是在 组件中 使用 viewModel:type: 'main' 时,就需要考虑了,因为每个组件都会实例化一个
模型,如果想容器和组件共用一个模型,一个实例化。就在容器中设置viewModel:{type: 'main'},组件中设置 viewModel: {}, 为空就可以了
*/