閱讀(8.5k) 書簽贊(0) 我要糾錯

Ext.js快速指南

2018-12-28 10:12 更新

基本介紹

Ext JS代表擴(kuò)展JavaScript，是基于YUI（Yahoo用戶界面）的sencha的JavaScript框架和產(chǎn)品。它基本上是一個具有現(xiàn)代UI的桌面應(yīng)用程序開發(fā)平臺。
本教程完全理解Ext JS。這個參考將帶你通過簡單和實用的方法，同時學(xué)習(xí)Ext JS。

聽眾

本教程為初學(xué)者準(zhǔn)備，幫助他們了解Ext JS的概念，以構(gòu)建動態(tài)Web UI。

先決條件

對于本教程，讀者應(yīng)該具有HTML，CSS和JavaScript編碼的先驗知識。如果讀者知道面向?qū)ο缶幊痰母拍畈⑶揖哂袆?chuàng)建web應(yīng)用程序的一般想法將是有幫助的。

什么是Ext JS

Ext JS是一個流行的JavaScript框架，它為使用跨瀏覽器功能構(gòu)建Web應(yīng)用程序提供了豐富的UI。 Ext JS基本上用于創(chuàng)建桌面應(yīng)用程序它支持所有現(xiàn)代瀏覽器，如IE6 +，F(xiàn)F，Chrome，safari 6+，歌劇12+等。而sencha，sencha touch的另一個產(chǎn)品用于移動應(yīng)用程序。

Ext JS基于MVC / MVVM架構(gòu)。最新版本的Ext JS 6是一個單一的平臺，可以用于桌面和移動應(yīng)用程序，而不需要為不同的平臺提供不同的代碼。

歷史

Ext JS 1.1

Ext JS的第一個版本是由Jack Slocum在2006年開發(fā)的。它是一組實用程序類，它是YUI的擴(kuò)展。他將該庫命名為YUI-ext。

Ext JS 2.0

Ext JS 2.0版于2007年發(fā)布。此版本具有用于桌面應(yīng)用程序的新API文檔，但功能有限。此版本與以前版本的Ext JS沒有向后兼容性。

Ext JS 3.0

Ext JS版本3.0是在2009年發(fā)布的。這個版本添加了新的功能作為圖表和列表視圖，但是以速度為代價。它向后兼容2.0版本。

Ext JS 4.0

Ext JS 3發(fā)布后，Ext JS的開發(fā)人員面臨著提高速度的主要挑戰(zhàn)。 Ext JS 4.0版本發(fā)布于2011年。它具有完整的修訂結(jié)構(gòu)，其后是MVC架構(gòu)和一個快速的應(yīng)用程序。

Ext JS 5.0

Ext JS版本5.0是在2014年發(fā)布的。這個版本的主要變化是將MVC架構(gòu)改為MVVM架構(gòu)。它包括在啟用觸摸的設(shè)備上構(gòu)建桌面應(yīng)用程序的功能，雙向數(shù)據(jù)綁定，響應(yīng)式布局和更多功能。

Ext JS 6.0

Ext JS 6合并了Ext JS（用于桌面應(yīng)用程序）和sencha touch（用于移動應(yīng)用程序）框架。

特征

這些是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是業(yè)務(wù)級Web應(yīng)用程序開發(fā)的領(lǐng)先標(biāo)準(zhǔn)。 Ext JS提供了為桌面和平板電腦構(gòu)建強(qiáng)大應(yīng)用程序所需的工具。

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應(yīng)用程序開發(fā)的工具，主要用于生產(chǎn)級別。

Sencha Cmd

Sencha CMD是一個提供Ext JS代碼縮小，腳手架，生產(chǎn)構(gòu)建生成功能的工具。

Sencha IDE插件

Sencha IDE插件，它將Sencha框架集成到IntelliJ，WebStorm IDE中。這有助于通過提供代碼完成，代碼檢查，代碼導(dǎo)航，代碼生成，代碼重構(gòu)，模板創(chuàng)建和拼寫檢查等功能來提高開發(fā)人員的生產(chǎn)力。

Sencha檢查員

Sencha Inspector是一個調(diào)試工具，幫助調(diào)試器調(diào)試任何問題，同時開發(fā)。

嘗試在線選項

我們已經(jīng)在線設(shè)置了ExtJS編程環(huán)境，以便您可以在線編譯和執(zhí)行所有可用的示例。它給你對你正在閱讀的信心，并使您能夠使用不同的選項驗證程序。隨意修改任何示例并在線執(zhí)行。

請嘗試以下示例，使用下面示例代碼框右上角的 Try it 選項:
<!DOCTYPE html>
<html>
   <head>
      <link  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>
對于本教程中給出的大多數(shù)示例，您將在我們的網(wǎng)站代碼部分的右上角找到一個Try it選項，將您帶到在線編譯器。所以只是利用它，享受你的學(xué)習(xí)。

