Ext.js快速指南

2018-12-28 10:12 更新

基本介绍

Ext JS代表扩展JavaScript，是基于YUI（Yahoo用户界面）的sencha的JavaScript框架和产品。它基本上是一个具有现代UI的桌面应用程序开发平台。
本教程完全理解Ext JS。这个参考将带你通过简单和实用的方法，同时学习Ext JS。

听众

本教程为初学者准备，帮助他们了解Ext JS的概念，以构建动态Web UI。

先决条件

对于本教程，读者应该具有HTML，CSS和JavaScript编码的先验知识。如果读者知道面向对象编程的概念并且具有创建web应用程序的一般想法将是有帮助的。

什么是Ext JS

Ext JS是一个流行的JavaScript框架，它为使用跨浏览器功能构建Web应用程序提供了丰富的UI。 Ext JS基本上用于创建桌面应用程序它支持所有现代浏览器，如IE6 +，FF，Chrome，safari 6+，歌剧12+等。而sencha，sencha touch的另一个产品用于移动应用程序。

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

历史

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的突出特性

Customizable UI widgets with collection of rich UI such as Grids, pivot grids, forms, charts, trees.
Code compatibility of new versions with the older one.
A flexible layout manager helps to organize the display of data and content across multiple browsers, devices, and screen sizes.
Advance data package decouples the UI widgets from the data layer. The data package allows client-side collection of data using highly functional models that enable features such as sorting and filtering.
It is protocol agnostic, and can access data from any back-end source.
Customizable Themes Ext JS widgets are available in multiple out-of-the-box themes that are consistent across platforms.

好处

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

Streamlines cross-platform development across desktops, tablets, and smartphones — for both modern and legacy browsers.
Increases the productivity of development teams by integrating into enterprise development environments via IDE plugins.
Reduces the cost of web application development.
Empowers teams to create apps with a compelling user experience.
It has set of widgets for making UI powerful and easy.
It follows MVC architecture so highly readable code.

限制

The size of library is large around 500 KB which makes initial loading time more and makes application slow.
HTML is full of
tags makes it complex and difficult to debug.
According to general public license policy it is free for open source applications but paid for commercial applications.
Some times for loading even simple things requires few lines of coding which is simpler in plain html or Jquery.
Need quite experienced developer for developing Ext JS applications.

工具

这些是sencha提供的用于Ext JS应用程序开发的工具，主要用于生产级别。

Sencha Cmd

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

Sencha IDE插件

Sencha IDE插件，它将Sencha框架集成到IntelliJ，WebStorm IDE中。这有助于通过提供代码完成，代码检查，代码导航，代码生成，代码重构，模板创建和拼写检查等功能来提高开发人员的生产力。

Sencha检查员

Sencha Inspector是一个调试工具，帮助调试器调试任何问题，同时开发。

尝试在线选项

我们已经在线设置了ExtJS编程环境，以便您可以在线编译和执行所有可用的示例。它给你对你正在阅读的信心，并使您能够使用不同的选项验证程序。随意修改任何示例并在线执行。

请尝试以下示例，使用下面示例代码框右上角的 Try it 选项:
<!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="external nofollow" target="_blank"  rel="external nofollow" target="_blank"  rel="external nofollow" target="_blank"  rel="external nofollow" target="_blank"  rel="external nofollow" target="_blank"  rel="stylesheet" />
      <script type="text/javascript" src="/attachements/w3c/ext-all.js"></script>
      <script type="text/javascript">
         Ext.onReady(function() {
         Ext.create('Ext.Panel', {
            renderTo: 'helloWorldPanel',
            height: 100,
            width: 200,
            title: 'Hello world',
            html: 'First Ext JS Hello World Program'
            });
         });
      </script>
   </head>
   <body>
      <div id="helloWorldPanel" />
   </body>
</html>
对于本教程中给出的大多数示例，您将在我们的网站代码部分的右上角找到一个Try it选项，将您带到在线编译器。所以只是利用它，享受你的学习。

