[Ext JS6实战]动态数据绑定

本文探讨了在Ext JS6中遇到的动态数据绑定问题,特别是当使用JsonStore时遇到的挑战。通过ViewModel的`formulas`解决Store作为数据集合而非单一JSON对象的问题,并利用Store的`load`事件确保数据加载完成后设置ViewModel的data属性。提供了一个实例代码,包括视图和ViewModel的详细实现。

摘要生成于 C知道 ,由 DeepSeek-R1 满血版支持, 前往体验 >


关于Ext JS的View Model,参见:
https://blog.youkuaiyun.com/oscar999/article/details/85310641

问题提出

使用ViewModel的data属性可以绑定数据和视图的显示,类似:
data : {
firstName : ‘chen’,
lastName : ‘oscar’
}
但是如果使用JsonStore 的话,就对应会出现两个问题:

  1. Store对应的是一个数据集合,而不是一个JSON对象。
  2. JSONStore的数据是从服务端获取。

问题解决

对于问题1, 使用formulas 从Store的Array获取一个Object后, 通过set设置ViewModel的data属性。
对于问题2, JSONStore会在formulas里方法之后之后才能把数据load完, 所以在执行formulas的方法时,值是空的, 解决方法是通过Store的listeners,在store load完数据之后再进行ModelView的值的设定。

实例代码

1.视图:
MyJsonStoreVMView.js

Ext.define('Osxm.main.myJsonStor
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

打赏作者

oscar999

送以玫瑰,手留余香

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

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

打赏作者

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

抵扣说明:

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

余额充值