首页
学习
活动
专区
工具
TVP
发布
精选内容/技术社群/优惠产品,尽在小程序
立即前往

如何在Extjs中将视图配置链接到视图模型声明性

在ExtJS中,可以通过将视图配置链接到视图模型来实现声明性。视图模型是一个用于管理视图数据和逻辑的组件,它与视图之间建立了一个松散的耦合关系。

要将视图配置链接到视图模型,可以按照以下步骤进行操作:

  1. 创建一个视图模型:使用Ext.app.ViewModel类创建一个视图模型,并定义所需的数据和方法。例如:
代码语言:txt
复制
Ext.define('MyApp.view.MyViewModel', {
    extend: 'Ext.app.ViewModel',
    alias: 'viewmodel.myviewmodel',
    data: {
        name: 'John Doe',
        age: 30
    },
    formulas: {
        isAdult: function(get) {
            return get('age') >= 18;
        }
    }
});
  1. 在视图中引用视图模型:在视图的配置项中使用viewModel属性引用视图模型。例如:
代码语言:txt
复制
Ext.define('MyApp.view.MyView', {
    extend: 'Ext.panel.Panel',
    alias: 'widget.myview',
    viewModel: 'myviewmodel',
    items: [{
        xtype: 'textfield',
        fieldLabel: 'Name',
        bind: '{name}'
    }, {
        xtype: 'numberfield',
        fieldLabel: 'Age',
        bind: '{age}'
    }, {
        xtype: 'displayfield',
        fieldLabel: 'Is Adult',
        bind: '{isAdult}'
    }]
});
  1. 在视图模型中声明视图配置:在视图模型中使用links属性声明视图配置。links属性是一个对象,其中的键是视图配置项的名称,值是视图配置项的值。例如:
代码语言:txt
复制
Ext.define('MyApp.view.MyViewModel', {
    extend: 'Ext.app.ViewModel',
    alias: 'viewmodel.myviewmodel',
    data: {
        name: 'John Doe',
        age: 30
    },
    formulas: {
        isAdult: function(get) {
            return get('age') >= 18;
        }
    },
    links: {
        myTextField: {
            reference: 'MyApp.view.MyView',
            selector: 'textfield',
            set: {
                value: '{name}'
            }
        },
        myNumberField: {
            reference: 'MyApp.view.MyView',
            selector: 'numberfield',
            set: {
                value: '{age}'
            }
        }
    }
});

在上述示例中,视图模型中的links属性将文本字段和数字字段与视图中的相应组件进行了绑定。这样,当视图模型中的数据发生变化时,视图中的组件会自动更新。

通过将视图配置链接到视图模型,可以实现视图和数据的分离,提高代码的可维护性和可测试性。此外,ExtJS还提供了丰富的数据绑定和计算属性的功能,可以进一步简化视图和数据之间的交互。

腾讯云相关产品和产品介绍链接地址:

  • ExtJS官方网站:https://www.sencha.com/products/extjs/
  • ExtJS文档:https://docs.sencha.com/extjs/
  • 腾讯云云服务器(CVM):https://cloud.tencent.com/product/cvm
  • 腾讯云云数据库 MySQL 版:https://cloud.tencent.com/product/cdb_mysql
  • 腾讯云对象存储(COS):https://cloud.tencent.com/product/cos
  • 腾讯云人工智能:https://cloud.tencent.com/product/ai
  • 腾讯云物联网平台(IoT):https://cloud.tencent.com/product/iot
  • 腾讯云移动开发:https://cloud.tencent.com/product/mobdev
  • 腾讯云区块链服务(BCS):https://cloud.tencent.com/product/bcs
  • 腾讯云元宇宙:https://cloud.tencent.com/product/mu
页面内容是否对你有帮助?
有帮助
没帮助

