Ext.js - 问答

Ext JS 代表扩展的 JavaScript。它是一个 JavaScript 框架，用于开发丰富的基于 Web 的桌面应用程序用户界面。

它是 Sencha 的产品，扩展自 YUI（Yahoo 用户界面）。

这些是在 HTML 页面中包含以运行 Ext JS 代码的主要文件：

• Ext-all.js
• Ext-all.css

• 可定制的 UI 小部件，包含丰富的 UI 元素，例如网格、透视表、表单、图表、树。
• 新版本与旧版本的代码兼容性。
• 灵活的布局管理器有助于组织跨多个浏览器、设备和屏幕尺寸的数据和内容显示。
• 高级数据包将 UI 小部件与数据层解耦。数据包允许使用高功能模型在客户端收集数据，从而实现排序和过滤等功能。
• 它是协议无关的，可以访问来自任何后端的数据源。
• 可定制的主题 Ext JS 小部件提供多个开箱即用的主题，这些主题在各个平台上保持一致。

• 简化跨桌面、平板电脑和智能手机的跨平台开发——适用于现代浏览器和旧版浏览器。

• 通过集成到企业开发环境中的 IDE 插件来提高开发团队的生产力。

• 降低 Web 应用程序开发成本。

• 使团队能够创建具有引人注目的用户体验的应用程序。

• 它有一套小部件，使 UI 功能强大且易于使用。

• 它遵循 MVC 架构，因此代码高度可读。

• 库的大小很大，大约 500 KB，这使得初始加载时间更长，并使应用程序变慢。

• HTML 充满了

  标记，这使得它复杂且难以调试。

• 根据通用公共许可证策略，它对开源应用程序是免费的，但对商业应用程序是收费的。

• 有时，即使加载简单的东西也需要几行代码，而使用纯 HTML 或 jQuery 更简单。

• 需要经验丰富的开发者才能开发 Ext JS 应用程序。

Ext JS 支持跨浏览器兼容性，它支持所有主要的浏览器，例如：

• IE 6 及更高版本
• Firefox 3.6 及更高版本
• Chrome 10 及更高版本
• Safari 4 及更高版本
• Opera 11 及更高版本

Ext JS 4+ 支持 MVC（模型视图控制器）架构。从 Ext JS 5 开始，它也开始支持 MVVM（模型视图视图模型）。

Ext JS 6 是 Ext JS 的最新版本，其主要优势在于它可以用于桌面应用程序和移动应用程序。基本上，它是 Ext JS（桌面应用程序）和 Sencha Touch（移动应用程序）的合并。

Ext JS 是一个 JavaScript 框架，因此要开始使用它，您应该具备 HTML 和 JS 的预备知识（不需要专家级水平，但应该具备基本的理解）。然后需要理解基础知识，所以请花时间逐步学习。

这两个框架非常不同，我们可以将 Ext JS 和 jQuery UI 进行比较，因为 Ext JS 是一个功能齐全的富 UI 框架。但 Ext JS 仍然比 jQuery UI 拥有更多组件。

Ext JS 1.1

Ext JS 的第一个版本由 Jack Slocum 于 2006 年开发。它是一组实用程序类，它是 YUI 的扩展。他将该库命名为 YUI-ext。

Ext JS 2.0

Ext JS 2.0 版本于 2007 年发布。此版本具有用于桌面应用程序的新 API 文档，但功能有限。此版本与 Ext JS 的先前版本不向后兼容。

Ext JS 3.0

Ext JS 3.0 版本于 2009 年发布。此版本添加了图表和列表视图等新功能，但以牺牲速度为代价。它向后兼容 2.0 版本。

Ext JS 4.0

在发布 Ext JS 3 之后，Ext JS 的开发人员面临着提高速度的主要挑战。Ext JS 4.0 版本于 2011 年发布。它具有完全修改的结构，遵循 MVC 架构，并提供速度更快的应用程序。

Ext JS 5.0

Ext JS 5.0 版本于 2014 年发布。此版本的主要变化是将 MVC 架构更改为 MVVM 架构。它包括能够在支持触摸的设备上构建桌面应用程序、双向数据绑定、响应式布局和许多其他功能。

Ext JS 6.0

Ext JS 6 合并了 Ext JS（用于桌面应用程序）和 Sencha Touch（用于移动应用程序）框架。

Ext JS 具有各种 UI 组件，一些最常用的组件是：

• 网格
• 表单
• 消息框
• 进度条
• 工具提示
• 窗口
• HTML 编辑器
• 图表

xType 定义了 Ext JS UI 组件的类型，该类型在组件呈现期间确定。例如 textField、Numeric、button 等。

