目录

Ext.js - 快速指南

Ext.js - Overview

Ext JS是一个流行的JavaScript框架,它为使用跨浏览器功能构建Web应用程序提供了丰富的UI。 Ext JS主要用于创建桌面应用程序。 它支持所有现代浏览器,如IE6 +,FF,Chrome,Safari 6 +,Opera 12+等。而Sencha,Sencha Touch的另一个产品用于移动应用程序。

Ext JS基于MVC/MVVM架构。 Ext JS 6的最新版本是一个单一平台,可用于桌面和移动应用程序,而不需要针对不同平台的不同代码。

历史 (History)

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(用于移动应用程序)框架。

特点 (Features)

以下是Ext JS的突出特点。

  • 可自定义的UI小部件,包含丰富的UI集合,如网格,透视网格,表单,图表,树。

  • 新版本与旧版本的代码兼容性。

  • 灵活的布局管理器有助于组织跨多个浏览器,设备和屏幕尺寸的数据和内容显示。

  • 高级数据包将UI小部件与数据层分离。 数据包允许客户端使用功能强大的模型收集数据,这些模型支持排序和过滤等功能。

  • 它与协议无关,可以从任何后端源访问数据。

  • 可自定义的主题Ext JS小部件提供多个开箱即用的主题,这些主题在不同平台上是一致的。

好处 (Benefits)

Sencha Ext JS是业务级Web应用程序开发的领先标准。 Ext JS提供了构建桌面和平板电脑强大应用程序所需的工具。

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

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

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

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

  • 提供一组小部件,轻松实现强大的UI。

  • 遵循MVC架构,因此代码具有高可读性。

限制 (Limitations)

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

  • HTML中充满了标签,使其复杂且难以调试。

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

  • 有时加载甚至简单的东西都需要几行代码,这在简单的html或JQuery中更简单。

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

Tools

以下是Sencha提供的工具,主要用于生产级别的Ext JS应用程序开发。

Sencha CMD

Sencha CMD是一个提供Ext JS代码缩小,脚手架和生成构建生成功能的工具。

Sencha IDE插件

Sencha IDE插件将Sencha框架集成到IntelliJ,WebStorm IDE中,通过提供代码完成,代码检查,代码导航,代码生成,代码重构,模板创建,拼写检查等功能,帮助提高开发人员的工作效率。

Sencha督察

Sencha Inspector是一个调试工具,可以帮助调试器在开发时调试任何问题。

Ext.js - Environment Setup

本地环境设置 (Local Environment Setup)

本节将指导您如何在计算机上下载和设置Ext JS。 请按照步骤设置环境。

下载库文件

从Sencha https://www.sencha.com下载Ext JS库文件的试用版。 您将从您的注册邮件ID获取该站点的试用版,该版本将是一个名为ext-6.0.1-trial的压缩文件夹。

解压缩文件夹,您将找到各种JavaScript和CSS文件,您将在我们的应用程序中包含这些文件。 我们将主要包括以下文件 -

JavaScript Files - 您可以在\ ext-6.0.1-trial\ext6.0.1\build文件夹下找到的JS文件是 -

Sr.No 文件描述
1

ext.js

这是核心文件,其中包含运行应用程序的所有功能。

2

ext-all.js

此文件包含缩小的所有代码,文件中没有注释。

3

ext-all-debug.js

这是用于调试目的的ext-all.js的未分级版本。

4

ext-all-dev.js

此文件也是未分析的,用于开发目的,因为它包含所有注释和控制台日志以检查任何错误/问题。

5

ext-all.js

此文件主要用于生产目的,因为它比任何其他文件小得多。

您可以将这些文件添加到项目JS文件夹中,也可以提供文件驻留在系统中的直接路径。

CSS Files - 有许多基于主题的文件,你可以在文件夹\ ext6.0.1-trial\ext-6.0.1\build\classic\theme-classic\resources\theme-classic-all.css下找到它们。

  • 如果您要使用桌面应用程序,则可以使用文件夹\ ext-6.0.1-trial\ext-6.0.1\build\classic下的经典主题

  • 如果我们要使用移动应用程序,那么您可以使用现代主题,可以在文件夹\ ext-6.0.1-trial\ext-6.0.1\build\modern下找到

以下库文件将添加到Ext JS应用程序中。

<html>
   <head>
      <link rel = "stylesheet" type = "text/css" 
         href = "..\ext-6.0.1-trial\ext-6.0.1\build\classic\theme-classic\resources\theme-classic-all.css" />
      <script type = "text/javascript" 
         src = "..\ext-6.0.1-trial\ext-6.0.1\build\ext-all.js" > </script>
      <script type = "text/javascript" src = "app.js" > </script>
   </head>
</html>

您将ExtJS应用程序代码保存在app.js文件中。

CDN设置

CDN是内容交付网络,您无需下载Ext JS库文件,而是可以直接将ExtJS的CDN链接添加到您的程序,如下所示 -

<html>
   <head>
      <link rel = "stylesheet" type = "text/css" 
         href = "https://cdnjs.cloudflare.com/ajax/libs/extjs/6.0.0/classic/theme-crisp/resources/theme-crisp-all.css"/>
      <script type = "text/javascript" 
         src = "https://cdnjs.cloudflare.com/ajax/libs/extjs/6.0.0/ext-all.js"> </script>
      <script type = "text/javascript" src = "app.js" > </script> 
   </head>
</html>

热门编辑

因为它是一个用于开发Web应用程序的JavaScript框架,所以在我们的项目中我们将拥有HTML,JS文件。 要编写我们的Ext JS程序,我们需要一个文本编辑器。 市场上甚至有多个IDE可用。 但就目前而言,我们可以考虑以下其中一项 -

  • Notepad - 在Windows机器上,您可以使用任何简单的文本编辑器,如记事本(本教程推荐),Notepad ++,sublime。

  • Eclipse - 它是由eclipse开源社区开发的IDE,可以从https://www.eclipse.org/下载。

Browser

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

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

您可以使用任何浏览器来运行Ext JS应用程序。

Ext.js - Naming Convention

命名约定是标识符要遵循的一组规则。 它使代码对其他程序员更具可读性和易懂性。

Ext JS中的命名约定遵循标准JavaScript约定,这不是强制性的,但是遵循一个好的做法。 它应该遵循camel case语法来命名类,方法,变量和属性。

如果名称与两个单词组合,则第二个单词将始终以大写字母开头。 例如,doLayout(),StudentForm,firstName等。

名称 惯例
class名称 它应该以大写字母开头,然后是驼峰大小写。 例如,StudentClass
方法名称 它应该以小写字母开头,然后是驼峰案例。 例如,doLayout()
变量名 它应该以小写字母开头,然后是驼峰案例。 例如,firstName
Constant Name 它应该只是大写。 例如,COUNT,MAX_VALUE
物业名称 它应该以小写字母开头,然后是驼峰案例。 例如,enableColumnResize = true

Ext.js - Architecture

Ext JS遵循MVC/MVVM架构。

MVC - 模型视图控制器架构(版本4)

