📌  相关文章
📜  Ext.js-问题和解答

📅  最后修改于: 2020-10-25 11:21:08             🧑  作者: Mango

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

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

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

  • 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及更高版本
  • Chrome10及以上
  • Safari 4及更高版本
  • Opera 11及以上

Ext JS 4+支持MVC（模型视图控制器）体系结构。从Ext JS 5开始，它也开始支持MVVM（模型视图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具有更多的组件。

Parameter Ext JS Angular JS
Rich UI Ext JS provides rich UI options such as forms , grid, charts Angular JS does not provide rich UI inbuilt
Rich theme UI components Ext JS provides multiple themes inbuilt Angular JS does not provide Rich UI it has to be integrated with AngularUI, AngularBootstarp etc.
Cross browser compatibility Ext JS provide cross browser compatibility it works for almost all the browsers IE6+, FF, Chrome, Safari, Opera etc. Angular JS has to use third party library such as jQuery, jqLite for solving this purpose.
Automatic testing support Possible only with external tools Provides inbuilt.
Two way data binding In Ext JS 5 two way binding is included. It supports two way binding start from first version.
Performance Ext JS is comparatively heavier and slower. Angular JS is light weight framework than Ext JS
Build tools Ext JS uses Sencha cmd tool for builds Angular JS uses third party tools such as grunt.

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-如果输入的文本除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体系结构是模型视图模型。在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（）;

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

不同类型的布局是-

  • 绝对
  • 手风琴
  • 锚
  • 边界
  • 汽车
  • 盒子
  • vBox
  • 卡（TabPanel）
  • 卡（向导）
  • 柱
  • 适合
  • 表

这可以通过使用pageingToolbar（）来完成-

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用于通过向用户显示加载（或Custom消息）直到数据呈现到网格上来防止任何其他操作。加载掩码：true;是在数据呈现到网格时显示加载掩码的属性。

当我们要处理从存储中获取的数据以根据某些条件显示处理后的数据时，将使用Renderer。它是一列属性，可以用作-

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

Ext.getCmp（’id’）。getValue（）;

隐藏：true；

可排序：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’：’经典’，//或’现代’

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

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

接下来是什么？

此外，您可以浏览过去完成的与该主题相关的作业，并确保您能够自信地对它们发表讲话。如果您是新手，那么面试官不会期望您会回答非常复杂的问题，而是必须使您的基本概念非常扎实。

其次，如果您不能回答几个问题，那并不重要，但是无论您回答了什么，您都必须自信地回答，这很重要。因此，在面试时要感到自信。我们在tutorialspoint上祝您好运，有一位优秀的面试官，也祝您未来事业一切顺利。欢呼声：-)