extjs总结.pdf

【EXTJS 概述】 EXTJS 是一个强大的 JavaScript 框架，主要用于构建富客户端的 Web 应用程序。它的核心特性包括可扩展的组件模型、丰富的用户界面和数据绑定机制。EXTJS 提供了大量的预定义组件，如表格、表单、面板、菜单等，这些组件具有高度可定制性和互操作性。 【主要组件与文件】 1. **ext-all.css** - 这个文件包含了 EXTJS 组件的所有默认样式。为了保持EXTJS的更新兼容性，不应直接修改此文件。如果需要自定义样式，应在页面中引入该样式表后，再覆盖所需的样式。 2. **ext-base.js** - 包含 EXTJS 的核心功能，相当于整个框架的基础和引擎。可以通过修改此文件来集成其他库，例如 jQuery，以实现与 EXTJS 的协同工作。 3. **ext-all-bug.js / ext-all.js** - 这两个文件包含了所有EXTJS组件。前者用于开发阶段的调试，后者则用于生产环境。 4. **Ext.onReady** - 这个函数用于在页面完全加载后执行EXTJS的相关代码，确保DOM元素已经准备就绪。 5. **Ext.Msg** - 提供了一个预设样式的消息框，可以显示警告、确认或提示信息。 6. **Configuration Objects** - 配置对象用于定义组件的外观和行为。它们是键值对的形式，可以包含各种数据类型，如布尔值、数组、函数和对象。 **配置对象使用注意事项**： - 配置项需用花括号包围，每个配置项由属性名和属性值组成，用冒号分隔，项间用逗号分隔。 - 属性值可以是任何数据类型，包括数组和嵌套的对象。 - 数组用方括号表示，可以包含各种元素，包括对象和值。 **表单字段与XType**： - `xtype` 用于定义字段类型，关联到EXTJS中的特定组件。例如，`textfield` 对应 `Ext.form.TextField`。 - 常见的 `xtype` 包括：`textfield`, `timefield`, `numberfield`, `datefield`, `combo` 和 `textarea`。 - 由于EXTJS组件的高度可复用性，这些字段可以灵活地应用于表格、工具栏和按钮等。 **内置验证 - vtype**： - `vtype` 是一种内置的验证机制，基于正则表达式，用于限制用户输入并显示错误信息。 - 示例的 vtype 包括：`email`, `url`, `alpha` 和 `alphanum`。 - 用户可以根据需要自定义 `vtype`。 **自定义验证**： - 若要创建自定义 `vtype`，需要提供正则表达式、输入掩码和错误消息。 - 示例：创建一个验证导演姓名的 `vtype`，要求由两个以大写字母开头的单词组成，单词间用空格分隔。 - 定义 `nameVal`, `nameMask` 和 `nameText`，然后将其与测试函数关联。 ```javascript Ext.form.VTypes['nameVal'] = /^[A-Z][A-Za-z\-]+[A-Z][A-Za-z\-]+$/; Ext.form.VTypes['nameMask'] = /[A-Za-z\-\ ]/; Ext.form.VTypes['nameText'] = 'Invalid Director Name.'; Ext.form.VTypes['name'] = function(v){return Ext.form.VTypes['nameVal'].test(v);} ``` **TextArea 和 HTMLEditor**: - `TextArea` 是一个多行文本输入组件，适用于长文本输入。 - `HTMLEditor` 是一个富文本编辑器，允许用户编辑 HTML 内容，提供了许多格式化选项。 EXTJS 的强大之处在于其丰富的组件库、灵活的配置选项和强大的数据绑定机制，使得开发者能够构建复杂、交互性强的Web应用。理解并熟练掌握EXTJS的关键概念和组件，有助于提升应用程序的质量和用户体验。