本地环境设置

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

正在下载库文件

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

解压缩文件夹，你会发现各种JavaScript和CSS文件，你将包括在我们的应用程序。我们将主要包括以下文件:

您可以在文件夹\\ ext-6.0.1-trial \\ ext-6.0.1 \\ build下找到的（1）Javascript文件 JS文件是:

文件和描述
ext.js 这是核心文件，其中包含运行应用程序的所有功能。
ext-all.js 此文件包含在文件中没有注释的所有缩小的代码
ext-all-debug.js 这是ext-all.js的未分级版本，用于调试目的。
ext-all-dev.js 此文件也未分级，用于开发目的，因为它包含所有注释和控制台日志，以检查任何错误/问题
ext-all.js 这个文件用于生产目的，主要是因为它比任何其他小得多。

您可以将这些文件添加到您的项目JS文件夹，或者您可以给出文件驻留在系统中的直接路径。

（2）CSS文件有多个基于主题的文件，您可以在文件夹\\ ext-6.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>

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

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>

浏览器

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

IE 6 and above
Firefox 3.6 and above
Chrome10 and above
Safari 4 and above
Opera 11 and above

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

命名约定是标识符要遵循的一组规则。

它使得代码对于其他程序员也更可读和可理解。

Ext JS中的命名约定遵循标准JavaScript约定，这不是强制性的，而是遵循的良好做法。

它应该遵循camel case语法命名类，方法，变量和属性。

如果name与两个单词组合，则第二个单词将始终以大写字母开头。 doLayout（），StudentForm，firstName等。

名称	惯例
班级名称	它应该以大写字母开头，然后是驼峰盒。 StudentClass
方法名称	它应该以小写字母开头，然后是驼峰盒。 doLayout（）
变量名	它应该以小写字母开头，然后是驼峰盒。名字
常量名称	它应该是大写只有例如。 COUNT，MAX_VALUE
属性名称	它应该以小写字母开头，然后是驼峰。 enableColumnResize = true

Ext JS遵循MVC / MVVM架构。

MVC - 模型视图控制器体系结构（版本4）

MVVM - 模型视图Viewmodel（版本5）

这种架构不是程序的强制性，但最好的做法是遵循这种结构，使您的代码高度可维护和组织。

项目结构使用Ext JS应用程序

----------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应用程序文件夹将驻留在您的项目的JavaScript文件夹中。

应用程序将包含控制器，视图，模型，存储，实用程序文件与app.js.

app.js:程式流程开始的主要档案，应该使用＆lt; script＆gt; 标签。应用程序调用应用程序的控制器的其余功能。

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

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

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

Model.js:它包含绑定要查看的商店数据的对象。它有后端数据对象到视图dataIndex的映射。在store的帮助下获取数据。

Utils.js:它不包括在MVC架构中，但是最好的做法是使代码清晰，不太复杂，更加可读。我们可以在这个文件中编写方法，并在控制器或视图渲染器中调用它们。这对代码可重用性目的也很有帮助。

在MVVM架构中，控制器被ViewModel替代。

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

怎么运行的

例如，如果我们在UI中的两三个地方使用一个模型对象，如果我们在UI的一个地方更改值，我们可以看到，甚至没有保存更改模型更改的值，因此反映在UI中的所有地方在哪里使用模型。

它使开发人员更加轻松和简单，因为不需要额外的编码绑定数据。

本章列出了在Ext JS中首先编写Hello World程序的步骤:

步骤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="external nofollow" target="_blank"  rel="external nofollow" target="_blank"  rel="external nofollow" target="_blank"  rel="external nofollow" target="_blank"  rel="external nofollow" target="_blank"  rel="stylesheet" />
      <script type="text/javascript" src="/attachements/w3c/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.onReady（）方法将在Ext JS准备好渲染Ext JS元素时调用。
