Ext.js - 问题与解答

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

它是从YUI（Yahoo 用户界面）扩展而来的Sencha 产品。

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

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

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

• 简化台式机、平板电脑和智能手机的跨平台开发 - 无论是现代浏览器还是传统浏览器。

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

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

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

• 它有一组小部件，可以使 UI 变得强大且简单。

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

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

• HTML 充满了 <DIV> 标记，使其变得复杂且难以调试。

• 根据一般公共许可政策，开源应用程序是免费的，但商业应用程序是付费的。

• 有时加载即使是简单的东西也需要几行代码，这在纯 html 或 Jquery 中更简单。

• 需要经验丰富的开发人员来开发 Ext JS 应用程序。

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

• IE 6及以上版本
• 火狐浏览器 3.6 及以上版本
• Chrome10及以上版本
• 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 更多。

扩展JS 1.1

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

扩展JS 2.0

Ext JS 2.0 版于 2007 年发布。该版本为桌面应用程序提供了新的 API 文档，但功能有限。此版本不向后兼容以前版本的 Ext JS。

扩展JS 3.0

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

扩展JS 4.0

Ext JS 3 发布后，Ext JS 的开发人员面临着提高速度的主要挑战。Ext JS 4.0版本于2011年发布，结构全面修改，遵循MVC架构，应用速度快。

扩展JS 5.0

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

扩展JS 6.0

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

Ext JS 有各种 UI 组件，其中一些主要使用的组件是 -

• 网格
• 形式
• 留言箱
• 进度条
• 工具提示
• 窗户
• HTML 编辑器
• 图表

xType 定义了 Ext JS UI 组件的类型，该类型是在组件渲染期间确定的。例如文本字段、数字、按钮等。

这是可以轻松定制的验证类型。Ext JS 提供的 vType 很少：

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

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

是的，Ext JS 可以与 Ajax 集成。实现为：假设在模糊后的某个文本框上，它必须验证来自服务器的数据，因此我们可以对文本框 id 进行 Ajax 调用 onblur/onchange 来检查在文本框中输入的数据是否存在于服务器/数据库中。

是的，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架构是模型视图Viewmodel。在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.promt();
• Ext.MessageBox.show();

Store 的基类是 Ext.data.Store

对于模型是 Ext.data.Model

对于控制器来说是 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();

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

不同类型的布局是 -

• 绝对
• 手风琴
• 锚
• 边界
• 汽车
• 盒
• vBox
• 卡片（选项卡面板）
• 卡牌（法师）
• 柱子
• 合身
• 桌子

这可以使用 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 用于通过向用户显示加载（或自定义消息）来阻止任何其他操作，直到数据呈现到网格。负载掩码：真；是在数据渲染到网格时显示负载掩码的属性。

当我们想要操纵从存储中获取的数据以根据某些条件显示操纵的数据时，将使用渲染器。它是一个列属性，可用作 -

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

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

隐藏：真实；

可排序：正确；这是默认的 true。

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

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

它可以添加为 -

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

如果工具包是经典的，它包括 Ext JS 桌面应用程序框架。

如果工具包是现代的，那么它包括 sencha touch 移动应用程序框架。