本文地址：http://blog.csdn.net/sushengmiyan/article/details/39078627

sencha官方API:http://docs.sencha.com/extjs/5.0/apidocs/#!/api/Ext.panel.Panel-cfg-viewModel

本文作者：sushengmiyan

------------------------------------------------------------------------------------------------------------------------------------

Sencha ext js 5之前的版本中是没有viewmodel这个概念的，现在extjs5既然支持mvvm模式了，那么她的组件也就相应的增加了对mvvm的默认支持。现在看看我们经常使用的panel组件对mvvm模式的强大支持。

先看看文档对panel的viewmodel属性的定义：

viewModel : String/Object/Ext.app.ViewModel

The ViewModel is a data provider for this component and its children. The data contained in the ViewModel is typically used by adding bind configs to the components that want present or edit this data.

When set, the ViewModel is created and links to any inherited viewModel instance from an ancestor container as the "parent". The ViewModel hierarchy, once established, only supports creation or destruction of children. The parent of a ViewModel cannot be changed on the fly.

If this is a root-level ViewModel, the data model connection is made to this component's associated Data Session. This is determined by calling getInheritedSession.

Defaults to: {$value: null, lazy: true}

将上述信息翻译一下如下：

viewModel:属性可以设置为字符串String或者Object对象或者是Ext.app.ViewModel

ViewModel是这个组件和子构件的数据提供者，ViewModel中包含的数据典型的使用方法就是增加bind配置到想呈现或者编辑数据的组件上。

当设置好了，viewmodel就创建并连接到继承层次上任何父组件，一旦创建，父组件就无法更改子构件。

如果是根viewmodel，datamodel就关联到数据节点，这有获取继承节点来决定。

默认：{$value:null, lazy:true}

简单说，就是当你想在panle中获取其他model的data中的数据的时候，就需要制定viewmodel，这有就可以从viewmodel中获取数据啦。