Ext.create（）方法用于在Ext JS中创建对象，这里我们创建一个简单的面板类Ext.Panel的对象。
Ext.Panel是Ext JS中用于创建面板的预定义类。
每个Ext JS类都有不同的属性来执行一些基本的功能。

Ext.Panel类有以下各种属性:

renderTo 是此面板必须呈现的元素。 \'helloWorldPanel\'是Index.html文件中的div id。
高度和宽度属性用于提供面板的自定义尺寸。
标题属性是为面板提供标题。
Html 属性是要在面板中显示的html内容。

第2步

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

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

在Ext JS中定义类

Ext提供了300多个类，我们可以用于各种功能。

Ext.define（）用于在Ext JS中定义类。

语法:

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

类名称是根据应用程序结构的类名称。 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-

使用new关键字:

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

使用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我们添加在控制器中，我们声明所有其他类，如存储，视图等。在这种方式，我们可以调用DepartmentUtils类，并在控制器或在这个应用程序中使用其功能。

容器

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

S.N.	描述
1	Components inside Container 此示例显示如何在容器内定义组件
2	Container inside container 此示例显示如何使用其他组件定义容器内的容器

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

S.N.	集装箱类型描述
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在其库中定义了不同的布局，但我们也可以编写自定义布局。

S.N.	布局＆amp; 描述
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 这种布局允许元素以水平方式分布。

ExtJS UI由一个或多个名为Components.Ext的widget组成.JS具有定义的各种UI组件，可以根据您的要求进行定制。

S.N.	方法＆amp; 描述
1	Grid 网格组件可用于以表格格式显示数据。
2	Form 窗体小部件是从用户获取数据。
3	Message Box 消息框基本上用于以警报框的形式显示数据。
4	Chart 图表用于以图形格式表示数据。
5	Tool tip 任何事件发生时，工具提示用于显示一些基本信息。
6	Window 这个UI部件是创建一个窗口，当任何事件发生时应该弹出。
7	HTML editor HTML编辑器是非常有用的UI组件之一，用于对用户输入的字体，颜色，大小等数据进行样式设置。
8	Progress bar 显示后端工作的进度。

描述

拖放功能是为使开发人员轻松工作而添加的强大功能之一。拖动操作基本上是在某些UI元素上的点击手势，同时按住鼠标按钮并移动鼠标。在拖动操作后释放鼠标按钮时，会发生放置操作。

句法

将类拖放到可拖动目标。

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

添加拖放目标类到drappable目标

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

例子

下面是一个简单的例子

<!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="external nofollow" target="_blank"  rel="external nofollow" target="_blank"  rel="external nofollow" target="_blank"  rel="external nofollow" target="_blank"  rel="external nofollow" target="_blank"  rel="stylesheet" />
   <script type="text/javascript" src="/attachements/w3c/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的拖放的帮助下，我们可以将数据从网格移动到网格和网格到窗体。下面是在网格和窗体之间移动数据的例子。

Drag and drop - Grid to Grid.

drag and drop - Grid to Form

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="external nofollow" target="_blank"  rel="external nofollow" target="_blank"  rel="external nofollow" target="_blank"  rel="external nofollow" target="_blank"  rel="external nofollow" target="_blank"  rel="stylesheet" />
      <script type="text/javascript" src="/attachements/w3c/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="external nofollow" target="_blank"  rel="external nofollow" target="_blank"  rel="stylesheet" />
      <script type="text/javascript" src="/attachements/w3c/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>

这会产生以下结果:

Triton主题

考虑你最初的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="external nofollow" target="_blank"  rel="stylesheet" />
      <script type="text/javascript" src="/attachements/w3c/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="external nofollow" target="_blank"  rel="stylesheet" />
      <script type="text/javascript" src="/attachements/w3c/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>

这会产生以下结果:

事件是在类发生的时候触发的。例如，当一个按钮被点击或元素被渲染之前/之后。