本地環(huán)境設(shè)置

本節(jié)將指導(dǎo)您如何在機(jī)器上下載和設(shè)置Ext JS。請按照步驟設(shè)置環(huán)境。

正在下載庫文件

從sencha https://www.sencha.com下載Ext JS庫文件的試用版本。您將從您的注冊郵件ID上的網(wǎng)站獲取試用版，這將是一個名為ext-6.0.1-trial的壓縮文件夾。

解壓縮文件夾，你會發(fā)現(xiàn)各種JavaScript和CSS文件，你將包括在我們的應(yīng)用程序。我們將主要包括以下文件:

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

文件和描述
ext.js 這是核心文件，其中包含運(yùn)行應(yīng)用程序的所有功能。
ext-all.js 此文件包含在文件中沒有注釋的所有縮小的代碼
ext-all-debug.js 這是ext-all.js的未分級版本，用于調(diào)試目的。
ext-all-dev.js 此文件也未分級，用于開發(fā)目的，因為它包含所有注釋和控制臺日志，以檢查任何錯誤/問題
ext-all.js 這個文件用于生產(chǎn)目的，主要是因為它比任何其他小得多。

您可以將這些文件添加到您的項目JS文件夾，或者您可以給出文件駐留在系統(tǒng)中的直接路徑。

（2）CSS文件有多個基于主題的文件，您可以在文件夾\\ ext-6.0.1-trial \\ ext-6.0.1 \\ build \\ classic \\ theme-classic \\ resources \\ theme-classic-all.css

如果我們要使用桌面應(yīng)用程序，那么我們可以使用文件夾\\ ext-6.0.1-trial \\ ext-6.0.1 \\ build \\ classic下的經(jīng)典主題
如果我們要使用移動應(yīng)用程序，那么我們將使用現(xiàn)代主題，可以在文件夾\\ ext-6.0.1-trial \\ ext-6.0.1 \\ build \\ modern下找到

這些庫文件將添加到Ext JS應(yīng)用程序中，如下所示:

<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應(yīng)用程序代碼。

CDN設(shè)置

CDN是內(nèi)容交付網(wǎng)絡(luò)，您不需要下載Ext JS庫文件，您可以直接添加ExtJS的CDN鏈接到您的程序，如下所示:

<html>
   <head>
      <link rel = "stylesheet" type ="text/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

您可以使用任何瀏覽器運(yùn)行Ext JS應(yīng)用程序。

命名約定是標(biāo)識符要遵循的一組規(guī)則。

它使得代碼對于其他程序員也更可讀和可理解。

Ext JS中的命名約定遵循標(biāo)準(zhǔn)JavaScript約定，這不是強(qiáng)制性的，而是遵循的良好做法。

它應(yīng)該遵循camel case語法命名類，方法，變量和屬性。

如果name與兩個單詞組合，則第二個單詞將始終以大寫字母開頭。 doLayout（），StudentForm，firstName等。

名稱	慣例
班級名稱	它應(yīng)該以大寫字母開頭，然后是駝峰盒。 StudentClass
方法名稱	它應(yīng)該以小寫字母開頭，然后是駝峰盒。 doLayout（）
變量名	它應(yīng)該以小寫字母開頭，然后是駝峰盒。名字
常量名稱	它應(yīng)該是大寫只有例如。 COUNT，MAX_VALUE
屬性名稱	它應(yīng)該以小寫字母開頭，然后是駝峰。 enableColumnResize = true

Ext JS遵循MVC / MVVM架構(gòu)。

MVC - 模型視圖控制器體系結(jié)構(gòu)（版本4）

MVVM - 模型視圖Viewmodel（版本5）

這種架構(gòu)不是程序的強(qiáng)制性，但最好的做法是遵循這種結(jié)構(gòu)，使您的代碼高度可維護(hù)和組織。

項目結(jié)構(gòu)使用Ext JS應(yīng)用程序

----------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應(yīng)用程序文件夾將駐留在您的項目的JavaScript文件夾中。

應(yīng)用程序?qū)刂破?，視圖，模型，存儲，實用程序文件與app.js.

app.js:程式流程開始的主要檔案，應(yīng)該使用＆lt; script＆gt; 標(biāo)簽。應(yīng)用程序調(diào)用應(yīng)用程序的控制器的其余功能。

Controller.js:它是Ext JS MVC架構(gòu)的控制器文件。這包含應(yīng)用程序的所有控制，事件偵聽器的最大功能的代碼。它具有為該應(yīng)用程序中使用的所有其他文件定義的路徑，例如store，view，model，require，mixins。

View.js:它包含應(yīng)用程序的界面部分，顯示給用戶。 Ext JS使用各種UI豐富的視圖，可以根據(jù)需要在這里擴(kuò)展和自定義。

