[ExtJS]全局viewModel教程

最新推荐文章于 2025-05-22 13:36:08 发布

原创最新推荐文章于 2025-05-22 13:36:08 发布 · 5.7k 阅读

2 ·

CC 4.0 BY-SA版权

文章标签：

#ExtJS6 viewmodel #extjs6 #ViewModel #viewModel教程

ExtJS 专栏收录该内容

55 篇文章

订阅专栏

本文详细介绍了如何在ExtJS6中创建并使用全局ViewModel。通过在viewport中定义全局viewModel，可以实现各组件间的数据绑定。教程涵盖了创建viewport的viewModel、在application中声明、以及在其他组件中使用和更新ViewModel数据的方法。

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

viewModel是一个为页面提供数据交互的模型，通常和bind进行同时使用

一般可以为组件声明下viewmodel的属性

 viewModel:{
  data:{
      key:value
       }
  }

这个主要是为其设置了viewModel的组件，的子组件，提供相应的绑定数据。

就是下面的结构

{
  xtype:'组件1',
  viewModel:{
  data:{
      key1:value
       }
  },
  items:[
   //这里的组件 可以使用bind 来绑定key1
 ]
},
{
  xtype:'组件2',
  bind:'{key1}' //这里就会报错，无法调用viewModel
}

如果是想要全局的使用，我们可以设一个viewport的viewModel

First

在view文件夹下放一个viewport文件夹，并把对应viewModel.js放在里面

定义一个全局的viewModel

Ext.define('MyApp.view.viewport.ViewportModel', {
    extend: 'Ext.app.ViewModel',
    alias: 'viewmodel.viewport_model',
    data: {
        num:0
    },
});

Second

引用此ViewportModel

在application里的viewport配置项中声明此viewportModel

Third

在其他view组件中bind viewmodel里data里的key

 {
            xtype:'组件',
            bind:{
                组件的属性:'{viewModel中data里的key}',
            }
 },

ForExample

{
    xtype:'textfield',
    bind:{
        value:'{num}',
    }
},

当然，也可以加入简单的三目运算

{
    xtype:'textfield',
    bind:{
        value:'{ num == 2 ? "已成功登录2次":"登录次数:"+num}',
    }
}

若是在组件中想要获取对应的viewModel，使用

viewcontroller对象.getViewModel()
//或采用 view控件对象.getViewModel() 或 lookupViewModel()

获取对应的数据对象就是

viewModel对象.getData()//获取整体数据对象
//获取viewModel里具体某个值
viewModel对象.get(key);
//或采用以下方式 但是不推荐
viewModel对象.getData().key//获取data里的具体的key值

若是更新viewModel中某个key值使用

viewModel对象.set(key,value);//优先使用这种方式
viewModel对象.setData({key1:value，key2:value})//也可采用这种setData更新多个的 但是 不推荐

这里有个具体的完整的例子，是路由+全局viewmodel的

全局viewModel例子