写事件的方法:

Built in events using listeners
Attaching events later
Custom events

内置事件使用侦听器

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

在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="external nofollow" target="_blank"  rel="external nofollow" target="_blank"  rel="external nofollow" target="_blank"  rel="external nofollow" target="_blank"  rel="external nofollow" target="_blank"  rel="stylesheet" />
      <script type="text/javascript" src="/attachements/w3c/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属性中写多个事件。

同一个侦听器中的多个事件

<!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="external nofollow" target="_blank"  rel="external nofollow" target="_blank"  rel="external nofollow" target="_blank"  rel="external nofollow" target="_blank"  rel="external nofollow" target="_blank"  rel="stylesheet" />
      <script type="text/javascript" src="/attachements/w3c/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>

稍后再附加事件

在前面的写事件的方法中，我们在创建元素时在侦听器中写入事件。

其他方式是附加事件在as:

<!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="external nofollow" target="_blank"  rel="external nofollow" target="_blank"  rel="external nofollow" target="_blank"  rel="external nofollow" target="_blank"  rel="external nofollow" target="_blank"  rel="stylesheet" />
      <script type="text/javascript" src="/attachements/w3c/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="external nofollow" target="_blank"  rel="external nofollow" target="_blank"  rel="external nofollow" target="_blank"  rel="external nofollow" target="_blank"  rel="external nofollow" target="_blank"  rel="stylesheet" />
      <script type="text/javascript" src="/attachements/w3c/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中编写事件的三种方式。

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

数据包有许多类，但最重要的类是:

Modal
Store
Proxy

模型:

modal的基类是Ext.data.Model.It表示应用程序中的一个实体。它将存储数据绑定到视图。它有后端数据对象到视图dataIndex的映射。在store的帮助下获取数据。

创建模型:

为了创建一个模型，我们需要扩展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从数据库获取的静态或动态数据。

商店:

存储的基类是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获取数据。

代理:

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

有两种类型的代理:

Client Proxy
Server 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'
      },
   }
});

描述

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

Font-Awesome

2. Font-Pictos

Font-Awesome

ExtJS的新主题Triton有内置的字体家族字体awesome包含在框架本身，所以我们不需要任何明确的要求的字体真棒样式表。

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

Font-Awesome with Triton theme

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

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

Font-Awesome with normal theme(Any theme other then Triton theme)

Font-Pictos

Font-pictos不包括在EXTJS的框架中，所以我们必须首先要求它，只有sencha的许可用户才能使用font-pictos。

添加字体pictos的步骤

1.需要font-pictos类:

"requires": ["font-pictos"]

2.现在将pictos类添加为:

iconCls: 'pictos pictos-home'

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

它使用SCSS的样式。 SCSS是编写CSS代码的更动态的方式。我们可以在这个帮助下在我们的样式表中写入变量。但是浏览器不能理解SCSS它只能理解CSS，所以所有的SCSS文件应该被编译成CSS生产就绪代码。

这就是为什么SCSS文件被称为预处理器文件。在Extjs中，编译通过Sencha CMD工具完成。

Sencha CMD手动编译它一次使用命令如下:

sencha应用程序构建[开发]

全局CSS是主要的CSS文件，它具有所有的SCSS变量与ExtJS相关联，我们可以在我们的应用程序中使用它来定制我们的主题，根据我们的需要提供不同的价值。

以下是Extjs中的Global_CSS中提供的一些CSS变量:

S.N.	变量＆amp; 描述
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元素的背景颜色。如果设置为transparent或\'none\'，将不会在body元素上设置背景颜色样式
4	$ color $ color:color（例如$ color:＃808080）要在整个主题中使用的默认文本颜色
5	$ font-family $ font-family:string（例如$ font-family:arial）在整个主题中使用的默认font-family。
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:string / number（例如$ font-weight-bold:bold）粗体字体的默认字体粗细在整个主题中使用
9	$ include-chrome $ include-chrome:boolean（例如$ include-chrome:true） True以包含Chrome特定规则
10	$ include-ff $ include-ff:boolean（例如$ include-ff:true） True包含Firefox特定规则
11	$ include-ie $ include-ie:boolean（例如$ include-ie:true） True包括IE9和更低版本的Internet Explorer特定规则
12	$ include-opera $ include-opera:boolean（例如$ include-opera:true） True包含Opera特定规则
13	$ include-safari $ include-safari:boolean（例如$ include-safari:true） True包含Opera特定规则
14	$ include-webkit $ include-webkit:boolean（例如$ include-webkit:true） True包括Webkit特定的规则

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

S.N.	画画
1	Circle 此图形用于创建圆形。
2	Rectangle 此图形用于创建矩形形状。
3	Arc 此图形用于创建弧形。
4	Ellipse 此图形用于创建椭圆形状。
5	EllipticalArc 此图形用于创建椭圆弧形。
6	Image 此图形用于向应用程序添加图像。
7	Path 此图形用于创建自由路径。
8	Text 此图形用于向应用程序添加任何文本。
9	Translate after render 此属性用于在呈现图形后在容器中移动起点。它可以与任何图形一起使用。
10	Rotation 此属性用于向添加的图形添加旋转。它可以与任何图形一起使用。
11	Square 此图形用于创建正方形。

最好用他们理解和喜欢的语言来沟通用户。 Extjs本地化包支持超过40种语言，如德语，法语，韩语，中文等。
在ExtJs中实现区域设置非常简单。您将在ext-locale软件包的覆盖文件夹中找到所有捆绑的区域设置文件。语言环境文件只是覆盖，它指示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="external nofollow" target="_blank"  rel="external nofollow" target="_blank"  rel="external nofollow" target="_blank"  rel="external nofollow" target="_blank"  rel="external nofollow" target="_blank"  rel="stylesheet" />
      <script type="text/javascript" src="/attachements/w3c/ext-all.js"></script>
      <script type="text/javascript" src="/attachements/w3c/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/locale-fr .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="external nofollow" target="_blank"  rel="external nofollow" target="_blank"  rel="external nofollow" target="_blank"  rel="external nofollow" target="_blank"  rel="external nofollow" target="_blank"  rel="stylesheet" />
      <script type="text/javascript" src="/attachements/w3c/ext-all.js"></script>
      <script type="text/javascript" src="/attachements/w3c/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。

语言环境	语言	区域设置URL
ko	Korean	https://cdnjs.cloudflare.com/ajax/libs/extjs/6.0.0/classic/locale/locale-ko.js
fr	French	https://cdnjs.cloudflare.com/ajax/libs/extjs/6.0.0/classic/locale/locale-fa.js
es	Spanish	https://cdnjs.cloudflare.com/ajax/libs/extjs/6.0.0/classic/locale/locale-es.js
ja	Japanese	https://cdnjs.cloudflare.com/ajax/libs/extjs/6.0.0/classic/locale/locale-ja.js
it	Italian	https://cdnjs.cloudflare.com/ajax/libs/extjs/6.0.0/classic/locale/locale-it.js
ru	Russian	https://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/locale-zh_CN.js

什么是辅助功能？

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

在软件术语中，应用程序可访问意味着应用程序可用于所有人。这里所指的是残疾人，视障者一次或使用屏幕阅读器的人，使用计算机或那些喜欢用键盘而不是使用鼠标的所有导航。

可访问的应用程序称为ARIA（可访问富互联网应用程序）。

Ext JS中的辅助功能:

Ext JS旨在牢记这一点，它应该与所有键盘导航工作。它已内置标签索引和聚焦能力，它始终是默认开启，所以我们不需要添加任何属性来启用此功能。

此功能允许所有键盘启用的组件在标签页插入时与用户交互。像我们可以使用tab移动到下一个组件，而不是鼠标移动该组件。同样，我们可以移动+标签向后移动，然后输入键盘进行点击等。