Store.js:它包含本地緩存的數(shù)據(jù)，它將在模型對象的幫助下在視圖上呈現(xiàn)。存儲使用代理獲取數(shù)據(jù)，代理具有為服務(wù)定義的路徑以獲取后端數(shù)據(jù)。

Model.js:它包含綁定要查看的商店數(shù)據(jù)的對象。它有后端數(shù)據(jù)對象到視圖dataIndex的映射。在store的幫助下獲取數(shù)據(jù)。

Utils.js:它不包括在MVC架構(gòu)中，但是最好的做法是使代碼清晰，不太復(fù)雜，更加可讀。我們可以在這個文件中編寫方法，并在控制器或視圖渲染器中調(diào)用它們。這對代碼可重用性目的也很有幫助。

在MVVM架構(gòu)中，控制器被ViewModel替代。

ViewModel:它基本上是藥物視圖和模型之間的變化。它將數(shù)據(jù)從模型綁定到視圖。同時它沒有與視圖的任何直接交互它只有模型的知識。

怎么運(yùn)行的

例如，如果我們在UI中的兩三個地方使用一個模型對象，如果我們在UI的一個地方更改值，我們可以看到，甚至沒有保存更改模型更改的值，因此反映在UI中的所有地方在哪里使用模型。

它使開發(fā)人員更加輕松和簡單，因為不需要額外的編碼綁定數(shù)據(jù)。

本章列出了在Ext JS中首先編寫Hello World程序的步驟:

步驟1

在我們選擇的編輯器中創(chuàng)建index.htm頁面。將所需的庫文件包含在html頁面的head部分，如下所述:

index.htm

<!DOCTYPE html>
<html>
   <head>
      <link  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準(zhǔn)備好渲染Ext JS元素時調(diào)用。
Ext.create（）方法用于在Ext JS中創(chuàng)建對象，這里我們創(chuàng)建一個簡單的面板類Ext.Panel的對象。
Ext.Panel是Ext JS中用于創(chuàng)建面板的預(yù)定義類。
每個Ext JS類都有不同的屬性來執(zhí)行一些基本的功能。

Ext.Panel類有以下各種屬性:

renderTo 是此面板必須呈現(xiàn)的元素。 \'helloWorldPanel\'是Index.html文件中的div id。
高度和寬度屬性用于提供面板的自定義尺寸。
標(biāo)題屬性是為面板提供標(biāo)題。
Html 屬性是要在面板中顯示的html內(nèi)容。

第2步

在標(biāo)準(zhǔn)瀏覽器中打開index.htm文件，您將在瀏覽器上獲得以下輸出。

Ext JS是一個JavaScript框架，它具有面向?qū)ο缶幊痰墓δ堋?/span>
Ext是封裝Ext JS中所有類的命名空間。

在Ext JS中定義類

Ext提供了300多個類，我們可以用于各種功能。

Ext.define（）用于在Ext JS中定義類。

語法:

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

類名稱是根據(jù)應(yīng)用程序結(jié)構(gòu)的類名稱。 appName.folderName.ClassName
studentApp.view.StudentView。

類屬性/成員 - 定義類的行為。

回調(diào)函數(shù)是可選的。當(dāng)類正確加載時，會調(diào)用它。

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'
   }]
});

創(chuàng)建對象

像其他基于OOPS的語言一樣，我們也可以在Ext JS中創(chuàng)建對象。

不同的方式創(chuàng)建對象在Ext JS-

使用new關(guān)鍵字:

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是在沒有擴(kuò)展的情況下在類B中使用類A的不同方式。

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

Mixins我們添加在控制器中，我們聲明所有其他類，如存儲，視圖等。在這種方式，我們可以調(diào)用DepartmentUtils類，并在控制器或在這個應(yīng)用程序中使用其功能。

容器

Ext JS中的容器是我們可以添加其他容器或子組件的組件。
這些容器可以具有多個布局以將部件布置在容器中。
我們可以從容器和其子元素添加或刪除組件。
Ext.container.Container是Ext JS中所有容器的基類。

S.N.	描述
1	Components inside Container 此示例顯示如何在容器內(nèi)定義組件
2	Container inside container 此示例顯示如何使用其他組件定義容器內(nèi)的容器

