extjs5 一个容器中有几个组件公用一个控制器和一个模型

时间:2023-11-10 21:56:50
 Ext.define('TestViewModel', {
extend: 'Ext.app.ViewModel', alias: 'viewmodel.test', // connects to viewModel/type below
constructor: function(config){
//这里可以看出实例化了几次的 model
console.log(config);
this.callParent(config);
}, data: {
firstName: 'John',
lastName: 'Doe'
}, formulas: {
// We'll explain formulas in more detail soon.
name: function (get) {
var fn = get('firstName'), ln = get('lastName');
return (fn && ln) ? (fn + ' ' + ln) : (fn || ln || '');
}
}
}); Ext.define('TestView', {
extend: 'Ext.panel.Panel',
layout: 'form', requires: [
'TestViewModel'
], // Always use this form when defining a view class. This
// allows the creator of the component to pass data without
// erasing the ViewModel type that we want.
viewModel: {
type: 'test' // references alias "viewmodel.test"
}, bind: {
title: 'Hello {name}'
}, defaultType: 'textfield',
items: [{
fieldLabel: 'First Name',
bind: '{firstName}'
},{
fieldLabel: 'Last Name',
bind:{
value: '{lastName}'
}
},{
xtype: 'button',
text: 'Submit',
bind: {
hidden: '{!name}'
}
},{
xtype: 'demo'
}]
}); Ext.onReady(function () {
Ext.create('TestView', {
renderTo: Ext.getBody(),
width: 400
});
}); Ext.define('Demo', {
extend: 'Ext.panel.Panel',
layout: 'form',
alias: 'widget.demo', requires: [
'TestViewModel'
],
// Always use this form when defining a view class. This
// allows the creator of the component to pass data without
// erasing the ViewModel type that we want.
initComponent: function(){
//this.ownerCt
//var parent = this.findParentByType('panel');
//console.log(parent.title); var f = this.getViewModel().get('firstName');
console.log(f);
this.callParent(arguments);
},
//这个地方为空,就可以和主容器使用相同的一个model,如果你viewModel:{type: test},就相当于又
//实例化了一个model
viewModel: { }, bind: {
title: '{firstName}'
} });

/*
当一个容器中有几个组件公用一个控制器和一个模型
在组件中 使用 controller: 'main'时 可以容器组件共用一个,此时实例化容器时,也就是一个控制器
但是在 组件中 使用 viewModel:type: 'main' 时,就需要考虑了,因为每个组件都会实例化一个
模型,如果想容器和组件共用一个模型,一个实例化。就在容器中设置viewModel:{type: 'main'},组件中设置 viewModel: {}, 为空就可以了
*/