焦点样式和选项卡:

当使用击键进行制表时，Focus将内置在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="external nofollow" target="_blank"  rel="external nofollow" target="_blank"  rel="stylesheet" />
      <script type="text/javascript" src="/attachements/w3c/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>

要查看效果使用标签从下一个按钮和Shift +选项卡向后移动使用输入并看到焦点按钮的相关警报将弹出

ARIA主题:

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

这里的例子显示的咏叹调话题更容易为视障者。

下面的示例显示了Aria主题:

<!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="external nofollow" target="_blank"  rel="stylesheet" />
      <script type="text/javascript" src="/attachements/w3c/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>

这将产生以下结果，您可以使用选项卡和鼠标上下键移动焦点在网格上，主题是基本为视障人士。

这是ExtJS内置主题和聚焦的方式，使任何人都可以轻松访问。

任何JavaScript代码都可以使用alert（）框或console.log（）或调试器中的调试指针进行调试。

警告框:

请在要检查流或任何变量值的代码中放置一个警告框。
例如alert（\'message to show\'+ variable）;
开发/调试工具:
Debugger is the most important tool for any developer to check the issue and error in the code while developing.

Ext JS是一个JavaScript框架，因此可以使用由不同浏览器提供或特定的开发工具轻松调试。

所有主要浏览器都有他们的开发工具可用于测试和调试JavaScript代码。

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

Chrome调试器自带的Chrome浏览器，但firebug必须专门安装，因为它不是作为一个包与firefox。

以下是为Firefox浏览器安装firebug的链接 http: //getfirebug.com

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

如何在调试器中调试JS代码:

调试JavaScript代码有两种方法

Placing console.log() in the code and see the value of the log which will be printed in the console of development tool.
Using breakpoints in development tool:

Open the file in among all the available scripts under script tag
Now place a breakpoint to the line you want to debug
Run the application in browser
Now whenever the code flow will reach to this line it will break the code and stay there until user run the code by keys F6(go to next line of code), F7(go inside the function) or F8(go to the next breakpoint or run the code if there is no more breakpoints) based on flow you want to debug.
You can select the variable or the function you want to see the value of.
You can use console to check the value or to check some changes in browser itself.

下面是几个内置函数，主要在Ext JS中使用:

Ext.is类:

此类检查您使用的平台，无论是手机还是桌面，Mac或Windows操作系统。
这些是与Ext.is类相关的以下方法

S.N.	方法＆amp; 描述
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.Phone 这个函数将返回true如果你使用iPhone的else它返回false。
6	Ext.is.Pod 如果你使用iPod，这个函数将返回true否则返回false。
7	Ext.is.iPad 这个函数将返回true如果你使用iPad的else返回false。
8	Ext.is.Windows 这个函数将返回true，如果你使用windows操作系统，否则返回false。
9	Ext.is.Linux 这个函数将返回true，如果你使用的是linux操作系统，否则返回false。
10	Ext.is.Blackberry 如果你使用Blackberry，这个函数将返回true，否则返回false。
11	Ext.is.Mac 这个函数将返回true，如果你使用的是mac操作系统，否则返回false。

Ext.supports类:

因为名称表示这个类提供关于浏览器/设备支持的功能的信息，基本上是当前环境。

S.N.	S.N.
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＆amp;＆amp; !! doc.createElementNS（“http:/"+“/www.w3.org/2000/svg"，“svg"）。createSVGRect。
4	Ext.supports.Canvas 这个返回的布尔值基于设备支持的HTML 5功能canvas是否绘制方法。在内部它检查doc.createElement（\'canvas\'）。getContext并基于此方法的输出返回值。
5	Ext.supports.Range 这个返回的布尔值是基于浏览器支持的document.createRange方法还是不行。

Ext.String类:

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