有各種類型的容器Ext.panel.Panel，Ext.form.Panel，Ext.tab.Panel和Ext.container.Viewport是Ext JS中經(jīng)常使用的容器。下面是顯示如何使用這些容器的示例。

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坐標(biāo)定位項目。
2	Accordion 此布局允許將所有項目以堆棧方式（一個在另一個之上）放在容器內(nèi)。
3	Anchor 此布局為用戶提供了相對于容器大小給出每個元素的大小的特權(quán)。
4	Border 在此布局中，各種面板嵌套并由邊界分隔。
5	Auto 這是默認(rèn)布局決定元素的布局，基于元素的數(shù)量。
6	Card(TabPanel) 此布局以制表符方式排列不同的組件。選項卡將顯示在容器的頂部。每次只有一個選項卡可見，每個選項卡被視為不同的組件。
7	Card(Wizard) 在這個布局中，每次元素來到完整的容器空間。向?qū)е袑⒂幸粋€底部工具欄用于導(dǎo)航。
8	Column 此布局是要在容器中顯示多個列。我們可以定義列的固定寬度或百分比寬度。百分比寬度將基于容器的完整大小計算。
9	Fit 在此布局中，容器用單個面板填充，并且當(dāng)沒有與布局相關(guān)的特定要求時，則使用該布局。
10	Table 由于名稱意味著此布局以HTML表格式在容器中排列組件。
11	vBox 這種布局允許元素以垂直方式分布。這是最常用的布局之一。
12	hBox 這種布局允許元素以水平方式分布。

ExtJS UI由一個或多個名為Components.Ext的widget組成.JS具有定義的各種UI組件，可以根據(jù)您的要求進(jìn)行定制。

S.N.	方法＆amp; 描述
1	Grid 網(wǎng)格組件可用于以表格格式顯示數(shù)據(jù)。
2	Form 窗體小部件是從用戶獲取數(shù)據(jù)。
3	Message Box 消息框基本上用于以警報框的形式顯示數(shù)據(jù)。
4	Chart 圖表用于以圖形格式表示數(shù)據(jù)。
5	Tool tip 任何事件發(fā)生時，工具提示用于顯示一些基本信息。
6	Window 這個UI部件是創(chuàng)建一個窗口，當(dāng)任何事件發(fā)生時應(yīng)該彈出。
7	HTML editor HTML編輯器是非常有用的UI組件之一，用于對用戶輸入的字體，顏色，大小等數(shù)據(jù)進(jìn)行樣式設(shè)置。
8	Progress bar 顯示后端工作的進(jìn)度。

描述

拖放功能是為使開發(fā)人員輕松工作而添加的強(qiáng)大功能之一。拖動操作基本上是在某些UI元素上的點擊手勢，同時按住鼠標(biāo)按鈕并移動鼠標(biāo)。在拖動操作后釋放鼠標(biāo)按鈕時，會發(fā)生放置操作。

句法

將類拖放到可拖動目標(biāo)。

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

添加拖放目標(biāo)類到drappable目標(biāo)

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

例子

下面是一個簡單的例子

<!DOCTYPE html>
<html>
<head>
   <link  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>

這將產(chǎn)生以下結(jié)果 -

在Extjs的拖放的幫助下，我們可以將數(shù)據(jù)從網(wǎng)格移動到網(wǎng)格和網(wǎng)格到窗體。下面是在網(wǎng)格和窗體之間移動數(shù)據(jù)的例子。

Drag and drop - Grid to Grid.

drag and drop - Grid to Form

Ext.js提供了許多要在您的應(yīng)用程序中使用的主題。你可以添加不同的主題的經(jīng)典主題，看到輸出的差異，這是簡單地通過替換主題CSS文件，如下所述。

海王星主題

考慮你最初的Hello World應(yīng)用程序。從應(yīng)用程序中刪除以下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  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>

這會產(chǎn)生以下結(jié)果:

酥脆主題

考慮你最初的Hello World應(yīng)用程序。從應(yīng)用程序中刪除以下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  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>

這會產(chǎn)生以下結(jié)果:

Triton主題

考慮你最初的Hello World應(yīng)用程序。從應(yīng)用程序中刪除以下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  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>

這會產(chǎn)生以下結(jié)果:

灰色主題

考慮你最初的Hello World應(yīng)用程序。從應(yīng)用程序中刪除以下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  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>

這會產(chǎn)生以下結(jié)果:

事件是在類發(fā)生的時候觸發(fā)的。例如，當(dāng)一個按鈕被點擊或元素被渲染之前/之后。

寫事件的方法:

Built in events using listeners
Attaching events later
Custom events

內(nèi)置事件使用偵聽器

Ext JS提供了用于在Ext JS文件中編寫事件和自定義事件的偵聽器屬性。

在Ext JS中編寫偵聽器

我們將通過在面板中添加listen屬性來將監(jiān)聽器添加到上一個程序中，如下所示:

<!DOCTYPE html>
<html>
   <head>
      <link  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>

這會產(chǎn)生以下結(jié)果:

這樣我們可以在listeners屬性中寫多個事件。

同一個偵聽器中的多個事件

<!DOCTYPE html>
<html>
   <head>
      <link  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>

稍后再附加事件