MVVM - 模型视图视图模型(版本5)

此体系结构对于程序不是必需的,但是,遵循此结构以使代码具有高度可维护性和组织性是最佳实践。

Ext JS App的项目结构

----------src
----------resources
-------------------CSS files
-------------------Images
----------JavaScript
--------------------App Folder
-------------------------------Controller
------------------------------------Contoller.js
-------------------------------Model
------------------------------------Model.js
-------------------------------Store
------------------------------------Store.js
-------------------------------View
------------------------------------View.js
-------------------------------Utils
------------------------------------Utils.js
--------------------------------app.js
-----------HTML files

Ext JS app文件夹将驻留在项目的JavaScript文件夹中。

该应用程序将包含app.js的控制器,视图,模型,存储和实用程序文件。

app.js - 程序流程开始的主文件,应使用“script”标记包含在主HTML文件中。 应用程序调用应用程序的控制器以执行其余功能。

Controller.js - 它是Ext JS MVC架构的控制器文件。 它包含应用程序的所有控件,事件侦听器以及代码的大部分功能。 它具有为该应用程序中使用的所有其他文件定义的路径,例如store,view,model,require,mixins。

View.js - 它包含应用程序的界面部分,它向用户显示。 Ext JS使用各种UI丰富的视图,可以根据需要在这里进行扩展和自定义。

Store.js - 它包含本地缓存的数据,这些数据将在模型对象的帮助下在视图上呈现。 存储使用代理获取数据,代理具有为服务定义的路径以获取后端数据。

Model.js - 它包含将商店数据绑定到视图的对象。 它具有后端数据对象到视图dataIndex的映射。 在商店的帮助下获取数据。

Utils.js - 它不包含在MVC体系结构中,但是用于使代码清洁,不太复杂和可读性的最佳实践。 我们可以在此文件中编写方法,并在需要时在控制器或视图渲染器中调用它们。 它也有助于代码可重用性。

在MVVM架构中,控制器由ViewModel取代。

ViewModel - 它基本上调解了视图和模型之间的变化。 它将数据从模型绑定到视图。 同时,它与视图没有任何直接的交互。 它只有模型的知识。

它是如何运作的 (How It Works)

例如,如果我们在U​​I中的两到三个位置使用一个模型对象。 如果我们在U​​I的某个位置更改值,我们可以看到甚至没有保存该更改。 无论模型在何处使用,模型值的变化都会反映在UI中的所有位置。

它使开发人员的工作量更小,更容易,因为绑定数据不需要额外的编码。

Ext.js - First Program

本章列出了在Ext JS中编写第一个Hello World程序的步骤。

Step 1

在我们选择的编辑器中创建index.htm页面。 在html页面的head部分包含所需的库文件,如下所示。

index.htm

<!DOCTYPE html>
<html>
   <head>
      <link href = "https://cdnjs.cloudflare.com/ajax/libs/extjs/6.0.0/classic/theme-classic/resources/theme-classic-all.css" 
         rel = "stylesheet" />
      <script type = "text/javascript" 
         src = "https://cdnjs.cloudflare.com/ajax/libs/extjs/6.0.0/ext-all.js"></script>
      <script type = "text/javascript">
         Ext.onReady(function() {
            Ext.create('Ext.Panel', {
               renderTo: 'helloWorldPanel',
               height: 200,
               width: 600,
               title: 'Hello world',
               html: 'First Ext JS Hello World Program'
            });
         });
      </script>
   </head>
   <body>
      <div id = "helloWorldPanel" />
   </body>
</html>

说明 (Explanation)

  • 一旦Ext JS准备好渲染Ext JS元素,就会调用Ext.onReady()方法。

  • Ext.create()方法用于在Ext JS中创建对象。 这里我们创建一个简单面板类Ext.Panel的对象。

  • Ext.Panel是Ext JS中用于创建面板的预定义类。

  • 每个Ext JS类都有不同的属性来执行一些基本功能。

Ext.Panel类有各种属性,如 -

  • renderTo是此面板必须呈现的元素。 'helloWorldPanel'是Index.html文件中的div id。

  • Heightwidth属性用于自定义面板的大小。

  • Title属性是为小组提供标题。

  • Html属性是要在面板中显示的html内容。

Step 2

在标准浏览器中打开index.htm文件,您将在浏览器上获得以下输出。

新页面打开

Ext.js - Class System

Ext JS是一个具有面向对象编程功能的JavaScript框架。 Ext是命名空间,它封装了Ext JS中的所有类。

在Ext JS中定义一个类

Ext提供了300多个类,我们可以使用它们来实现各种功能。

Ext.define()用于定义Ext JS中的类。

语法 (Syntax)

Ext.define(class name, class members/properties, callback function);

类名是根据app结构的类的名称。 例如,appName.folderName.ClassName studentApp.view.StudentView。

类属性/成员定义类的行为。

回调函数是可选的。 当类正确加载时调用它。

Ext JS类定义的示例

Ext.define(studentApp.view.StudentDeatilsGrid, {
   extend : 'Ext.grid.GridPanel',
   id : 'studentsDetailsGrid',
   store : 'StudentsDetailsGridStore',
   renderTo : 'studentsDetailsRenderDiv',
   layout : 'fit',
   columns : [{
      text : 'Student Name',
      dataIndex : 'studentName'
   },{
      text : 'ID',
      dataIndex : 'studentId'
   },{
      text : 'Department',
      dataIndex : 'department'
   }]
});

创建对象

与其他基于OOPS的语言一样,我们也可以在Ext JS中创建对象。

以下是在Ext JS中创建对象的不同方法。

使用新关键字

var studentObject = new student();
studentObject.getStudentName();

Using Ext.create()

Ext.create('Ext.Panel', {
   renderTo : 'helloWorldPanel',
   height : 100,
   width : 100,
   title : 'Hello world',
   html : 	'First Ext JS Hello World Program'		
});

Ext JS中的继承

继承是将A类中定义的功能用于B类的原则。

在Ext JS中,继承可以使用两种方法完成 -

Ext.extend

Ext.define(studentApp.view.StudentDetailsGrid, {
   extend : 'Ext.grid.GridPanel',
   ...
});

在这里,我们的自定义类StudentDetailsGrid使用Ext JS类GridPanel的基本功能。

使用Mixins

Mixins是一种在B类中使用A类而不扩展的不同方式。

mixins : {
   commons : 'DepartmentApp.utils.DepartmentUtils'
},

Mixins被添加到控制器中,我们在其中声明所有其他类,例如store,view等。这样,我们可以调用DepartmentUtils类并在控制器或此应用程序中使用它的函数。

Ext.js - Containers

Ext JS中的容器是我们可以添加其他容器或子组件的组件。 这些容器可以具有多个布局以将组件布置在容器中。 我们可以从容器及其子元素中添加或删除组件。 Ext.container.Container是Ext JS中所有容器的基类。

集装箱
Sr.No 描述
1 Container内的组件

此示例显示如何定义容器内的组件

2 Container inside container

此示例显示如何使用其他组件在容器内定义容器