编码解码函数:这些是Ext.String类中可用的函数，用于编码和解码HTML值。

S.N.	S.N.
1	Ext.String.htmlEncode 此函数用于编码html值以使其可解析。 E.g. Ext.String.htmlEncode("< p > Hello World < /p >"); Output - "< p > Hello World < /p >".
2	Ext.String.htmlDecode 此函数用于解码编码的html值 E.g. Ext.String.htmlDecode("< p > Hello World < /p >"); Output - "< p > Hello World < /p &gt"
3	Ext.String.trim 此函数用于删除字符串中不需要的空格。例如。 Ext.String.trim（\'hello\'）; 输出 - “hello"
4	Ext.String.urlAppend 此方法用于在URL字符串中附加值例如。 Ext.String.urlAppend（\'https://www.google.com\'，\'hello\'）; 输出 - “https://www.google.com?hello" Ext.String.urlAppend（\'https://www.google.com?index=1\'，\'hello\'）; 输出 - “https://www.google.com?index=1&hello"
5	Ext.String.toggle 此函数用于在两个不同的值之间切换值。例如。 var toggleString =\'ASC\' toggleString = Ext.String.toggle（a，\'ASC\'，\'DESC\'）; 输出 - DESC作为toggleString具有值ASC。现在再次如果我们打印相同，我们将获得toggleString =“ASC"这一次，因为它的值\'DESC\'。它类似于三元运算符 toggleString =（（toggleString ==\'ASC\'）？\'DESC\':\'ASC\'）;

其他方法

S.N.

Ext.userAgent（）

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

例如。如果你在Mozilla工作，它会返回一些东西像:“mozilla / 5.0（windows nt 6.1; wow64; rv:43.0）gecko / 20100101 firefox / 43.0"

版本相关功能

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

例如。如果我们使用firefox浏览器，我们调用方法Ext.ieVersion获取版本的IE，那么它返回0或者如果我们在IE浏览器中使用相同的方法，那么它将返回我们使用的版本，如8,9等。

Ext.getVersion（）

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

例如。如果我们调用Ext.getVersion（），它返回一个值的数组，如版本，短版本等。

Ext.getVersion（）。version返回程序中使用的Ext JS的当前版本，例如“4.2.2"。

浏览器相关功能

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

例如。如果我们使用Chrome浏览器，那么Ext.isChrome函数将返回true，其他的都会返回false。

Ext.typeOf（）

此函数返回变量的数据类型，例如

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

DataType相关方法:这些函数根据变量的数据类型返回布尔值。

E.g. 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);	// return true
Ext.isNumber(c);	// return true
Ext.isEmpty(emptyVariable);	// return true
Ext.isEmpty(b);	// return false
Ext.isDefined(definedVariable);	// return true
Ext.isfunction(extraFunction);	// return true

以上内容是否对您有帮助：

写笔记

我要补充

Ext.js快速指南

基本介绍

听众

先决条件

什么是Ext JS

历史

Ext JS 1.1

Ext JS 2.0

Ext JS 3.0

Ext JS 4.0

Ext JS 5.0

Ext JS 6.0

特征

好处

限制

工具

Sencha Cmd

Sencha IDE插件

Sencha检查员

尝试在线选项

本地环境设置

正在下载库文件

CDN设置

热门编辑

浏览器

项目结构使用Ext JS应用程序

怎么运行的

步骤1

Explanation

第2步

容器

描述

句法

例子

海王星主题

酥脆主题

Triton主题

灰色主题

写事件的方法:

内置事件使用侦听器

稍后再附加事件

自定义事件

模型:

创建模型:

商店:

静态存储:

动态存储:

代理:

客户端代理

服务器代理

Defining proxies in the server:

描述

Font-Awesome

Font-Pictos

什么是辅助功能？

Ext JS中的辅助功能:

焦点样式和选项卡:

ARIA主题:

如何在调试器中调试JS代码:

推荐文章

推荐教程

推荐课程