在前面的寫事件的方法中，我們在創(chuàng)建元素時在偵聽器中寫入事件。

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

<!DOCTYPE html>
<html>
   <head>
      <link  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方法觸發(fā)事件，下面的示例解釋了如何編寫自定義事件。

<!DOCTYPE html>
<html>
   <head>
      <link  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>

一旦頁面被加載并且文檔準(zhǔn)備就緒，UI頁面與按鈕將出現(xiàn)，并且我們在5秒后觸發(fā)事件文檔準(zhǔn)備就緒，警報框?qū)⒃?秒后出現(xiàn)。

這里我們寫了自定義事件\'myEvent\'，我們將事件觸發(fā)為button.fireEvent（eventName）;

這些是在Ext JS中編寫事件的三種方式。

數(shù)據(jù)包用于加載和保存應(yīng)用程序中的所有數(shù)據(jù)。

數(shù)據(jù)包有許多類，但最重要的類是:

Modal
Store
Proxy

模型:

modal的基類是Ext.data.Model.It表示應(yīng)用程序中的一個實體。它將存儲數(shù)據(jù)綁定到視圖。它有后端數(shù)據(jù)對象到視圖dataIndex的映射。在store的幫助下獲取數(shù)據(jù)。

創(chuàng)建模型:

為了創(chuàng)建一個模型，我們需要擴(kuò)展Ext.data.Model類，我們需要定義字段的名稱和映射。

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

這里的名稱應(yīng)該與我們在視圖中聲明的dataIndex相同，并且映射應(yīng)該匹配使用store從數(shù)據(jù)庫獲取的靜態(tài)或動態(tài)數(shù)據(jù)。

商店:

存儲的基類是Ext.data.Store。它包含本地緩存的數(shù)據(jù)，該數(shù)據(jù)將在模型對象的幫助下在視圖上呈現(xiàn)。存儲使用代理獲取數(shù)據(jù)，代理具有為服務(wù)定義的路徑以獲取后端數(shù)據(jù)。

存儲數(shù)據(jù)可以從靜態(tài)或動態(tài)兩種方式獲取。

靜態(tài)存儲:

對于靜態(tài)存儲，我們將存儲在存儲中的所有數(shù)據(jù)如下:

   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" }
      ];
   });

動態(tài)存儲:

可以使用代理獲取動態(tài)數(shù)據(jù)。我們可以讓代理可以從Ajax，Rest和Json獲取數(shù)據(jù)。

代理:

代理的基類是Ext.data.proxy.Proxy。代理由模型和商店用于處理模型數(shù)據(jù)的加載和保存。

有兩種類型的代理:

Client Proxy
Server Proxy

客戶端代理

客戶端代理包括使用HTML5本地存儲的內(nèi)存和本地存儲。

服務(wù)器代理

服務(wù)器代理使用Ajax，Json數(shù)據(jù)和Rest服務(wù)處理來自遠(yuǎn)程服務(wù)器的數(shù)據(jù)。

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提供了使用不同字體包的功能。字體包用于為包中可用的圖標(biāo)添加不同的類。

Font-Awesome

2. Font-Pictos

Font-Awesome

ExtJS的新主題Triton有內(nèi)置的字體家族字體awesome包含在框架本身，所以我們不需要任何明確的要求的字體真棒樣式表。

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

Font-Awesome with Triton theme

當(dāng)我們使用除了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.現(xiàn)在將pictos類添加為:

iconCls: 'pictos pictos-home'

應(yīng)用程序樣式是指用戶調(diào)整組件的外觀和感覺。這些調(diào)整可能包括:顏色，顏色漸變，字體，邊距/填充等。Ext JS 6有一種新的應(yīng)用程序樣式。

它使用SCSS的樣式。 SCSS是編寫CSS代碼的更動態(tài)的方式。我們可以在這個幫助下在我們的樣式表中寫入變量。但是瀏覽器不能理解SCSS它只能理解CSS，所以所有的SCSS文件應(yīng)該被編譯成CSS生產(chǎn)就緒代碼。

這就是為什么SCSS文件被稱為預(yù)處理器文件。在Extjs中，編譯通過Sencha CMD工具完成。

Sencha CMD手動編譯它一次使用命令如下:

sencha應(yīng)用程序構(gòu)建[開發(fā)]

全局CSS是主要的CSS文件，它具有所有的SCSS變量與ExtJS相關(guān)聯(lián)，我們可以在我們的應(yīng)用程序中使用它來定制我們的主題，根據(jù)我們的需要提供不同的價值。