有各种类型的容器Ext.panel.Panel,Ext.form.Panel,Ext.tab.Panel和Ext.container.Viewport是Ext JS中经常使用的容器。 以下是显示如何使用这些容器的示例。

Sr.No. 容器类型和描述
1 Ext.panel.Panel

此示例显示Ext.panel.Panel容器

2 Ext.form.Panel

此示例显示Ext.form.Panel容器

3 Ext.tab.Panel

此示例显示Ext.tab.Panel容器

4 Ext.container.Viewport

此示例显示Ext.container.Viewport容器

Ext.js - Layouts

布局是元素在容器中排列的方式。 它可以是水平的,垂直的或任何其他的。 Ext JS在其库中定义了不同的布局,但我们也可以编写自定义布局。

Sr.No 布局和描述
1 Absolute

此布局允许使用容器中的XY坐标定位项目。

2 Accordion

此布局允许将所有项目以堆栈方式(一个在另一个的顶部)放置在容器内。

3 Anchor

此布局为用户提供了权限,以指定每个元素相对于容器大小的大小。

4 Border

在此布局中,各种面板嵌套并由边框分隔。

5 Auto

这是默认布局,它根据元素的数量决定元素的布局。

6 Card(TabPanel)

此布局以制表符方式排列不同的组件。 选项卡将显示在容器的顶部。 每次只能看到一个选项卡,每个选项卡都被视为不同的组件。

7 Card(Wizard)

在这种布局中,每次元素都来自完整的容器空间。 向导中有一个用于导航的底部工具栏。

8 Column

此布局用于在容器中显示多个列。 我们可以为列定义固定宽度或百分比宽度。 宽度百分比将根据容器的完整大小计算。

9 Fit

在此布局中,容器填充有单个面板。 如果没有与布局相关的特定要求,则使用此布局。

10 Table

顾名思义,此布局以HTML表格式排列容器中的组件。

11 vBox

该布局允许元素以垂直方式分布。 这是最常用的布局之一。

12 hBox

该布局允许元素以水平方式分布。

Ext.js - Components

ExtJS UI由一个或多个名为Components的小部件组成。 Ext Js定义了各种UI组件,可根据您的要求进行自定义。

Sr.No 方法和描述
1 Grid

网格组件可用于以表格格式显示数据。

2 Form

表单小部件是从用户获取数据。

3 消息框

消息框主要用于以警告框的形式显示数据。

4 Chart

图表用于表示图形格式的数据。

5 Tool tip

工具提示用于在发生任何事件时显示一些基本信息。

6 Window

此UI小部件用于创建一个窗口,该窗口应在发生任何事件时弹出。

7 HTML编辑器

HTML编辑器是非常有用的UI组件之一,用于根据字体,颜色,大小等对用户输入的数据进行样式设置。

8 Progress bar

显示后端工作的进度。

Ext.js - Drag and Drop

拖放功能是为使开发人员的任务变得简单而添加的强大功能之一。 实际上,拖动操作是某个UI元素上的单击手势,同时按住鼠标按钮并移动鼠标。 在拖动操作后释放鼠标按钮时发生放下操作。

语法 (Syntax)

将拖放类添加到可拖动目标。

var dd = Ext.create('Ext.dd.DD', el, 'imagesDDGroup', {
   isTarget: false
});

将拖放目标类添加到可拖放目标。

var mainTarget = Ext.create('Ext.dd.DDTarget', 'mainRoom', 'imagesDDGroup', {
   ignoreSelf: false
});

例子 (Example)

以下是一个简单的例子。

<!DOCTYPE html>
<html>
   <head>
      <link href = "https://cdnjs.cloudflare.com/ajax/libs/extjs/6.0.0/classic/theme-classic/resources/theme-classic-all.css" 
         rel = "stylesheet" />
      <script type = "text/javascript" 
         src = "https://cdnjs.cloudflare.com/ajax/libs/extjs/6.0.0/ext-all.js"></script>
      <script type = "text/javascript">
         Ext.application ({
            launch: function() {
               var images = Ext.get('images').select('img');
               Ext.each(images.elements, function(el) {
                  var dd = Ext.create('Ext.dd.DD', el, 'imagesDDGroup', {
                     isTarget: false
                  });
               });
            }
         }); 
         var mainTarget = Ext.create('Ext.dd.DDTarget', 'mainRoom', 'imagesDDGroup', {
            ignoreSelf: false
         });
      </script>
      <style>
         #content {
            width:600px;
            height:400px;
            padding:10px;
            border:1px solid #000;
         }
         #images {
            float:left;
            width:40%;
            height:100%;
            border:1px solid Black;
            background-color:rgba(222, 222, 222, 1.0);
         }
         #mainRoom {
            float:left;
            width:55%;
            height:100%;
            margin-left:15px;
            border:1px solid Black;
            background-color:rgba(222, 222, 222, 1.0);
         }
         .image {   
            width:64px;
            height:64px;
            margin:10px;
            cursor:pointer;
            border:1px solid Black;
            display: inline-block;
         }
      </style>
   </head>
   <body>
      <div id = "content">   
         <div id = "images"> 
            <img src = "/extjs/images/1.jpg" class = "image" />
            <img src = "/extjs/images/2.jpg" class = "image" />
            <img src = "/extjs/images/3.jpg" class = "image" />
            <img src = "/extjs/images/4.jpg" class = "image" />
            <img src = "/extjs/images/5.jpg" class = "image" />
            <img src = "/extjs/images/6.jpg" class = "image" />
            <img src = "/extjs/images/7.jpg" class = "image" />
            <img src = "/extjs/images/8.jpg" class = "image" />
         </div>
         <div id = "mainRoom"></div>
      </div>
   </body>
</html>

以上程序将产生以下结果 -

新页面打开

借助Extjs中的拖放功能,我们可以将数据从网格移动到网格,将网格移动到网格中。 以下是在网格和表单之间移动数据的示例。

拖放 - 网格到网格

拖放 - 网格到表格

Ext.js - Themes

Ext.js提供了许多应用程序中使用的主题。 您可以添加不同的主题来代替经典主题,并查看输出中的差异。 这可以通过替换前面解释的主题CSS文件来完成。

海王星主题

考虑您的第一个Hello World应用程序。 从应用程序中删除以下CSS。

https://cdnjs.cloudflare.com/ajax/libs/extjs/6.0.0/classic/theme-classic/resources/theme-classic-all.css

添加以下CSS以使用海王星主题。

https://cdnjs.cloudflare.com/ajax/libs/extjs/6.0.0/classic/theme-neptune/resources/theme-neptune-all.css

要查看效果,请尝试以下程序。

<!DOCTYPE html>
<html>
   <head>
      <link href = "https://cdnjs.cloudflare.com/ajax/libs/extjs/6.0.0/classic/theme-neptune/resources/theme-neptune-all.css" 
         rel = "stylesheet" />
      <script type = "text/javascript" 
         src = "https://cdnjs.cloudflare.com/ajax/libs/extjs/6.0.0/ext-all.js"></script>
      <script type = "text/javascript">
         Ext.onReady(function() {
            Ext.create('Ext.Panel', {
               renderTo: 'helloWorldPanel',
               height: 200,
               width: 600,
               title: 'Hello world',
               html: 'First Ext JS Hello World Program'
            });
         });
      </script>
   </head>
   <body>
      <div id = "helloWorldPanel" />
   </body>
