[ExtJS5学习笔记]第十六节 Extjs5使用panel新增的ViewModel属性绑定数据

本文主要是介绍[ExtJS5学习笔记]第十六节 Extjs5使用panel新增的ViewModel属性绑定数据,希望对大家解决编程问题提供一定的参考价值,需要的开发者们随着小编来一起学习吧!

本文地址: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.ViewModelThe 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中获取数据啦。


这篇关于[ExtJS5学习笔记]第十六节 Extjs5使用panel新增的ViewModel属性绑定数据的文章就介绍到这儿,希望我们推荐的文章对编程师们有所帮助!



http://www.chinasem.cn/article/751856

相关文章

SpringBoot多环境配置数据读取方式

《SpringBoot多环境配置数据读取方式》SpringBoot通过环境隔离机制,支持properties/yaml/yml多格式配置,结合@Value、Environment和@Configura... 目录一、多环境配置的核心思路二、3种配置文件格式详解2.1 properties格式(传统格式)1.

使用Python构建智能BAT文件生成器的完美解决方案

《使用Python构建智能BAT文件生成器的完美解决方案》这篇文章主要为大家详细介绍了如何使用wxPython构建一个智能的BAT文件生成器,它不仅能够为Python脚本生成启动脚本,还提供了完整的文... 目录引言运行效果图项目背景与需求分析核心需求技术选型核心功能实现1. 数据库设计2. 界面布局设计3

使用IDEA部署Docker应用指南分享

《使用IDEA部署Docker应用指南分享》本文介绍了使用IDEA部署Docker应用的四步流程:创建Dockerfile、配置IDEADocker连接、设置运行调试环境、构建运行镜像,并强调需准备本... 目录一、创建 dockerfile 配置文件二、配置 IDEA 的 Docker 连接三、配置 Do

解决pandas无法读取csv文件数据的问题

《解决pandas无法读取csv文件数据的问题》本文讲述作者用Pandas读取CSV文件时因参数设置不当导致数据错位,通过调整delimiter和on_bad_lines参数最终解决问题,并强调正确参... 目录一、前言二、问题复现1. 问题2. 通过 on_bad_lines=‘warn’ 跳过异常数据3

Android Paging 分页加载库使用实践

《AndroidPaging分页加载库使用实践》AndroidPaging库是Jetpack组件的一部分,它提供了一套完整的解决方案来处理大型数据集的分页加载,本文将深入探讨Paging库... 目录前言一、Paging 库概述二、Paging 3 核心组件1. PagingSource2. Pager3.

python使用try函数详解

《python使用try函数详解》Pythontry语句用于异常处理,支持捕获特定/多种异常、else/final子句确保资源释放,结合with语句自动清理,可自定义异常及嵌套结构,灵活应对错误场景... 目录try 函数的基本语法捕获特定异常捕获多个异常使用 else 子句使用 finally 子句捕获所

C++11右值引用与Lambda表达式的使用

《C++11右值引用与Lambda表达式的使用》C++11引入右值引用,实现移动语义提升性能,支持资源转移与完美转发;同时引入Lambda表达式,简化匿名函数定义,通过捕获列表和参数列表灵活处理变量... 目录C++11新特性右值引用和移动语义左值 / 右值常见的左值和右值移动语义移动构造函数移动复制运算符

Python对接支付宝支付之使用AliPay实现的详细操作指南

《Python对接支付宝支付之使用AliPay实现的详细操作指南》支付宝没有提供PythonSDK,但是强大的github就有提供python-alipay-sdk,封装里很多复杂操作,使用这个我们就... 目录一、引言二、准备工作2.1 支付宝开放平台入驻与应用创建2.2 密钥生成与配置2.3 安装ali

C#中lock关键字的使用小结

《C#中lock关键字的使用小结》在C#中,lock关键字用于确保当一个线程位于给定实例的代码块中时,其他线程无法访问同一实例的该代码块,下面就来介绍一下lock关键字的使用... 目录使用方式工作原理注意事项示例代码为什么不能lock值类型在C#中,lock关键字用于确保当一个线程位于给定实例的代码块中时

MySQL 强制使用特定索引的操作

《MySQL强制使用特定索引的操作》MySQL可通过FORCEINDEX、USEINDEX等语法强制查询使用特定索引,但优化器可能不采纳,需结合EXPLAIN分析执行计划,避免性能下降,注意版本差异... 目录1. 使用FORCE INDEX语法2. 使用USE INDEX语法3. 使用IGNORE IND