以下是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）應(yīng)用到body元素的背景顏色。如果設(shè)置為transparent或\'none\'，將不會在body元素上設(shè)置背景顏色樣式
4	$ color $ color:color（例如$ color:＃808080）要在整個主題中使用的默認(rèn)文本顏色
5	$ font-family $ font-family:string（例如$ font-family:arial）在整個主題中使用的默認(rèn)font-family。
6	$ font-size $ font-size:number（例如$ font-size:9px）要在整個主題中使用的默認(rèn)字體大小。
7	$ font-weight $ font-weight:string / number（例如$ font-weight:normal）在整個主題中使用的默認(rèn)字體權(quán)重
8	$ font-weight-bold $ font-weight-bold:string / number（例如$ font-weight-bold:bold）粗體字體的默認(rèn)字體粗細(xì)在整個主題中使用
9	$ include-chrome $ include-chrome:boolean（例如$ include-chrome:true） True以包含Chrome特定規(guī)則
10	$ include-ff $ include-ff:boolean（例如$ include-ff:true） True包含F(xiàn)irefox特定規(guī)則
11	$ include-ie $ include-ie:boolean（例如$ include-ie:true） True包括IE9和更低版本的Internet Explorer特定規(guī)則
12	$ include-opera $ include-opera:boolean（例如$ include-opera:true） True包含Opera特定規(guī)則
13	$ include-safari $ include-safari:boolean（例如$ include-safari:true） True包含Opera特定規(guī)則
14	$ include-webkit $ include-webkit:boolean（例如$ include-webkit:true） True包括Webkit特定的規(guī)則

ExtJS中的繪圖包使您能繪制通用圖形。這可以用于在所有瀏覽器和移動設(shè)備上工作的圖形。

S.N.	畫畫
1	Circle 此圖形用于創(chuàng)建圓形。
2	Rectangle 此圖形用于創(chuàng)建矩形形狀。
3	Arc 此圖形用于創(chuàng)建弧形。
4	Ellipse 此圖形用于創(chuàng)建橢圓形狀。
5	EllipticalArc 此圖形用于創(chuàng)建橢圓弧形。
6	Image 此圖形用于向應(yīng)用程序添加圖像。
7	Path 此圖形用于創(chuàng)建自由路徑。
8	Text 此圖形用于向應(yīng)用程序添加任何文本。
9	Translate after render 此屬性用于在呈現(xiàn)圖形后在容器中移動起點。它可以與任何圖形一起使用。
10	Rotation 此屬性用于向添加的圖形添加旋轉(zhuǎn)。它可以與任何圖形一起使用。
11	Square 此圖形用于創(chuàng)建正方形。

最好用他們理解和喜歡的語言來溝通用戶。 Extjs本地化包支持超過40種語言，如德語，法語，韓語，中文等。
? 在ExtJs中實現(xiàn)區(qū)域設(shè)置非常簡單。您將在ext-locale軟件包的覆蓋文件夾中找到所有捆綁的區(qū)域設(shè)置文件。語言環(huán)境文件只是覆蓋，它指示Ext JS替換某些組件的默認(rèn)英語值。

這個程序是要顯示不同區(qū)域設(shè)置的月份來看效果，試試下面的程序:

<!DOCTYPE html>
<html>
   <head>
      <link  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>

這會產(chǎn)生以下結(jié)果:

描述:

對于使用不同的語言環(huán)境，除了英語，我們需要在我們的程序中添加區(qū)域設(shè)置特定的文件，我們使用https://cdnjs.cloudflare.com/ajax/libs/extjs/6.0.0/classic/locale/locale-fr .js法語。您可以對不同的語言使用不同的區(qū)域設(shè)置，例如https://cdnjs.cloudflare.com/ajax/libs/extjs/6.0.0/classic/locale/locale-ko.js for korean等。

這個程序是顯示日期選擇器在韓國語區(qū)域查看效果，嘗試以下程序:

<!DOCTYPE html>
<html>
   <head>
      <link  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>

這會產(chǎn)生以下結(jié)果:

下面是ExtJS中可用的幾個區(qū)域設(shè)置和要更改的主文件區(qū)域設(shè)置URL。

語言環(huán)境	語言	區(qū)域設(shè)置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

什么是輔助功能？

一般來說，可訪問性意味著可用性，內(nèi)容可訪問意味著內(nèi)容可用。

在軟件術(shù)語中，應(yīng)用程序可訪問意味著應(yīng)用程序可用于所有人。這里所指的是殘疾人，視障者一次或使用屏幕閱讀器的人，使用計算機(jī)或那些喜歡用鍵盤而不是使用鼠標(biāo)的所有導(dǎo)航。

可訪問的應(yīng)用程序稱為ARIA（可訪問富互聯(lián)網(wǎng)應(yīng)用程序）。

Ext JS中的輔助功能:

Ext JS旨在牢記這一點，它應(yīng)該與所有鍵盤導(dǎo)航工作。它已內(nèi)置標(biāo)簽索引和聚焦能力，它始終是默認(rèn)開啟，所以我們不需要添加任何屬性來啟用此功能。

