问题与解答（Questions and Answers）

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

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

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

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

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

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

• 通过IDE插件集成到企业开发环境中，提高开发团队的工作效率。

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

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

• 它有一组小部件，使用户界面功能强大且简单易用。

• 它遵循MVC架构如此高度可读的代码。

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

• HTML中充满了

  标签，使其复杂且难以调试。

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

• 有时加载甚至简单的东西需要很少的编码行，这在简单的html或Jquery中更简单。

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

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

• IE 6及以上版本
• Firefox 3.6及更高版本
• Chrome10及以上版本
• Safari 4及以上版本
• Opera 11 and above

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

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组件，一些主要使用的组件是 -

• Grid
• Form
• 消息框
• 进度条
• 工具提示
• Window
• HTML编辑器
• Charts

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

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

alphanumText - 如果输入的文本具有除alphabate或数值之外的任何符号，则返回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(){
// 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

对于Controller是Ext.app.controller

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

• 使用听众
• Attaching events later
• 使用自定义事件

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

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

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

不同类型的布局是 -

• 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',
});
// 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: function(value, metadata, record, rowIndex, colIndex, store){
// logic to perform
} 

Ext.getCmp（ 'ID'）的getValue（）;

隐藏:真实;

可排序:真实; 这是默认的真实。

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':'经典'，//或'现代'

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

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