如何在 Ext.js 中实现数据绑定：实用演练

已发表: 2023-09-21

欢迎来到我们关于如何在 Ext.js JavaScript 框架中进行数据绑定的实用指南！ 数据绑定就像魔术胶一样，将网站的外观与网站上发生变化的内容连接起来。 Ext.js JavaScript 框架是一个很酷的工具，可以帮助您轻松完成此任务。 在本博客中，我们将通过简单的步骤引导您完成整个过程。 无论您是专业程序员还是刚刚起步，我们都会介绍基础知识。

您将学习如何将数据链接到 Ext.js JavaScript 框架部分，以便您的网站可以顺利地做出反应和更新。 最后，您将掌握使您的网络应用程序更具交互性和动态性的技能。 让我们开始使用 Ext.js 数据绑定吧！

数据

什么是数据绑定？

数据绑定就像网站的外观和网站上可以更改的内容之间的有用链接。 将其想象为一种神奇的连接，使网站和数据能够顺利地协同工作。 因此，当数据发生变化时，例如价格或名称，网站会自动显示该变化，而无需您执行任何操作。

在 Ext.js（一个面向 Web 开发人员的工具包）中，有一个很酷的功能，称为双向数据绑定。 这意味着当您在网站上执行某些操作（例如单击按钮或在框中键入内容）时，它会更新数据。 当数据发生变化时，它会立即更新网站。 这使您的网站更具互动性和响应能力。

数据绑定在Web开发中的意义是什么？

数据绑定在 Web 开发中非常重要，因为它可以确保您的网站的外观与不断变化的数据相匹配，而无需您手动完成所有操作。 它使网络和移动应用程序更加动态和响应，从而节省开发人员编写复杂代码的时间和精力。

Ext.js 中的双向数据绑定。

Ext JS 和 Sencha Touch 中的所有类型的绑定都遵循熟悉的过程：它们使用 setter 和 updaters。 单向绑定意味着当 ViewModel 中发生某些变化时，它会使用其 setter 更新配置。 双向绑定类似，但它使用更新程序，就像一个特殊的处理程序。 如果更新程序成功更改配置，它还会更改 ViewModel 中的链接值，从而更新其他绑定。

要使配置支持双向绑定，您可以使用“twoWayBindable”选项。 通常，它在幕后使用，但在创建自定义视图或组件时它会很方便。 例如，Ext.field.Text将其“值”配置为可双向绑定，如下所示：

双向可绑定：{

值：1

}

在带有微调字段的示例中，当其值发生变化时，它会触发更新程序，ViewModel 会拦截该更新程序。 然后，这会更新下面容器的内容，这一切都是因为链接了“html”配置。 这工作起来很顺利，因为 Ext.field.Spinner 与 Ext.field.Text 相关，后者被设置为其“值”使用双向绑定。

煎茶

如何在开发环境中安装和设置Ext.js？

要获取 Ext JS 库文件的试用版，请访问 Sencha 的网站：https://www.sencha.com。 注册后，您将在电子邮件中收到名为“ext-6.0.1-Trial”的压缩文件夹形式的试用版。

解压该文件夹以查找适合您的应用程序的各种 JavaScript 和 CSS 文件。 关键的 JavaScript 文件包括：

  1. ext.js ：包含所有应用程序功能的核心文件。
  2. ext-all.js ：没有注释的 ext.js 的缩小版本。
  3. ext-all-debug.js ：用于调试的 ext-all.js 的未缩小版本。
  4. ext-all-dev.js ：另一个未缩小的版本，对于使用注释和控制台日志进行开发很有用。
  5. ext-all.js ：一个更小的、生产就绪的版本。

您可以将这些文件添加到项目的 JS 文件夹中或指定系统上的直接路径。 对于 CSS，基于主题的文件位于不同的文件夹中，具体取决于您构建的是桌面应用程序还是移动应用程序。

在 HTML 文件中，链接到必要的 CSS 和 JavaScript 文件。 或者，您可以使用内容交付网络 (CDN) 来避免在本地下载文件。 Ext JS 兼容各种浏览器，包括 IE 6 及以上版本、Firefox、Chrome、Safari 和 Opera，使其适用于 Web 开发。

科技

如何创建一个简单的 Ext.js 应用程序？

以下是快速创建 Ext JS 应用程序的简单步骤：

第 1 步：从 npm 安装软件包

Ext JS 在公共 npm 注册表上提供了 30 天的试用包。 您可以通过执行以下命令获取最新的 Ext JS 版本：

$ npm install -g @sencha/ext-gen

对于现有用户，Ext JS 及其相关包驻留在 Sencha 的私有 npm 注册表中。 要访问它，请登录注册表并使用以下命令安装 npm：

$ npm 登录 –registry=https://npm.sencha.com/ –scope=@sencha

$ npm install -g @sencha/ext-gen

这些命令将 npm 配置为从 Sencha 注册表中的“@sencha”范围内检索和安装软件包。

第 2 步：生成应用程序

在此步骤中，我们将使用以下命令创建一个简单的双视图应用程序，其中包括主页和网格：

ext-gen 应用程序-a -t 现代桌面-n ModernApp

第 3 步：探索应用程序