此功能允許所有鍵盤啟用的組件在標(biāo)簽頁插入時與用戶交互。像我們可以使用tab移動到下一個組件，而不是鼠標(biāo)移動該組件。同樣，我們可以移動+標(biāo)簽向后移動，然后輸入鍵盤進(jìn)行點擊等。

焦點樣式和選項卡:

當(dāng)使用擊鍵進(jìn)行制表時，F(xiàn)ocus將內(nèi)置在Extjs中。

下面的示例顯示了當(dāng)焦點隨著制表符改變時如何改變樣式。

<!DOCTYPE html>
<html>
   <head>
      <link  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>

要查看效果使用標(biāo)簽從下一個按鈕和Shift +選項卡向后移動使用輸入并看到焦點按鈕的相關(guān)警報將彈出

ARIA主題:

ExtJS為視障人士提供主題詠嘆調(diào)。

這里的例子顯示的詠嘆調(diào)話題更容易為視障者。

下面的示例顯示了Aria主題:

<!DOCTYPE html>
<html>
   <head>
      <link  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>

這將產(chǎn)生以下結(jié)果，您可以使用選項卡和鼠標(biāo)上下鍵移動焦點在網(wǎng)格上，主題是基本為視障人士。

這是ExtJS內(nèi)置主題和聚焦的方式，使任何人都可以輕松訪問。

任何JavaScript代碼都可以使用alert（）框或console.log（）或調(diào)試器中的調(diào)試指針進(jìn)行調(diào)試。

警告框:

請在要檢查流或任何變量值的代碼中放置一個警告框。
例如alert（\'message to show\'+ variable）;
開發(fā)/調(diào)試工具:
Debugger is the most important tool for any developer to check the issue and error in the code while developing.

Ext JS是一個JavaScript框架，因此可以使用由不同瀏覽器提供或特定的開發(fā)工具輕松調(diào)試。

所有主要瀏覽器都有他們的開發(fā)工具可用于測試和調(diào)試JavaScript代碼。

流行的調(diào)試器是IE的IE開發(fā)工具，firefox的firefox，Chrome瀏覽器的chrome開發(fā)工具。

Chrome調(diào)試器自帶的Chrome瀏覽器，但firebug必須專門安裝，因為它不是作為一個包與firefox。

以下是為Firefox瀏覽器安裝firebug的鏈接 http: //getfirebug.com

在Windows操作系統(tǒng)中打開開發(fā)工具的快捷鍵是F12鍵盤鍵。

如何在調(diào)試器中調(diào)試JS代碼:

調(diào)試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.

下面是幾個內(nèi)置函數(shù)，主要在Ext JS中使用:

Ext.is類:

此類檢查您使用的平臺，無論是手機(jī)還是桌面，Mac或Windows操作系統(tǒng)。
這些是與Ext.is類相關(guān)的以下方法

S.N.	方法＆amp; 描述
1	Ext.is.Platforms 此函數(shù)返回此版本可用的平臺。例如。當(dāng)你運(yùn)行下面的函數(shù)，它返回如下: [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操作系統(tǒng)，這個函數(shù)將返回true，否則返回false。
3	Ext.is.Desktop 如果您正在為應(yīng)用程序使用桌面，則此函數(shù)將返回true，否則返回false。
4	Ext.is.Phone 這個函數(shù)將返回true，如果你使用的是移動，否則返回false。
5	Ext.is.Phone 這個函數(shù)將返回true如果你使用iPhone的else它返回false。
6	Ext.is.Pod 如果你使用iPod，這個函數(shù)將返回true否則返回false。
7	Ext.is.iPad 這個函數(shù)將返回true如果你使用iPad的else返回false。
8	Ext.is.Windows 這個函數(shù)將返回true，如果你使用windows操作系統(tǒng)，否則返回false。
9	Ext.is.Linux 這個函數(shù)將返回true，如果你使用的是linux操作系統(tǒng)，否則返回false。
10	Ext.is.Blackberry 如果你使用Blackberry，這個函數(shù)將返回true，否則返回false。
11	Ext.is.Mac 這個函數(shù)將返回true，如果你使用的是mac操作系統(tǒng)，否則返回false。

Ext.supports類:

因為名稱表示這個類提供關(guān)于瀏覽器/設(shè)備支持的功能的信息，基本上是當(dāng)前環(huán)境。

S.N.	S.N.
1	Ext.supports.History 這返回基于布爾值的設(shè)備支持HTML 5歷史作為window.history或不支持。如果設(shè)備支持歷史記錄，那么它返回true否則為false。
2	Ext.supports.GeoLocation 這返回基于布爾值的設(shè)備是否支持地理定位方法。在內(nèi)部它檢查navigator.geolocation方法。
3	Ext.supports.Svg 這返回了基于布爾值的設(shè)備是否支持HTML 5功能可縮放矢量圖形（SVG）方法。在內(nèi)部它檢查doc.createElementNS＆amp;＆amp; !! doc.createElementNS（“http:/"+“/www.w3.org/2000/svg"，“svg"）。createSVGRect。
4	Ext.supports.Canvas 這個返回的布爾值基于設(shè)備支持的HTML 5功能canvas是否繪制方法。在內(nèi)部它檢查doc.createElement（\'canvas\'）。getContext并基于此方法的輸出返回值。
5	Ext.supports.Range 這個返回的布爾值是基于瀏覽器支持的document.createRange方法還是不行。

Ext.String類:

Ext.String類有各種方法處理字符串?dāng)?shù)據(jù)，最常用的方法是編碼解碼，修剪，切換，urlAppend eyc。