</html>

以上程序将产生以下结果 -

新页面打开

清脆的主题

考虑您的第一个Hello World应用程序。 从应用程序中删除以下CSS。

https://cdnjs.cloudflare.com/ajax/libs/extjs/6.0.0/classic/theme-classic/resources/theme-classic-all.css

添加以下CSS以使用海王星主题。

https://cdnjs.cloudflare.com/ajax/libs/extjs/6.0.0/classic/theme-crisp/resources/theme-crisp-all.css

要查看效果,请尝试以下程序。

<!DOCTYPE html>
<html>
   <head>
      <link href = "https://cdnjs.cloudflare.com/ajax/libs/extjs/6.0.0/classic/theme-crisp/resources/theme-crisp-all.css" 
         rel = "stylesheet" />
      <script type = "text/javascript" 
         src = "https://cdnjs.cloudflare.com/ajax/libs/extjs/6.0.0/ext-all.js"></script>
      <script type = "text/javascript">
         Ext.onReady(function() {
            Ext.create('Ext.Panel', {
               renderTo: 'helloWorldPanel',
               height: 200,
               width: 600,
               title: 'Hello world',
               html: 'First Ext JS Hello World Program'
            });
         });
      </script>
   </head>
   <body>
      <div id = "helloWorldPanel" />
   </body>
</html>

以上程序将产生以下结果 -

新页面打开

特里顿主题

考虑您的第一个Hello World应用程序。 从应用程序中删除以下CSS。

https://cdnjs.cloudflare.com/ajax/libs/extjs/6.0.0/classic/theme-classic/resources/theme-classic-all.css

添加以下CSS以使用Triton主题。

https://cdnjs.cloudflare.com/ajax/libs/extjs/6.0.0/classic/theme-triton/resources/theme-triton-all.css

要查看效果,请尝试以下程序。

<!DOCTYPE html>
<html>
   <head>
      <link href = "https://cdnjs.cloudflare.com/ajax/libs/extjs/6.0.0/classic/theme-triton/resources/theme-triton-all.css" 
         rel = "stylesheet" />
      <script type = "text/javascript" 
         src = "https://cdnjs.cloudflare.com/ajax/libs/extjs/6.0.0/ext-all.js"></script>
      <script type = "text/javascript">
         Ext.onReady(function() {
            Ext.create('Ext.Panel', {
               renderTo: 'helloWorldPanel',
               height: 200,
               width: 600,
               title: 'Hello world',
               html: 'First Ext JS Hello World Program'
            });
         });
      </script>
   </head>
   <body>
      <div id = "helloWorldPanel" />
   </body>
</html>

以上程序将产生以下结果 -

新页面打开

灰色主题

考虑您的第一个Hello World应用程序。 从应用程序中删除以下CSS。

https://cdnjs.cloudflare.com/ajax/libs/extjs/6.0.0/classic/theme-classic/resources/theme-classic-all.css

添加以下CSS以使用灰色主题。

https://cdnjs.cloudflare.com/ajax/libs/extjs/6.0.0/classic/theme-gray/resources/theme-gray-all.css

要查看效果,请尝试以下程序。

<!DOCTYPE html>
<html>
   <head>
      <link href = "https://cdnjs.cloudflare.com/ajax/libs/extjs/6.0.0/classic/theme-gray/resources/theme-gray-all.css" 
         rel = "stylesheet" />
      <script type = "text/javascript" 
         src = "https://cdnjs.cloudflare.com/ajax/libs/extjs/6.0.0/ext-all.js"></script>
      <script type = "text/javascript">
         Ext.onReady(function() {
            Ext.create('Ext.Panel', {
               renderTo: 'helloWorldPanel',
               height: 200,
               width: 600,
               title: 'Hello world',
               html: 'First Ext JS Hello World Program'
            });
         });
      </script>
   </head>
   <body>
      <div id = "helloWorldPanel" />
   </body>
</html>

以上程序将产生以下结果 -

新页面打开

Ext.js - Custom Events and listeners

当事情发生在课堂上时,事件会被触发。 例如,在单击按钮时或在呈现元素之前/之后。

写事件的方法

  • 使用侦听器的内置事件
  • Attaching events later
  • 自定义活动

使用监听器的内置事件

Ext JS提供了侦听器属性,用于在Ext JS文件中编写事件和自定义事件。

Writing listener in Ext JS

我们将通过向面板添加listen属性来在前一个程序中添加监听器。

<!DOCTYPE html>
<html>
   <head>
      <link href = "https://cdnjs.cloudflare.com/ajax/libs/extjs/6.0.0/classic/theme-neptune/resources/theme-neptune-all.css" 
         rel = "stylesheet" />
      <script type = "text/javascript" 
         src = "https://cdnjs.cloudflare.com/ajax/libs/extjs/6.0.0/ext-all.js"></script>
      <script type = "text/javascript">
         Ext.onReady(function() {
            Ext.create('Ext.Button', {
               renderTo: Ext.getElementById('helloWorldPanel'),
               text: 'My Button',
               listeners: {
                  click: function() {
                     Ext.MessageBox.alert('Alert box', 'Button is clicked');	
                  }
               }
            });
         });
      </script> 
   </head>
   <body>
      <p> Please click the button to see event listener </p>
      <div id = 'helloWorldPanel' />   <!--  panel will be rendered here-- >
   </body>
</html>

以上程序将产生以下结果 -

新页面打开

这样我们也可以在listeners属性中编写多个事件。

Multiple Events in the Same Listener

<!DOCTYPE html>
<html>
   <head>
      <link href = "https://cdnjs.cloudflare.com/ajax/libs/extjs/6.0.0/classic/theme-neptune/resources/theme-neptune-all.css" 
         rel = "stylesheet" />
      <script type = "text/javascript" 
         src = "https://cdnjs.cloudflare.com/ajax/libs/extjs/6.0.0/ext-all.js"></script>
      <script type = "text/javascript">
         Ext.onReady(function() {
            Ext.get('tag2').hide()
            Ext.create('Ext.Button', {
               renderTo: Ext.getElementById('helloWorldPanel'),
               text: 'My Button',
               listeners: {
                  click: function() {
                     this.hide();
                  },
                  hide: function() {
                     Ext.get('tag1').hide();
                     Ext.get('tag2').show();
                  }
               }
            });
         });           
      </script> 
   </head>
   <body>
      <div id = "tag1">Please click the button to see event listener.</div>
      <div id = "tag2">The button was clicked and now it is hidden.</div>
      <div id = 'helloWorldPanel' />   <!--  panel will be rendered here-- >
   </body>
</html>
新页面打开

稍后附加事件

在前面编写事件的方法中,我们在创建元素时在侦听器中编写了事件。 另一种方式是附加事件。