这是验证类型，可以轻松自定义。Ext JS 提供的一些 vType 为：

alphanumText - 如果输入的文本包含除字母或数字以外的任何符号，则返回 false。

emailText - 如果文本不是有效的电子邮件地址，则返回 false。

是的，Ext JS 可以与 Ajax 集成。实现方式如下：假设在某个文本框失去焦点后，它需要从服务器验证数据，为此，我们可以在文本框的 onblur/onchange 事件中进行 Ajax 调用，以检查文本框中输入的数据是否在服务器/数据库中存在。

是的，Ext JS 可以与其他服务器端框架集成，例如 Java、.NET、Ruby on Rails、PHP、ColdFusion 等。

Ext JS 可以实现于任何流行的集成开发环境 (IDE) 上，例如 Eclipse、Aptana、Sublime、Webstrom 等。

以下是在 Ext JS 中访问 DOM 元素的几种方法：

• Ext.get()
• Ext.getElementById()
• Ext.fly()
• Ext.select()

MVVM 架构是模型视图视图模型。在 MVVM 架构中，MVC 的控制器由 ViewModel 替换。

ViewModel - 它基本上是视图和模型之间变化的中介。它将数据从模型绑定到视图。同时，它不与视图直接交互，它只了解模型。

Ext.getCmp('buttonId').on('click', function(){
// statement to perform logic
});

Ext.onReady() 是在 DOM 完全加载后调用的第一个方法，这样，当脚本运行时，您想要引用的任何元素都将可用。

Ext.select('div').on('click', function(){
// statement to perform logic
});

Ext JS 中的不同类型的警告框有：

• Ext.MessageBox.alert();
• Ext.MessageBox.confirm();
• Ext.MessageBox.wait();
• Ext.MessageBox.prompt();
• Ext.MessageBox.show();

Store 的基类是 Ext.data.Store

model 的基类是 Ext.data.Model

Controller 的基类是 Ext.app.controller

这些是不同的事件处理方式：

• 使用监听器
• 稍后附加事件
• 使用自定义事件

Store.getCount() - 用于缓存的记录

Store.getTotalCount() - 用于数据库中的总记录数。

Store.getModifiedRecords() 方法用于获取已修改的记录。

Store.commitChanges() 方法用于更新存储更改。

如果我们有网格 ID：Ext.getCmp('gridId').getStore().getAt(index);

如果我们有存储 ID：Ext.getStore('storeId').getAt(index);

Store.load();

• Grid 的基类 - Ext.grid.GridPanel
• 表单的基类 – Ext.form.Panel
• 面板的基类 – Ext.panel.Panel
• 图表的基类 – Ext.chart.Chart
• 树的基类 – Ext.tree.Panel

不同类型的布局有：

• 绝对布局
• 手风琴布局
• 锚点布局
• 边框布局
• 自动布局
• 水平盒子布局
• 垂直盒子布局
• 卡片布局（选项卡面板）
• 卡片布局（向导）
• 列布局
• 填充布局
• 表格布局

这可以使用 pagingToolbar() 完成，如下所示：

new Ext.PagingToolbar ({
   pageSize: 25,
   store: store,
   displayInfo: true,
   displayMsg: 'Displaying topics {0} - {1} of {2}',
   emptyMsg: 'No topics to display',
});
// trigger the data store load
store.load({params:{start:0, limit:25}});

dockedItems: [{
   xtype: 'toolbar',
   items: [{ 
      id:'buttonId', 
      handler: function() { 
         Ext.Msg.alert('title','alertMsg');
      });
   }]
}]	

Loadmask 用于通过向用户显示加载（或自定义消息）来阻止任何其他操作，直到数据呈现到网格为止。Loadmask: true; 是在数据呈现到网格时显示 loadmask 的属性。

渲染器 (Renderer) 用于操作从存储中获取的数据，根据某些条件显示已处理的数据。它是一个列属性，可以用作：

renderer: function(value, metadata, record, rowIndex, colIndex, store){
// logic to perform
} 

Ext.getCmp('id').getValue();

Hidden: true;

Sortable: true; 默认值为 true。

grid.getStore().on ({
   beforeload : function(store) {
      // perform some operation
   },
   load : {
      fn : function(store) {
         //perform some operation
      },
      scope : this
   }
   store.load();
});

Ext JS 6 具有工具包 (toolkit) 包，可以使用它包含两个框架（Ext JS 和 Sencha Touch）的视觉元素。

可以添加为：

'toolkit': 'classic', // 或 'modern'

如果工具包为 classic，则包含 Ext JS 桌面应用程序框架。

如果工具包为 modern，则包含 Sencha Touch 移动应用程序框架。