編碼解碼函數(shù):這些是Ext.String類中可用的函數(shù)，用于編碼和解碼HTML值。

S.N.	S.N.
1	Ext.String.htmlEncode 此函數(shù)用于編碼html值以使其可解析。 E.g. Ext.String.htmlEncode("< p > Hello World < /p >"); Output - "< p > Hello World < /p >".
2	Ext.String.htmlDecode 此函數(shù)用于解碼編碼的html值 E.g. Ext.String.htmlDecode("< p > Hello World < /p >"); Output - "< p > Hello World < /p &gt"
3	Ext.String.trim 此函數(shù)用于刪除字符串中不需要的空格。例如。 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 此函數(shù)用于在兩個不同的值之間切換值。例如。 var toggleString =\'ASC\' toggleString = Ext.String.toggle（a，\'ASC\'，\'DESC\'）; 輸出 - DESC作為toggleString具有值A(chǔ)SC。現(xiàn)在再次如果我們打印相同，我們將獲得toggleString =“ASC"這一次，因為它的值\'DESC\'。它類似于三元運(yùn)算符 toggleString =（（toggleString ==\'ASC\'）？\'DESC\':\'ASC\'）;

其他方法

S.N.

Ext.userAgent（）

此函數(shù)提供有關(guān)瀏覽器userAgent的信息。 UserAgent用于標(biāo)識Web服務(wù)器的瀏覽器和操作系統(tǒng)。

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

版本相關(guān)功能

這些函數(shù)返回當(dāng)前正在使用的瀏覽器的版本，如果在firefox瀏覽器中調(diào)用IE相關(guān)的函數(shù)，則返回0.這些函數(shù)是Ext.firefoxVersion，Ext.ieVersion等。

例如。如果我們使用firefox瀏覽器，我們調(diào)用方法Ext.ieVersion獲取版本的IE，那么它返回0或者如果我們在IE瀏覽器中使用相同的方法，那么它將返回我們使用的版本，如8,9等。

Ext.getVersion（）

此函數(shù)返回當(dāng)前使用的Ext JS版本。

例如。如果我們調(diào)用Ext.getVersion（），它返回一個值的數(shù)組，如版本，短版本等。

Ext.getVersion（）。version返回程序中使用的Ext JS的當(dāng)前版本，例如“4.2.2"。

瀏覽器相關(guān)功能

這些函數(shù)根據(jù)使用的瀏覽器返回布爾值。這個方法是Ext.isIE，Ext.isIE6，Ext.isFF06，Ext.isChrome。

例如。如果我們使用Chrome瀏覽器，那么Ext.isChrome函數(shù)將返回true，其他的都會返回false。

Ext.typeOf（）

此函數(shù)返回變量的數(shù)據(jù)類型，例如

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

DataType相關(guān)方法:這些函數(shù)根據(jù)變量的數(shù)據(jù)類型返回布爾值。

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

以上內(nèi)容是否對您有幫助：

寫筆記

我要補(bǔ)充

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檢查員

嘗試在線選項

本地環(huán)境設(shè)置

正在下載庫文件

CDN設(shè)置

熱門編輯

瀏覽器

項目結(jié)構(gòu)使用Ext JS應(yīng)用程序

怎么運(yùn)行的

步驟1

Explanation

第2步

容器

描述

句法

例子

海王星主題

酥脆主題

Triton主題

灰色主題

寫事件的方法:

內(nèi)置事件使用偵聽器

稍后再附加事件

自定義事件

模型:

創(chuàng)建模型:

商店:

靜態(tài)存儲:

動態(tài)存儲:

代理:

客戶端代理

服務(wù)器代理

Defining proxies in the server:

描述

Font-Awesome

Font-Pictos

什么是輔助功能？

Ext JS中的輔助功能:

焦點樣式和選項卡:

ARIA主題:

如何在調(diào)試器中調(diào)試JS代碼:

推薦文章

推薦教程

推薦課程

什么是輔助功能？