<!DOCTYPE html>
<html>
   <head>
      <link href = "https://cdnjs.cloudflare.com/ajax/libs/extjs/6.0.0/classic/theme-neptune/resources/theme-neptune-all.css" 
         rel = "stylesheet" />
      <script type = "text/javascript" 
         src = "https://cdnjs.cloudflare.com/ajax/libs/extjs/6.0.0/ext-all.js"></script>
      <script type = "text/javascript">
         Ext.onReady(function() {
            var button = Ext.create('Ext.Button', {
               renderTo: Ext.getElementById('helloWorldPanel'),
               text: 'My Button'
            });
            // This way we can attach event to the button after the button is created.
            button.on('click', function() {
               Ext.MessageBox.alert('Alert box', 'Button is clicked');
            });
         });
      </script> 
   </head>
   <body>
      <p> Please click the button to see event listener </p>
      <div id = 'helloWorldPanel' />   <!--  panel will be rendered here-- >
   </body>
</html>

以上程序将产生以下结果 -

新页面打开

自定义事件

我们可以在Ext JS中编写自定义事件,并使用fireEvent方法触发事件。 以下示例说明如何编写自定义事件。

<!DOCTYPE html>
<html>
   <head>
      <link href = "https://cdnjs.cloudflare.com/ajax/libs/extjs/6.0.0/classic/theme-neptune/resources/theme-neptune-all.css" 
         rel = "stylesheet" />
      <script type = "text/javascript" 
         src = "https://cdnjs.cloudflare.com/ajax/libs/extjs/6.0.0/ext-all.js"></script>
      <script type = "text/javascript">
         Ext.onReady(function() {
            var button = Ext.create('Ext.Button', {
               renderTo: Ext.getElementById('helloWorldPanel'),
               text: 'My Button',
               listeners: {
                  myEvent: function(button) {
                     Ext.MessageBox.alert('Alert box', 'My custom event is called');
                  }
               }
            });
            Ext.defer(function() {
               button.fireEvent('myEvent');
            }, 5000);
         }); 
      </script> 
   </head>
   <body>
      <p> The event will be called after 5 seconds when the page is loaded. </p>
      <div id = 'helloWorldPanel' />   <!--  panel will be rendered here-- >
   </body>
</html>

加载页面并准备文档后,将显示带有按钮的UI页面,当我们在5秒后触发事件时,文档就绪。 警告框将在5秒后出现。

新页面打开

在这里,我们编写了自定义事件'myEvent',我们将事件发送为button.fireEvent(eventName);

Ext.js - Data

数据包用于加载和保存应用程序中的所有数据。

数据包有很多类,但最重要的类是 -

  • Model
  • Store
  • Proxy

Model

模型的基类是Ext.data.Model 。 它代表应用程序中的实体。 它将商店数据绑定到视图。 它具有后端数据对象到视图dataIndex的映射。 在商店的帮助下获取数据。

创建模型

为了创建模型,我们需要扩展Ext.data.Model类,我们需要定义字段,它们的名称和映射。

Ext.define('StudentDataModel', {
   extend: 'Ext.data.Model',
   fields: [
      {name: 'name', mapping : 'name'},
      {name: 'age', mapping : 'age'},
      {name: 'marks', mapping : 'marks'}
   ]
});

这里的名称应该与我们在视图中声明的dataIndex相同,并且映射应该匹配数据的静态或动态数据,这些数据将使用store获取。

Store

存储的基类是Ext.data.Store 。 它包含本地缓存的数据,这些数据将在模型对象的帮助下在视图上呈现。 存储使用代理获取数据,代理具有为服务定义的路径以获取后端数据。

存储数据可以通过两种方式获取 - 静态或动态。

静态商店

对于静态存储,我们将存储存储中的所有数据,如以下代码所示。

Ext.create('Ext.data.Store', {
   model: 'StudentDataModel',
   data: [
      { name : "Asha", age : "16", marks : "90" },
      { name : "Vinit", age : "18", marks : "95" },
      { name : "Anand", age : "20", marks : "68" },
      { name : "Niharika", age : "21", marks : "86" },
      { name : "Manali", age : "22", marks : "57" }
   ];
});

动态商店

可以使用代理获取动态数据。 我们可以拥有可以从Ajax,Rest和Json获取数据的代理。

Proxy

代理的基类是Ext.data.proxy.Proxy。 模型和商店使用代理来处理模型数据的加载和保存。

有两种类型的代理

  • 客户端代理
  • 服务器代理

客户端代理

客户端代理包括使用HTML5本地存储的内存和本地存储。

服务器代理

服务器代理使用Ajax,Json数据和Rest服务处理来自远程服务器的数据。

Defining proxies in the server

Ext.create('Ext.data.Store', {
   model: 'StudentDataModel',
   proxy : {
      type : 'rest',
      actionMethods : {
         read : 'POST'  // Get or Post type based on requirement
      },
      url : 'restUrlPathOrJsonFilePath', // here we have to include the rest URL path 
      // which fetches data from database or Json file path where the data is stored
      reader: {
         type : 'json',  // the type of data which is fetched is of JSON type
         root : 'data'
      },
   }
});

Ext.js - Fonts

Ext.js提供了使用不同字体包的功能。 字体包用于为包中可用的图标添加不同的类。

  • Font-Awesome
  • Font-Pictos

Font-Awesome

ExtJS新主题Triton在框架本身中包含一个内置字体系列字体,因此我们不需要任何明确的字体 - 真棒样式表要求。

以下是在Triton主题中使用Font-Awesome类的示例。

Font-Awesome与Triton主题

当我们使用除Triton之外的任何其他主题时,我们需要或要求明确地为font-awesome添加样式表。

以下是使用没有Triton主题的Font-Awesome类的示例。

Font-Awesome与普通主题(任何主题,然后Triton主题)

Font-Pictos

字体图片不包含在ExtJS的框架中,因此我们必须要求相同。 只有Sencha的许可用户才有权使用font-pictos。

添加Font-Pictos的步骤

Step 1 - 使用以下命令要求font-pictos类。

"requires": ["font-pictos"]

Step 2 - 现在将pictos类添加为 -

iconCls: 'pictos pictos-home'

Ext.js - Style

应用程序样式是指用户调整组件的外观。 这些调整可能包括:颜色,颜色渐变,字体,边距/填充等.Ext JS 6有一种新的应用程序样式。

它使用SCSS进行样式设计。 SCSS是一种更动态的CSS代码编写方式。 我们可以借助于此函数在样式表中编写变量。 但是,浏览器无法理解SCSS。 它只能理解CSS,因此所有SCSS文件都应该编译成CSS到生产就绪代码。

因此,SCSS文件称为预处理器文件。 在Ext.js中,编译是通过Sencha CMD工具完成的。 Sencha CMD使用以下命令仅手动编译一次。

sencha app build [development]

Global_CSS是主要的CSS文件,它包含ExtJS中与之关联的所有SCSS变量,可以在我们的应用程序中使用,根据我们的需要提供不同的值来定制我们的主题。

以下是Ext.js中Global_CSS中可用的一些CSS变量。