相关·内容

  • [翻译]Ext JS 教程-类系统 原

    类系统

    ExtJS 史上第一次进行了重整新的类系统的大重构。新的架构以ExtJS 4.X所编写的每一个类作为后盾,因此在你编写代码以前理解它是非常重要的。

    这个手册主要面向任何想在ExtJS 4.x中新建或者扩展类的开发人员。它分成四个部分:

    Ø 部分一:“综观”解释了稳定的类系统的需求

    Ø 部分二:“命名规则”讨论给类、方法、属性、变量和文件命名的最佳实践

    Ø 部分三:“动手实践”提供详细的一步步编码的例子

    Ø 部分四:“错误处理&调试”提供如何处理一场的小建议和小计谋

    一 综观

    ExtJS 4 靠超过300 多个类驱动。我们拥有一个超过20万来自世界各地,具备各种编程背景的开发人员组成的巨大社区。在一个框架的范围内,我们面对提供一个通用的编码结构的那些大挑战:

    Ø 简单易上手

    Ø 开发快速、调试简单、部署无忧

    Ø 结构良好,可扩展可维护

    JavaScript 是 classless 的面向原型的语言。天性使然,灵活是这个语言最强大的特性。使用不同的方式,不同的编码形式和技术,都可以让工作有效。然而就是那个特性,带来了不可预知的代价。没有一个统一的形式,JavaScript代码可能很难去理解、维护和重用。

    从另一方面来看,基于类的编程仍然是面向对象编程领域最受欢迎的模式。基于类的语言常常需要强类型,提供封装和标准的编码规范。一般而言要让开发人员遵守一大堆规则,而编码就会变得一直可预知、可扩展和规规矩矩。然而,他们不会有在JavaScript这样的语言中发现的同样的动态能力。

    每种方法都有其利弊,但是我们是否可以利用两者好处的同时避免他们的坏处呢?答案是肯定的,我们在ExtJS 4中实现了这个解决方案。

    二 命名规范

    至始至终为你编码的类、命名空间和文件名使用一致的命名规则有助于保持你代码的组织性、结构性和可读性。

    1)类

    类名应该只包含字母和数字字符。数字在大多数情况下是不鼓励使用的,除非他们属于一种技术手段。不要使用下划线,连字符或者其它任何非字母非数字的字符。举个例子:

    Ø MyCompany.useful_util.Debug_Toolbar 不鼓励这样命名

    Ø MyCompany.util.Base64 是可以被接受的

    类名应该被组成成为包,在包中合适恰当的使用对象属性点记号(.)分出命名空间。至少,应该只有唯一的顶层命名空间后面跟类名。举个例子:

    MyCompany.data.CoolProxy

    MyCompany.Application

    顶层命名空间和真实类的命名应该采用Camel形式(单词的首字母都大写),其它所有事物都应该是小写的。举个例子:

    MyCompany.form.action.AutoLoad

    不是Sencha发行的类永远不应该使用Ext作为顶层命名空间的名字。

    首字母缩略词也应该遵守上面列出的Camel形似命名规则。示例如下:

    Ext.data.JsonProxy 而不是Ext.data.JSONProxy

    MyCompany.util.HtmlParser 而不是 MyCompary.parser.HTMLParser

    MyCompany.server.Http 而不是MyCompany.server.HTTP

    2)源代码

    类地址的名字应该直接指向文件被存储的路径。基于此,每个文件中只能有一个类,示例如下:

    Ext.util.Observable 被存储在路径 /to/src/Ext/util/Observable.js 中

    Ext.form.action.Submit 被存储在路径 /to/src/Ext/form/action/Submit.js中

    MyCompany.chart.axis.Numeric 被存储在路径 /to/src/MyCompany/chart/axis/Numeric.js中

    Path/to/src 是你的应用程序类所在的路径。所有的类都应该在这个公共的根下面,并且为了获得最好的开发、维护和部署体验,适当的赋予命名空间。

    2)方法和变量

    跟类名类似,方法和变量的名字应该只包含数字和字母字符。数字被允许的,但在大多数情况下是不被鼓励的

    02

    【转】Java就业指导

    1、熟练的使用Java语言进行面向对象程序设计,有良好的编程习惯,熟悉常用的Java API,包括集合框架、多线程(并发编程)、I/O(NIO)、Socket、JDBC、XML、反射等。   2、熟悉基于JSP和Servlet的Java Web开发,对Servlet和JSP的工作原理和生命周期有深入了解,熟练的使用JSTL和EL编写无脚本动态页面,有使用监听器、过滤器等Web组件以及MVC架构模式进行Java Web项目开发的经验。   3、对Spring的IoC容器和AOP原理有深入了解,熟练的运用Spring框架管理各种Web组件及其依赖关系,熟练的使用Spring进行事务、日志、安全性等的管理,有使用Spring MVC作为表示层技术以及使用Spring提供的持久化支持进行Web项目开发的经验,熟悉Spring对其他框架的整合。   4、熟练的使用Hibernate、MyBatis等ORM框架,熟悉Hibernate和MyBatis的核心API,对Hibernate的关联映射、继承映射、组件映射、缓存机制、事务管理以及性能调优等有深入的理解。   5、熟练的使用HTML、CSS和JavaScript进行Web前端开发,熟悉jQuery和Bootstrap,对Ajax技术在Web项目中的应用有深入理解,有使用前端MVC框架(AngularJS)和JavaScript模板引擎(HandleBars)进行项目开发的经验。   6、熟悉常用的关系型数据库产品(MySQL、Oracle),熟练的使用SQL和PL/SQL进行数据库编程。   7、熟悉面向对象的设计原则,对GoF设计模式和企业应用架构模式有深入的了解和实际开发的相关经验,熟练的使用UML进行面向对象的分析和设计,有TDD(测试驱动开发)和DDD(领域驱动设计)的经验。   8、熟悉Apache、NginX、Tomcat、WildFly、Weblogic等Web服务器和应用服务器的使用,熟悉多种服务器整合、集群和负载均衡的配置。   9、熟练的使用产品原型工具Axure,熟练的使用设计建模工具PowerDesigner和Enterprise Architect,熟练的使用Java开发环境Eclipse和IntelliJ,熟练的使用前端开发环境WebStorm,熟练的使用软件版本控制工具SVN和Git,熟练的使用项目构建和管理工具Maven和Gradle。

    02

    Angular系列教程-第五节

    1.模块 NgModule 是一个带有 @NgModule 装饰器的类。 @NgModule 的参数是一个元数据对象,用于描述如何编译组件的模板,以及如何在运行时创建注入器。 它会标出该模块自己的组件、指令和管道,通过 exports 属性公开其中的一部分,以便外部组件使用它们。 NgModule 还能把一些服务提供商添加到应用的依赖注入器中。 NgModule 的元数据会做这些: 声明某些组件、指令和管道属于这个模块。 公开其中的部分组件、指令和管道,以便其它模块中的组件模板中可以使用它们。 导入其它带有组件、指令和管道的模块,这些模块中的元件都是本模块所需的。 提供一些供应用中的其它组件使用的服务。 每个 Angular 应用都至少有一个模块,也就是根模块。 你可以引导那个模块,以启动该应用。

    02

    MV-Swin-T | 纯Transformer架构引入新型移位窗口注意力完成多视图空间特征的交互

    乳腺癌在全球范围内是导致女性癌症相关死亡的第二大主要原因,也是影响女性最常见的癌症[1]。早期检测主要依赖于筛查式乳房X光摄影,包括四张图像——每侧乳房从不同角度拍摄两张:从侧面的斜位(MLO)和从上方的头尾位(CC)。尽管传统的深度学习方法在乳腺癌分类中主要关注单一视角的分析,但放射科医生在乳房X光检查中同时评估所有视角,认识到提供关键肿瘤信息的重要相关性。这突显了在医疗保健中跨视角数据分析识别异常和做出诊断的重要性,以及基于多视角或多图像的计算机辅助诊断(CAD)方案相对于基于单图像的CAD方案的优势。在乳腺癌分类和检测的最新研究中,应用了深度学习技术,取得了有希望的结果。许多当前的研究[2, 3, 4]旨在融合多视角架构,这些架构受到放射科医生多视角分析的启发,从而为更强大、性能更高的模型做出贡献。

    01
    领券