Ext.js - 问答

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

它是从 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 及以上
• Firefox 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 拥有更多的组件。

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、按钮等。

这是可以轻松自定义的验证类型。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 架构是 Model View Viewmodel。在 MVVM 架构中，MVC 的控制器被 ViewModel 取代。

ViewModel − 它基本上是处理视图和模型之间的变化。它将数据从模型绑定到视图。同时，它与视图没有任何直接交互，它只了解模型。

Ext.getCmp('buttonId').on('click', function(){
// 执行逻辑的语句
});

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

Ext.select('div').on('click', function(){
// 执行逻辑的语句
});

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

不同类型的布局有 −

• Absolute
• Accordion
• Anchor
• Border
• Auto
• hBox
• vBox
• Card(TabPanel)
• Card(Wizard)
• Column
• Fit
• Table

可以使用 pagingToolbar() 来完成此操作，如下所示 −

new Ext.PagingToolbar ({
   pageSize: 25,
   store: store,
   displayInfo: true,
   displayMsg: 'Displaying topics {0} - {1} of {2}',
   emptyMsg: 'No topics to display',
});
// 触发数据存储加载
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){
// 要执行的逻辑
} 

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 具有工具包，可以包含两个框架(Ext JS 和 Sencha Touch)的视觉元素。

可以将其添加为 −

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

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

如果工具包是现代的，则包含 Sencha touch 移动应用程序框架。