Sr.No 变量和描述
1

$base-color

$ base-color:color(例如$ base-color:#808080)

这种基色将在整个主题中使用。

2

$base-gradient

$ base-gradient:string(例如$ base-gradient:'matte')

此基本渐变将在整个主题中使用。

3

$body-background-color

$ body-background-color:color(例如$ body-background-color:#808080)

应用于body元素的背景颜色。 如果设置为透明或“无”,则不会在body元素上设置背景颜色样式。

4

$color

$ color:color(例如$ color:#808080)

此默认文本颜色将在整个主题中使用。

5

$font-family

$ font-family:string(例如$ font-family:arial)

此默认字体系列将在整个主题中使用。

6

$font-size

$ font-size:number(例如$ font-size:9px)

此默认字体大小将在整个主题中使用。

7

$font-weight

$ font-weight:string/number(例如$ font-weight:normal)

此默认字体权重将在整个主题中使用。

8

$font-weight-bold

$ font-weight-bold:字符串/数字(例如$ font-weight-bold:bold)

此粗体字体的默认字体粗细将在整个主题中使用。

9

$include-chrome

$ include-chrome:boolean(例如$ include-chrome:true)

是的,包括Chrome特定规则。

10

$include-ff

$ include-ff:boolean(例如$ include-ff:true)

如果包含Firefox特定规则,则为True。

11

$include-ie

$ include-ie:boolean(例如$ include-ie:true)

如果包含IE9及更低版本的Internet Explorer特定规则,则为True。

12

$include-opera

$ include-opera:boolean(例如$ include-opera:true)

如果包含Opera特定规则,则为True。

13

$include-safari

$ include-safari:boolean(例如$ include-safari:true)

如果包含Opera特定规则,则为True。

14

$include-webkit

$ include-webkit:boolean(例如$ include-webkit:true)

如果包含Webkit特定规则,则为True。

Ext.js - Drawing

ExtJS中的绘图包使您可以绘制通用图形。 这可用于适用于所有浏览器和移动设备的图形。

Sr.No 画画
1 Circle

此图形用于创建圆形形状。

2 Rectangle

此图形用于创建矩形形状。

3 Arc

此图形用于创建弧形。

4 Ellipse

此图形用于创建椭圆形状。

5 EllipticalArc

此图形用于创建椭圆弧形状。

6 Image

此图形用于向应用程序添加图像。

7 Path

此图形用于创建自由路径。

8 Text

此图形用于向应用程序添加任何文本。

9 Translate after render

此属性用于在渲染图形后移动容器中的起点。 它可以用于任何图形。

10 Rotation

此属性用于向添加的图形添加旋转。 它可以用于任何图形。

11 Square

此图形用于创建正方形。

Ext.js - Localization

最好以他们理解和喜欢的语言与用户沟通。 Extjs本地化包支持40多种语言,如德语,法语,韩语,中文等。在ExtJs中实现语言环境非常简单。 您将在ext-locale包的override文件夹中找到所有捆绑的语言环境文件。 区域设置文件只是覆盖,告诉Ext JS替换某些组件的默认英语值。

以下程序将显示不同语言环境中的月份以查看效果。 请尝试以下程序。

<!DOCTYPE html>
<html>
   <head>
      <link href = "https://cdnjs.cloudflare.com/ajax/libs/extjs/6.0.0/classic/theme-classic/resources/theme-classic-all.css" 
         rel = "stylesheet" />
      <script type = "text/javascript" 
         src = "https://cdnjs.cloudflare.com/ajax/libs/extjs/6.0.0/ext-all.js"></script>
      <script type = "text/javascript" 
         src = "https://cdnjs.cloudflare.com/ajax/libs/extjs/6.0.0/classic/locale/locale-fr.js"></script>
      <script type = "text/javascript">
         Ext.onReady(function() {
            var monthArray = Ext.Array.map(Ext.Date.monthNames, function (e) { return [e]; });
            var ds = Ext.create('Ext.data.Store', {
               fields: ['month'],
               remoteSort: true,
               pageSize: 6,
               proxy: {
                  type: 'memory',
                  enablePaging: true,
                  data: monthArray,
                  reader: {type: 'array'}
               }
            });
            Ext.create('Ext.grid.Panel', {
               renderTo: 'grid',
               id : 'gridId',
               width: 600,
               height: 200,
               title:'Month Browser',
               columns:[{
                  text: 'Month of the year',
                  dataIndex: 'month',
                  width: 300
               }],
               store: ds,
               bbar: Ext.create('Ext.toolbar.Paging', {
                  pageSize: 6,
                  store: ds,
                  displayInfo: true
               })
            }); 
            Ext.getCmp('gridId').getStore().load();
         });
      </script>
   </head>
   <body>
      <div id = "grid" />
   </body>
</html>

上述程序将产生以下结果

新页面打开

要使用除英语之外的其他语言环境,我们需要在程序中添加特定于语言环境的文件。 在这里,我们使用https://cdnjs.cloudflare.com/ajax/libs/extjs/6.0.0/classic/locale/localefr.js为法语。 您可以为不同的语言使用不同的语言环境,例如https://cdnjs.cloudflare.com/ajax/libs/extjs/6.0.0/classic/locale/locale-ko.js for korean等。

以下程序用于显示韩语语言环境中的日期选择器以查看效果。 请尝试以下程序。

<!DOCTYPE html>
<html>
   <head>
      <link href = "https://cdnjs.cloudflare.com/ajax/libs/extjs/6.0.0/classic/theme-classic/resources/theme-classic-all.css" 
         rel = "stylesheet" />
      <script type = "text/javascript" 
         src = "https://cdnjs.cloudflare.com/ajax/libs/extjs/6.0.0/ext-all.js"></script>
      <script type = "text/javascript" 
         src = "https://cdnjs.cloudflare.com/ajax/libs/extjs/6.0.0/classic/locale/locale-ko.js"></script>
      <script type = "text/javascript">
         Ext.onReady(function() {
            Ext.create('Ext.picker.Date', {
               renderTo: 'datePicker'
            });
         });
      </script>
   </head>
   <body>
      <div id = "datePicker" />
   </body>
</html>

以上程序将产生以下结果 -

新页面打开

下表列出了ExtJS中可用的少数语言环境以及要更改的主文件语言环境URL。

语言环境 语言 区域设置网址
koKoreanhttps://cdnjs.cloudflare.com/ajax/libs/extjs/6.0.0/classic/locale/locale-ko.js
frFrenchhttps://cdnjs.cloudflare.com/ajax/libs/extjs/6.0.0/classic/locale/locale-fa.js
esSpanishhttps://cdnjs.cloudflare.com/ajax/libs/extjs/6.0.0/classic/locale/locale-es.js
jaJapanesehttps://cdnjs.cloudflare.com/ajax/libs/extjs/6.0.0/classic/locale/locale-ja.js
itItalianhttps://cdnjs.cloudflare.com/ajax/libs/extjs/6.0.0/classic/locale/locale-it.js
ruRussianhttps://cdnjs.cloudflare.com/ajax/libs/extjs/6.0.0/classic/locale/locale-ru.js
zh_CN 简化中文 https://cdnjs.cloudflare.com/ajax/libs/extjs/6.0.0/classic/locale/localezh_CN.js

Ext.js - Accessibility

一般来说,可访问性意味着可用性,内容可访问意味着内容可用。

在软件方面,应用程序可访问意味着应用程序可供所有人使用。 在这里,所有意味着残疾人,视障者或使用屏幕阅读器使用计算机的人或者喜欢使用键盘而不是使用鼠标导航的人。 用键盘导航而不是使用鼠标。

可访问的应用程序称为ARIA(可访问的富Internet应用程序)。

Ext JS中的辅助功能

Ext JS旨在记住它应该适用于所有键盘导航。 它具有内置选项卡索引和焦点功能,默认情况下始终处于启用状态,因此我们无需添加任何属性即可启用此功能。

此功能允许所有支持键盘的组件在选项卡时与用户进行交互。 例如,我们可以使用tab来移动到下一个组件而不是鼠标。 同样,我们可以使用shift + tab向后移动并使用键盘上的Enter来点击等。

专注造型和标签

当使用击键进行跳桌时,焦点是在Extjs中内置的。

以下示例显示了焦点随选项卡更改时样式更改的方式。

<!DOCTYPE html>
<html>
   <head>
      <link href = "https://cdnjs.cloudflare.com/ajax/libs/extjs/6.0.0/classic/theme-crisp/resources/theme-crisp-all.css" 
         rel = "stylesheet" />
      <script type = "text/javascript" 
         src = "https://cdnjs.cloudflare.com/ajax/libs/extjs/6.0.0/ext-all.js"></script>
      <script type = "text/javascript">
         Ext.onReady(function(){
            Ext.create('Ext.Button', {
               renderTo: Ext.getElementById('button1'),
               text: 'Button1',
               listeners: {
                  click: function() {
                     Ext.MessageBox.alert('Alert box', 'Button 1 is clicked');	
                  }
               }
            });
            Ext.create('Ext.Button', {
               renderTo: Ext.getElementById('button2'),
               text: 'Button2',
               listeners: {
                  click: function() {
                     Ext.MessageBox.alert('Alert box', 'Button 2 is clicked');	
                  }
               }
            });
            Ext.create('Ext.Button', {
               renderTo: Ext.getElementById('button3'),
               text: 'Button3',
               listeners: {
                  click: function() {
                     Ext.MessageBox.alert('Alert box', 'Button 3 is clicked');	
                  }
               }
            });
         });     
      </script>
   </head>
   <body> <p>Please click the button to see event listener:</p>
      <span id = "button3"/>
      <span id = "button2"/>
      <span id = "button1"/>
   </body>
</html>

要查看效果,请使用Tab键从下一个按钮和shft + tab移动以向后聚焦。 使用回车查看聚焦按钮的相关警报将如何弹出。

新页面打开

ARIA主题

ExtJS为视障人士提供主题咏叹调。

以下示例显示了视觉障碍者可轻松访问的咏叹调主题。

<!DOCTYPE html>
<html>
   <head>
      <link href = "https://cdnjs.cloudflare.com/ajax/libs/extjs/6.0.0/classic/theme-aria/resources/theme-aria-all.css" 
         rel = "stylesheet" />
      <script type = "text/javascript" 
         src = "https://cdnjs.cloudflare.com/ajax/libs/extjs/6.0.0/ext-all.js"></script>
      <script type = "text/javascript">
         Ext.require([
            'Ext.grid.*',
            'Ext.data.*'
         ]);
         // Creation of data model
         Ext.define('StudentDataModel', {
            extend: 'Ext.data.Model',
            fields: [
               {name: 'name', mapping : 'name'},
               {name: 'age', mapping : 'age'},
               {name: 'marks', mapping : 'marks'}
            ]
         });
         Ext.onReady(function() {
            // Store data
            var myData = [
               { name : "Asha", age : "16", marks : "90" },
               { name : "Vinit", age : "18", marks : "95" },
               { name : "Anand", age : "20", marks : "68" },
               { name : "Niharika", age : "21", marks : "86" },
               { name : "Manali", age : "22", marks : "57" }
            ];
            // Creation of first grid store
            var firstGridStore = Ext.create('Ext.data.Store', {
               model: 'StudentDataModel',
               data: myData
            });
            // Creation of first grid
            var firstGrid = Ext.create('Ext.grid.Panel', {
               store            : firstGridStore,
               columns          :
               [{ 
                  header: "Student Name",
                  dataIndex: 'name',	
                  id : 'name',    
                  flex:  1,  			
                  sortable: true
               },{
                  header: "Age", 
                  dataIndex: 'age',
                  flex: .5, 
                  sortable: true
               },{
                  header: "Marks",
                  dataIndex: 'marks',
                  flex: .5, 
                  sortable: true
               }],
               stripeRows       : true,
               title            : 'First Grid',
               margins          : '0 2 0 0'
            });
            // Creation of a panel to show both the grids.
            var displayPanel = Ext.create('Ext.Panel', {
               width        : 600,
               height       : 200,
               layout       : {
                  type: 'hbox',
                  align: 'stretch',
                  padding: 5
               },
               renderTo     : 'panel',
               defaults     : { flex : 1 }, 
               items        : [ 
                  firstGrid
               ]
            });
         });
      </script>
   </head>
   <body>
      <div id = "panel" > </div>
   </body>
</html>

上述程序将产生以下结果。 您可以使用Tab键和鼠标上下键将焦点移动到网格中,主题基本上适用于视障人士。

新页面打开

Ext.js - Debugging Ext JS code

可以使用alert()框或console.log()或调试器中的调试指针调试任何JavaScript代码。

警报框

在要检查流或任何变量值的代码中放置一个警告框。 例如,alert('message to show'+ variable);

Development/Debugging Tool

调试器是任何开发人员在开发时检查代码中的问题和错误的最重要工具。

Ext JS是一个JavaScript框架,因此可以使用由不同浏览器提供或特定于不同浏览器的开发人员工具轻松调试它。 所有主流浏览器都有可用于测试和调试JavaScript代码的开发人员工具。

流行的调试器是IE的IE开发工具,firefox的firebug和Chrome浏览器的chrome开发工具。

Chrome调试器附带Chrome浏览器,但是必须专门安装firebug,因为它不是带有firefox的软件包。

这是为firefox浏览器http://getfirebug.com安装firebug的链接

在Windows操作系统中打开开发工具的快捷方式是F12键盘键。

在调试器中调试JS代码

有两种方法可以调试JavaScript代码。

  • 第一种方法是在代码中放置console.log()并查看日志的值,该值将打印在开发工具的控制台中。

  • 第二种方法是在开发工具中使用断点。 以下是这个过程。

    • 在脚本标记下的所有可用脚本中打开该文件。

    • 现在将断点放在要调试的行上。

    • 在浏览器中运行该应用程序。

    • 现在,只要代码流到达此行,它就会破坏代码并保持不变,直到用户通过键F6(转到代码的下一行),F7(进入函数内部)或F8(运行代码)运行代码。根据您要调试的流,到下一个断点或运行代码(如果没有断点)。

    • 您可以选择要查看其值的变量或函数。

    • 您可以使用控制台检查值或检查浏览器本身的某些更改。

Ext.js - Methods

以下是一些内置函数,它们在Ext JS中大量使用。

Ext.is Class

此类检查您正在使用的平台,无论是手机还是台式机,Mac或Windows操作系统。 以下是与Ext.is类相关的方法。

Sr.No 方法和描述
1

Ext.is.Platforms

此函数返回此版本可用的平台。

例如,当您运行以下函数时,它返回如下内容 -

[Object { property = "platform", regex = RegExp, identity = "iPhone"}, 
Object { property = "platform", regex = RegExp, identity = "iPod"}, 
Object { property = "userAgent", regex = RegExp, identity = "iPad"}, 
Object { property = "userAgent", regex = RegExp, identity = "Blackberry"}, 
Object { property = "userAgent", regex = RegExp, identity = "Android"}, 
Object { property = "platform", regex = RegExp, identity = "Mac"}, 
Object { property = "platform", regex = RegExp, identity = "Windows"}, 
Object { property = "platform", regex = RegExp, identity = "Linux"}]
2

Ext.is.Android

如果您使用的是Android操作系统,此函数将返回true,否则返回false。

3

Ext.is.Desktop

如果您为应用程序使用桌面,则此函数将返回true,否则返回false。

4

Ext.is.Phone

如果您使用移动设备,此函数将返回true,否则返回false。

5

Ext.is.iPhone

如果您使用iPhone,此函数将返回true,否则返回false。

6

Ext.is.iPod

如果您使用的是iPod,此函数将返回true,否则返回false。

7

Ext.is.iPad

如果您使用的是iPad,此函数将返回true,否则返回false。

8

Ext.is.Windows

如果您使用的是Windows操作系统,则此函数将返回true,否则返回false。

9

Ext.is.Linux

如果您使用的是Linux操作系统,则此函数将返回true,否则返回false。

10

Ext.is.Blackberry

如果您使用Blackberry,此函数将返回true,否则返回false。

11

Ext.is.Mac

如果您使用的是Mac操作系统,此函数将返回true,否则返回false。

Ext.supports Class

如名称所示,如果浏览器/设备的当前环境支持该功能,则此类提供信息。

Sr.No 方法和描述
1

Ext.supports.History

它检查设备是否支持HTML 5历史记录作为window.history。 如果设备支持历史记录,则返回true ,否则返回false。

2

Ext.supports.GeoLocation

它检查设备是否支持地理定位方法。 在内部,它检查navigator.geolocation方法。

3

Ext.supports.Svg

它检查设备是否支持HTML 5功能可缩放矢量图形(svg)方法。 在内部,它检查doc.createElementNS && !! doc.createElementNS(“http:/”+“/ www.w3.org/2000/svg”,“svg”)。createSVGRect。

4

Ext.supports.Canvas

它检查设备是否支持HTML 5功能画布以绘制方法。 在内部,它检查doc.createElement('canvas')。getContext并根据此方法的输出返回一个值。

5

Ext.supports.Range

它检查浏览器是否支持document.createRange方法。

Ext.String Class

Ext.String类有各种方法来处理字符串数据。 最常用的方法是编码解码,修剪,切换,urlAppend等。

Encoding Decoding function - 这些是Ext.String类中可用于编码和解码HTML值的函数。

Sr.No 方法和描述
1

Ext.String.htmlEncode

此函数用于编码html值以使其可解析。

Example -

Ext.String.htmlEncode("< p > Hello World < /p >"); 
Output - "< p > Hello World < /p >".
2

Ext.String.htmlDecode

此函数用于解码编码的html值。

Example -

Ext.String.htmlDecode("< p > Hello World < /p >");
Output -  "< p > Hello World < /p >"
3

Ext.String.trim

此功能用于修剪字符串中不需要的空间。

Ext.String.trim('      hello      ');
Output – "hello"
4

Ext.String.urlAppend

此方法用于在URL字符串中附加值。

Example -

Ext.String.urlAppend('https://www.google.com' , 'hello'); 
Output - "https://www.google.com?hello" 
Ext.String.urlAppend('https://www.google.com?index=1' , 'hello'); 
Output – "https://www.google.com?index=1&hello" 
5

Ext.String.toggle

此功能用于在两个不同值之间切换值。

Example -

var toggleString = 'ASC' 
toggleString = Ext.String.toggle(a, 'ASC', 'DESC');
Output – DESC as toggleString had value ASC. Now again, if we 
print the same we will get toggleString = “ASC” this time, as 
it had value 'DESC'. 
It is similar to ternary operator 
toggleString = ((toggleString =='ASC')? 'DESC' : 'ASC' );

杂项方法

Sr.No 方法和描述
1

Ext.userAgent()

此函数提供有关浏览器userAgent的信息。 UserAgent用于识别Web服务器的浏览器和操作系统。

Example - 如果您在Mozilla中工作,则返回类似于:“mozilla/5.0(windows nt 6.1; wow64; rv:43.0)gecko/20100101 firefox/43.0”

2

Version related function

如果调用与IE相关的函数,则此函数返回当前正在使用的浏览器的版本。 在Firefox浏览器中,它返回0.这些函数是Ext.firefoxVersion,Ext.ieVersion等。

Example - 如果您使用的是Firefox浏览器,并且调用方法Ext.ieVersion来获取IE的版本,那么它将返回0.如果您在IE浏览器中使用相同的方法,则它将返回您正在使用的版本,例如8,9等

3

Ext.getVersion()

此函数返回当前使用的Ext JS版本。

Example - 如果调用Ext.getVersion(),它将返回一个值数组,如版本,短版本等。

Ext.getVersion()。version返回程序中使用的Ext JS的当前版本,例如“4.2.2”。

4

Browser related functions

这些函数根据使用的浏览器返回布尔值。 这些方法是Ext.isIE,Ext.isIE6,Ext.isFF06和Ext.isChrome。

Example - 如果您使用的是Chrome浏览器,则函数Ext.isChrome将返回true all,否则将返回false。

5

Ext.typeOf()

此函数返回变量的数据类型。

Example -

var a = 5;   
var b  = 'hello'; 
Ext.typeOf(a); 
Output – Number 
Ext.typeOf(b);
Output - String
6

DataType related methods - 这些函数根据变量的数据类型返回布尔值

Example -

var a = ['a', 'bc'];
var b = 'hello';
var c = 123;
var emptyVariable;
var definedVariable;
function extraFunction(){return true;}
Ext.isArray(a); //返回true
Ext.isString(b); //返回true
Ext.isNumber(c); //返回true
Ext.isEmpty(emptyVariable); //返回true
Ext.isEmpty(b); //返回false
Ext.isDefined(definedVariable); //返回true
Ext.isfunction(extraFunction); //返回true
↑回到顶部↑
WIKI教程 @2018