ExtJS viewModel 向下传递

最新推荐文章于 2021-08-05 20:13:45 发布
最新推荐文章于 2021-08-05 20:13:45 发布
阅读量3.7k 收藏 2
点赞数 1
分类专栏： ExtJS 文章标签： ExtJS6 ExtJS ViewModel viewModel继承 控件viewmodel共享 ExtJS bind绑定
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/ZYD45/article/details/87867454
版权
本文探讨了在ExtJS中如何实现viewModel的层级传递，特别是在子控件中绑定父控件甚至更高层级viewModel的值。通过lookupViewModel方法，可以实现不同层级的viewModel值的获取和改变。示例中展示了四层控件结构，从顶层到子控件，展示了如何利用lookupViewModel和bind绑定机制来实现状态控制。
摘要由CSDN通过智能技术生成

在之前的文章讲过全局使用viewModel，也讲过浮动层的viewModel双向绑定，还有讲过通过viewModel绑定方法。

但是，对于viewModel向下传递：子控件bind父控件viewModel中的值，甚至孙子辈控件中的某个属性，bind爷爷辈控件viewModel中的值，效果如下图（子控件也可以更改父辈控件viewModel的值）

在进行传递和改变不同层级viewModel的值，一个重要的方法lookupViewModel([skipThis])

lookupViewModel方法：

控件对象.lookupViewModel(

最低0.47元/天 解锁文章
29号同学
关注
专栏目录
[ExtJS]全局viewModel教程
拒绝成猿的程序员
05-11 5653
viewModel是一个为页面提供数据交互的模型，通常和bind进行同时使用 一般可以为组件声明下viewmodel的属性 viewModel:{ data:{ key:value } } 这个主要是为 其设置了viewModel的组件，的子组件，提供相应的绑定数据。 就是下面的结构 { xtype:'组件1', viewModel:{ ...
[ExtJS] viewModel 你所不知道的坑（一）缓存
拒绝成猿的程序员
10-30 1166
之前在一些文章都介绍过viewModel,一个页面状态控制机 、[ExtJS] viewModel绑定监听方法 控件动态绑定方法、[ExtJS]全局viewModel教程 有了它后，我们可以很方便地控制页面控件的隐藏显示，信息展示等。 但是，对于viewModel在深究一下，会发现一些问题： viewModel机制 一般我们会在一个父类 或 同类中设置一个viewModel { ...
ExtJS全局路由+ViewModel
05-11
ExtJS viewmport指定路由，全局配置+ViewModel切换变量
[ExtJS] reference 引用查找器 与viewModel
拒绝成猿的程序员
06-19 1195
reference 作为元素的查找标识，经常在项目中使用。 但是今天发现一件事： 有reference属性的控件，在其viewModel中会自动生成一个值。 示例： { xtype:'container', id:'demo', viewModel:{}, items:[ { xtype:'textfield', reference:'A' } ] } 为一个textfield...
【extjs6学习笔记】1.14 初始: ViewModel
weixin_34177064的博客
06-08 253
ViewModel是一个管理特定UI组件数据的类。 可以将其视为特定视图的记录容器。 它支持与UI组件的双向数据绑定，只要用户在视图中更改数据，它具有最新的副本。 与模型不同，它不能包含代理，因此它不能直接从远程服务器获取数据。 我们来创建一个带有虚拟数据的简单ViewModel并将其绑定到一个组件。 请考虑以下示例。 在上面的例子中，我们创建了简单的View...
ExtJS viewModel继承
02-21
ExtJS6 viewModel继承 viewModel各级控件继承演示，动态改变viewModel 详见文章解释 https://blog.csdn.net/ZYD45/article/details/87867454
[ExtJS] viewModel 动态绑定store
拒绝成猿的程序员
07-26 4611
在使用grid时，想要动态绑定store,并且在不同情况下，采用不同的store 本使用官方的viewModel中的，stores 绑定，如下： { xtype: 'grid', viewModel: { data: { IsMeetingBoard: true, }, stores: { ...
extjs viewmodel ajax,ExtJS中viewController、viewModel、View、Model的关联展示
weixin_39846186的博客
08-05 271
Ext.define('User', {extend: 'Ext.data.Model',fields: ['id','name'],proxy: {type: 'ajax',api: {read: 'read.json',update: 'update.json'}}});Ext.define('MyViewController', {extend: 'Ext.app.ViewControlle...
EXTJS7 解决无法绑定父组件ViewModel问题
路过君的博客
04-17 377
子组件vm(VIewModel)初始化时会自动将父组件的vm设置为parent 如果子组件的vm初始化时子组件v(View)尚未add到父组件v上，则子组件的vm.parent为null且不会在view add后自动设置为父组件vm，此时子组件元素无法绑定到父组件vm Ext.defaine('a',{ controller: { // Ext.create后会调用此函数 init: ...
extjs4 对各类型store各种数据的读取 model 前台 等等
10-18
extjs4 对多种store数据 ，以多种方式绑定到界面上，以一例子以说明编写
extjs动态生成model、store、panel
07-19
extjs动态生成model、store、panel；sql拼接等多种技术难点
extjs中子组件使用父组件的viewModel中的store
shiyibodec的专栏
04-19 5258
顶级组件Account（panel）中添加了AccountGrid（gridpanel）这个子组件. Account.js 代码：initComponent: function() { var me = this; me.items = []; me.items.push({ region : 'center',
ExtJS5 - 认识MVVM
般若
12-17 5026
ExtJS 5在原先支持MVC（Model-View-Controller）架构的基础上，新增了对MVVM（Model-View-ViewModel）架构的支持。MVVM架构的一大重要特性就是利用模型层和视图层的双向数据绑定，从而更好的实现应用程序代码的分层和解耦。
ExtJS 学习总结 （一）-- MVVM框架概述
isskingdom的专栏
09-07 5169
ExtJS 学习总结 （一）ExtJS是一种富客户端Rich Client框架，是基于JavaScript、CSS和HTML实现的，对多种主流的浏览器都兼容。ExtJS发展到现在，已经到了ExtJS 6的系列版本了，参见ExtJS官方网址可以下载使用，以下内容基于ExtJS-6.0.0版本。ExtJS重要的文件和目录： build/examples目录：示例文件目录 build/ext-all.
ext中的viewModel双向数据绑定皮毛
Sukla的博客
09-19 1829
1，想实现不刷新页面，但是更新数据，尝试了一下，效果如下； 2，代码如下，用的6.2以上 /** * Created by Sukla on 2017/9/19. */ Ext.define('app.view.common.dataBind.ShowDataBind',{ extend:'Ext.panel.Panel', title:'数据双向绑定,两个输入框共享一
[ExtJS] 监听事件
拒绝成猿的程序员
09-20 7781
在ExtJS中，常见的监听事件一般用listeners，如下： { xtype:'控件名', liteners:{ 事件名:'方法名' } } //demo { xtype:'textfield', liteners:{ blur:'onBlur' } } 或者是单个控件on绑定 var wgt = Ext...
extjs设置viewmodel为变量
最新发布
03-08
可以使用以下代码将 ExtJS 的 ViewModel 设置为变量： var viewModel = Ext.create('Ext.app.ViewModel', { data: { name: 'John', age: 30 } }); Ext.create('Ext.panel.Panel', { viewModel: viewModel, ...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

29号同学

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付：¥1
获取中
扫码支付

您的余额不足，请更换扫码支付或充值

打赏作者

实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值