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: {}, 为空就可以了
*/