现在我们的项目已生成，使用以下命令导航到该目录：

cd ./现代应用程序

要探索您的应用程序，请使用以下 npm 命令启动它：

npm 启动

这些步骤将帮助您快速设置免费且开源的备份您的 Ext JS 应用程序。

Sencha：您卓越 UI 的合作伙伴 – 联系我们！

Ext.js 中模型的用途是什么？

模型代表应用程序中的一种数据。 模型的核心由一组字段及其关联数据组成。 模型包含四个关键元素：字段、代理、关联和验证。

领域

模型字段在“fields”属性中指定为数组。 每个字段都被描述为包含名称和类型等属性的 JavaScript 对象。

代理人

代理由存储使用并处理与加载和存储模型数据相关的任务。 有两种类型的代理：

  1. 客户端代理，利用浏览器内存或本地存储来存储数据。
  2. 服务器代理负责通过 Ajax、JSON-P 或 REST 等方法将数据发送到服务器。

协会

即使在具有多个模型的小规模应用程序中，模型也可以相互建立连接。 可以创建各种类型的关联，包括一对一、一对多和多对一关系。

验证

验证是用于验证特定模型字段中存储的数据的正确性的专用结构。 ExtJS 提供了一组标准验证，常见示例是检查最小或最大字段长度。

Ext.js 中视图的作用是什么？

视图处理应用程序的视觉方面和用户界面。 视图由组件和布局组成。 每个组件都可以充当另一个组件的容器，从而将应用程序界面结构化为视图的分层集合。

在 ExtJS 中，可以使用多种布局：

  1. FitLayout：此布局扩展内部项目以适应父容器的边界。
  2. VBoxLayout：它有利于项目的垂直排列。
  3. HBoxLayout：它有利于项目的水平排列。
  4. BorderLayout：此布局允许将项目附加到窗口的四个侧面之一或将它们停靠在中心。

数据库

如何设置模型和视图之间的数据绑定？

Ext.app.ViewModel 类对于建立数据连接至关重要。 把它想象成一个数据组织者。 它与 Ext.data.Model 类似，但它以结构化方式处理数据，就像家谱一样，而不仅仅是事实列表。 它还具有“bind()”方法来监视此组织数据中的更改。

现在，关于这个数据家谱：它的工作原理有点像知识在家庭中的传承方式。 孩子可以向父母学习，父母也可以向父母学习，等等。 在我们的例子中，即使是“孙子”组件也可以从更高级别的组件中学习。 这一切都是为了有效地共享信息。

在 Ext JS 中设置模型和视图之间的数据绑定涉及几个基本步骤：

  1. 创建模型：首先，定义一个模型来表示您要使用的数据结构。该模型应包含与您需要在视图中显示的数据相对应的字段。
  2. 创建 ViewModel ：ViewModel 充当模型和视图之间的中介。它管理数据并提供一种将其绑定到视图组件的方法。 您可以在控制器或视图中创建 ViewModel。
  3. 将数据绑定到组件：使用 ViewModel 的“绑定”方法将模型的字段连接到视图中的组件。例如，如果您有一个应显示人名的文本字段，则可以将其绑定到模型中的相应字段。

视图模型：{

公式：{

全名：函数（获取）{

var firstName = get('user.firstName');

var LastName = get('user.lastName');

返回名字 + ' ' + 姓氏；

}

}

},

项目： [{

xtype: '文本字段',

fieldLabel: '名字',

绑定：'{user.firstName}'

}, {

xtype: '文本字段',

fieldLabel: '姓氏',

绑定：'{user.lastName}'

}, {

xtype: '文本字段',

fieldLabel: '全名',

bind: '{fullName}' // 这是一个计算字段

}]

“`

  1. 更新数据：当您更新模型中的数据时（例如，当用户输入新值时），数据绑定机制将自动更新连接的视图组件。类似地，当用户与视图组件交互（例如，编辑字段）时，更改将反映回模型。

使用电脑的人

结论

Ext JS 提供了一种智能方式来链接数据和您在网页上看到的内容。 通过设置模型并将它们连接到网页元素，您可以确保数据发生变化时。 此外，您的网页会自动更新，当用户与您的网页交互时，更改会保存在您的数据中。

这使得构建 Web 应用程序变得更加容易，改善用户体验网站的方式，并使开发人员更轻松地创建动态和响应式 Web 应用程序。 Ext JS 简化了 html 代码的整个流程，使 Web 开发更加高效、人性化。

常见问题解答

什么是 Ext.js，为什么使用它进行数据绑定？

Ext JS 是一个 JavaScript 框架。 它简化了数据绑定，有效地创建响应式 Web 和移动应用程序。

Ext.js 数据绑定需要哪些工具？

要开始 Ext.js 数据绑定，您需要 Ext.js 框架、代码编辑器和 Web 浏览器。

什么是响应式网页设计？

响应式网页设计使网页组件适应各种屏幕尺寸，确保在台式机、平板电脑和移动设备上提供最佳的用户体验。

JQuery 是一个 JS 框架吗？

不，jQuery 不是一个 JavaScript 框架；它是一个 JavaScript 框架。 它是一个用于简化 DOM 操作和 AJAX 请求的库。