Ext.js快速指南
基本介紹
Ext JS代表擴(kuò)展JavaScript，是基于YUI（Yahoo用戶(hù)界面）的sencha的JavaScript框架和產(chǎn)品。它基本上是一個(gè)具有現(xiàn)代UI的桌面應(yīng)用程序開(kāi)發(fā)平臺(tái)。
本教程完全理解Ext JS。 這個(gè)參考將帶你通過(guò)簡(jiǎn)單和實(shí)用的方法，同時(shí)學(xué)習(xí)Ext JS。
聽(tīng)眾
本教程為初學(xué)者準(zhǔn)備，幫助他們了解Ext JS的概念，以構(gòu)建動(dòng)態(tài)Web UI。
先決條件
對(duì)于本教程，讀者應(yīng)該具有HTML，CSS和JavaScript編碼的先驗(yàn)知識(shí)。 如果讀者知道面向?qū)ο缶幊痰母拍畈⑶揖哂袆?chuàng)建web應(yīng)用程序的一般想法將是有幫助的。
什么是Ext JS
Ext JS是一個(gè)流行的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的另一個(gè)產(chǎn)品用于移動(dòng)應(yīng)用程序。
Ext JS基于MVC / MVVM架構(gòu)。 最新版本的Ext JS 6是一個(gè)單一的平臺(tái)，可以用于桌面和移動(dòng)應(yīng)用程序，而不需要為不同的平臺(tái)提供不同的代碼。
歷史
Ext JS 1.1
Ext JS的第一個(gè)版本是由Jack Slocum在2006年開(kāi)發(fā)的。它是一組實(shí)用程序類(lèi)，它是YUI的擴(kuò)展。 他將該庫(kù)命名為YUI-ext。
Ext JS 2.0
Ext JS 2.0版于2007年發(fā)布。此版本具有用于桌面應(yīng)用程序的新API文檔，但功能有限。 此版本與以前版本的Ext JS沒(méi)有向后兼容性。
Ext JS 3.0
Ext JS版本3.0是在2009年發(fā)布的。這個(gè)版本添加了新的功能作為圖表和列表視圖，但是以速度為代價(jià)。 它向后兼容2.0版本。
Ext JS 4.0
Ext JS 3發(fā)布后，Ext JS的開(kāi)發(fā)人員面臨著提高速度的主要挑戰(zhàn)。 Ext JS 4.0版本發(fā)布于2011年。它具有完整的修訂結(jié)構(gòu)，其后是MVC架構(gòu)和一個(gè)快速的應(yīng)用程序。
Ext JS 5.0
Ext JS版本5.0是在2014年發(fā)布的。這個(gè)版本的主要變化是將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（用于移動(dòng)應(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ù)級(jí)Web應(yīng)用程序開(kāi)發(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)用程序開(kāi)發(fā)的工具，主要用于生產(chǎn)級(jí)別。
Sencha Cmd
Sencha CMD是一個(gè)提供Ext JS代碼縮小，腳手架，生產(chǎn)構(gòu)建生成功能的工具。
Sencha IDE插件
Sencha IDE插件，它將Sencha框架集成到IntelliJ，WebStorm IDE中。 這有助于通過(guò)提供代碼完成，代碼檢查，代碼導(dǎo)航，代碼生成，代碼重構(gòu)，模板創(chuàng)建和拼寫(xiě)檢查等功能來(lái)提高開(kāi)發(fā)人員的生產(chǎn)力。
Sencha檢查員
Sencha Inspector是一個(gè)調(diào)試工具，幫助調(diào)試器調(diào)試任何問(wèn)題，同時(shí)開(kāi)發(fā)。
嘗試在線選項(xiàng)
我們已經(jīng)在線設(shè)置了ExtJS編程環(huán)境，以便您可以在線編譯和執(zhí)行所有可用的示例。 它給你對(duì)你正在閱讀的信心，并使您能夠使用不同的選項(xiàng)驗(yàn)證程序。 隨意修改任何示例并在線執(zhí)行。
請(qǐng)嘗試以下示例，使用下面示例代碼框右上角的 Try it 選項(xiàng):
<!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>對(duì)于本教程中給出的大多數(shù)示例，您將在我們的網(wǎng)站代碼部分的右上角找到一個(gè)Try it選項(xiàng)，將您帶到在線編譯器。 所以只是利用它，享受你的學(xué)習(xí)。
本地環(huán)境設(shè)置
本節(jié)將指導(dǎo)您如何在機(jī)器上下載和設(shè)置Ext JS。 請(qǐng)按照步驟設(shè)置環(huán)境。
正在下載庫(kù)文件
從sencha https://www.sencha.com下載Ext JS庫(kù)文件的試用版本 。 您將從您的注冊(cè)郵件ID上的網(wǎng)站獲取試用版，這將是一個(gè)名為ext-6.0.1-trial的壓縮文件夾。
解壓縮文件夾，你會(huì)發(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
此文件包含在文件中沒(méi)有注釋的所有縮小的代碼ext-all-debug.js
這是ext-all.js的未分級(jí)版本，用于調(diào)試目的。ext-all-dev.js
此文件也未分級(jí)，用于開(kāi)發(fā)目的，因?yàn)樗凶⑨尯涂刂婆_(tái)日志，以檢查任何錯(cuò)誤/問(wèn)題ext-all.js
這個(gè)文件用于生產(chǎn)目的，主要是因?yàn)樗热魏纹渌〉枚唷?/span>您可以將這些文件添加到您的項(xiàng)目JS文件夾，或者您可以給出文件駐留在系統(tǒng)中的直接路徑。
（2）CSS文件有多個(gè)基于主題的文件，您可以在文件夾\\ 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)典主題
如果我們要使用移動(dòng)應(yīng)用程序，那么我們將使用現(xiàn)代主題，可以在文件夾\\ ext-6.0.1-trial \\ ext-6.0.1 \\ build \\ modern下找到
這些庫(kù)文件將添加到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庫(kù)文件，您可以直接添加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>熱門(mén)編輯
因?yàn)樗且粋€(gè)用于開(kāi)發(fā)Web應(yīng)用程序的JavaScript框架，在我們的項(xiàng)目中，我們將有HTML，JS文件和編寫(xiě)您的Ext JS程序，您將需要一個(gè)文本編輯器。 市場(chǎng)上甚至有多個(gè)IDE可用。 但現(xiàn)在，您可以考慮以下之一:
- Notepad: On Windows machine you can use any simple text editor like Notepad (Recommended for this tutorial), Notepad++, sublime.
- Eclipse: is an IDE developed by the eclipse open-source community and can be downloaded from http://www.eclipse.org/ .
瀏覽器
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)識(shí)符要遵循的一組規(guī)則。
它使得代碼對(duì)于其他程序員也更可讀和可理解。
Ext JS中的命名約定遵循標(biāo)準(zhǔn)JavaScript約定，這不是強(qiáng)制性的，而是遵循的良好做法。
它應(yīng)該遵循camel case語(yǔ)法命名類(lèi)，方法，變量和屬性。
如果name與兩個(gè)單詞組合，則第二個(gè)單詞將始終以大寫(xiě)字母開(kāi)頭。 doLayout（），StudentForm，firstName等。
名稱(chēng) 慣例 班級(jí)名稱(chēng) 它應(yīng)該以大寫(xiě)字母開(kāi)頭，然后是駝峰盒。 StudentClass
方法名稱(chēng) 它應(yīng)該以小寫(xiě)字母開(kāi)頭，然后是駝峰盒。 doLayout（）
變量名 它應(yīng)該以小寫(xiě)字母開(kāi)頭，然后是駝峰盒。 名字
常量名稱(chēng) 它應(yīng)該是大寫(xiě)只有例如。 COUNT，MAX_VALUE
屬性名稱(chēng) 它應(yīng)該以小寫(xiě)字母開(kāi)頭，然后是駝峰。 enableColumnResize = true
Ext JS遵循MVC / MVVM架構(gòu)。
MVC - 模型視圖控制器體系結(jié)構(gòu)（版本4）
MVVM - 模型視圖Viewmodel（版本5）
這種架構(gòu)不是程序的強(qiáng)制性，但最好的做法是遵循這種結(jié)構(gòu)，使您的代碼高度可維護(hù)和組織。
項(xiàng)目結(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)用程序文件夾將駐留在您的項(xiàng)目的JavaScript文件夾中。
應(yīng)用程序?qū)刂破鳎晥D，模型，存儲(chǔ)，實(shí)用程序文件與app.js.
app.js:程式流程開(kāi)始的主要檔案，應(yīng)該使用＆lt; script＆gt; 標(biāo)簽。 應(yīng)用程序調(diào)用應(yīng)用程序的控制器的其余功能。
Controller.js:它是Ext JS MVC架構(gòu)的控制器文件。 這包含應(yīng)用程序的所有控制，事件偵聽(tīng)器的最大功能的代碼。 它具有為該應(yīng)用程序中使用的所有其他文件定義的路徑，例如store，view，model，require，mixins。
View.js:它包含應(yīng)用程序的界面部分，顯示給用戶(hù)。 Ext JS使用各種UI豐富的視圖，可以根據(jù)需要在這里擴(kuò)展和自定義。
Store.js:它包含本地緩存的數(shù)據(jù)，它將在模型對(duì)象的幫助下在視圖上呈現(xiàn)。 存儲(chǔ)使用代理獲取數(shù)據(jù)，代理具有為服務(wù)定義的路徑以獲取后端數(shù)據(jù)。
Model.js:它包含綁定要查看的商店數(shù)據(jù)的對(duì)象。 它有后端數(shù)據(jù)對(duì)象到視圖dataIndex的映射。 在store的幫助下獲取數(shù)據(jù)。
Utils.js:它不包括在MVC架構(gòu)中，但是最好的做法是使代碼清晰，不太復(fù)雜，更加可讀。 我們可以在這個(gè)文件中編寫(xiě)方法，并在控制器或視圖渲染器中調(diào)用它們。 這對(duì)代碼可重用性目的也很有幫助。
在MVVM架構(gòu)中，控制器被ViewModel替代。
ViewModel:它基本上是藥物視圖和模型之間的變化。 它將數(shù)據(jù)從模型綁定到視圖。 同時(shí)它沒(méi)有與視圖的任何直接交互它只有模型的知識(shí)。
怎么運(yùn)行的
例如，如果我們?cè)赨I中的兩三個(gè)地方使用一個(gè)模型對(duì)象，如果我們?cè)赨I的一個(gè)地方更改值，我們可以看到，甚至沒(méi)有保存更改模型更改的值，因此反映在UI中的所有地方 在哪里使用模型。
它使開(kāi)發(fā)人員更加輕松和簡(jiǎn)單，因?yàn)椴恍枰~外的編碼綁定數(shù)據(jù)。
本章列出了在Ext JS中首先編寫(xiě)Hello World程序的步驟:
步驟1
在我們選擇的編輯器中創(chuàng)建index.htm頁(yè)面。 將所需的庫(kù)文件包含在html頁(yè)面的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元素時(shí)調(diào)用。
Ext.create（）方法用于在Ext JS中創(chuàng)建對(duì)象，這里我們創(chuàng)建一個(gè)簡(jiǎn)單的面板類(lèi)Ext.Panel的對(duì)象。
Ext.Panel是Ext JS中用于創(chuàng)建面板的預(yù)定義類(lèi)。
每個(gè)Ext JS類(lèi)都有不同的屬性來(lái)執(zhí)行一些基本的功能。
Ext.Panel類(lèi)有以下各種屬性:
renderTo 是此面板必須呈現(xiàn)的元素。 \'helloWorldPanel\'是Index.html文件中的div id。
高度和寬度屬性用于提供面板的自定義尺寸。
標(biāo)題屬性是為面板提供標(biāo)題。
Html 屬性是要在面板中顯示的html內(nèi)容。
第2步
在標(biāo)準(zhǔn)瀏覽器中打開(kāi)index.htm文件，您將在瀏覽器上獲得以下輸出。
Ext JS是一個(gè)JavaScript框架，它具有面向?qū)ο缶幊痰墓δ堋?/span>
Ext是封裝Ext JS中所有類(lèi)的命名空間。在Ext JS中定義類(lèi)
Ext提供了300多個(gè)類(lèi)，我們可以用于各種功能。
Ext.define（）用于在Ext JS中定義類(lèi)。
語(yǔ)法:
Ext.define(class name, class members/properties, callback function);
類(lèi)名稱(chēng)是根據(jù)應(yīng)用程序結(jié)構(gòu)的類(lèi)名稱(chēng)。 appName.folderName.ClassName
studentApp.view.StudentView。類(lèi)屬性/成員 - 定義類(lèi)的行為。
回調(diào)函數(shù)是可選的。 當(dāng)類(lèi)正確加載時(shí)，會(huì)調(diào)用它。
Ext JS類(lèi)定義示例
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)建對(duì)象
像其他基于OOPS的語(yǔ)言一樣，我們也可以在Ext JS中創(chuàng)建對(duì)象。
不同的方式創(chuàng)建對(duì)象在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中的繼承
繼承是將類(lèi)A中定義的功能用于類(lèi)B的原理。
在Ext JS繼承可以使用兩種方法 -
Ext.extend:
Ext.define(studentApp.view.StudentDetailsGrid, { extend : 'Ext.grid.GridPanel', ... });這里我們的自定義類(lèi)StudentDetailsGrid使用Ext JS類(lèi)GridPanel的基本功能。
使用Mixins:
Mixins是在沒(méi)有擴(kuò)展的情況下在類(lèi)B中使用類(lèi)A的不同方式。
mixins : { commons : 'DepartmentApp.utils.DepartmentUtils' },Mixins我們添加在控制器中，我們聲明所有其他類(lèi)，如存儲(chǔ)，視圖等。在這種方式，我們可以調(diào)用DepartmentUtils類(lèi)，并在控制器或在這個(gè)應(yīng)用程序中使用其功能。
容器
Ext JS中的容器是我們可以添加其他容器或子組件的組件。
這些容器可以具有多個(gè)布局以將部件布置在容器中。
我們可以從容器和其子元素添加或刪除組件。
Ext.container.Container是Ext JS中所有容器的基類(lèi)。S.N. 描述 1 Components inside Container 此示例顯示如何在容器內(nèi)定義組件
2 Container inside container 此示例顯示如何使用其他組件定義容器內(nèi)的容器
有各種類(lèi)型的容器Ext.panel.Panel，Ext.form.Panel，Ext.tab.Panel和Ext.container.Viewport是Ext JS中經(jīng)常使用的容器。 下面是顯示如何使用這些容器的示例。
S.N. 集裝箱類(lèi)型 描述 1 Ext.panel.Panel 此示例顯示一個(gè)Ext.panel.Panel容器
2 Ext.form.Panel 此示例顯示一個(gè)Ext.form.Panel容器
3 Ext.tab.Panel 此示例顯示一個(gè)Ext.tab.Panel容器
4 Ext.container.Viewport 此示例顯示一個(gè)Ext.container.Viewport容器
布局是元素在容器中排列的方式。 這可以是水平的，垂直的或任何其他。 Ext JS在其庫(kù)中定義了不同的布局，但我們也可以編寫(xiě)自定義布局。
S.N. 布局＆amp; 描述 1 Absolute 此布局允許使用容器中的XY坐標(biāo)定位項(xiàng)目。
2 Accordion 此布局允許將所有項(xiàng)目以堆棧方式（一個(gè)在另一個(gè)之上）放在容器內(nèi)。
3 Anchor 此布局為用戶(hù)提供了相對(duì)于容器大小給出每個(gè)元素的大小的特權(quán)。
4 Border 在此布局中，各種面板嵌套并由邊界分隔。
5 Auto 這是默認(rèn)布局決定元素的布局，基于元素的數(shù)量。
6 Card(TabPanel) 此布局以制表符方式排列不同的組件。 選項(xiàng)卡將顯示在容器的頂部。每次只有一個(gè)選項(xiàng)卡可見(jiàn)，每個(gè)選項(xiàng)卡被視為不同的組件。
7 Card(Wizard) 在這個(gè)布局中，每次元素來(lái)到完整的容器空間。 向?qū)е袑⒂幸粋€(gè)底部工具欄用于導(dǎo)航。
8 Column 此布局是要在容器中顯示多個(gè)列。 我們可以定義列的固定寬度或百分比寬度。 百分比寬度將基于容器的完整大小計(jì)算。
9 Fit 在此布局中，容器用單個(gè)面板填充，并且當(dāng)沒(méi)有與布局相關(guān)的特定要求時(shí)，則使用該布局。
10 Table 由于名稱(chēng)意味著此布局以HTML表格式在容器中排列組件。
11 vBox 這種布局允許元素以垂直方式分布。 這是最常用的布局之一。
12 hBox 這種布局允許元素以水平方式分布。
ExtJS UI由一個(gè)或多個(gè)名為Components.Ext的widget組成.JS具有定義的各種UI組件，可以根據(jù)您的要求進(jìn)行定制。
S.N. 方法＆amp; 描述 1 Grid 網(wǎng)格組件可用于以表格格式顯示數(shù)據(jù)。
2 Form 窗體小部件是從用戶(hù)獲取數(shù)據(jù)。
3 Message Box 消息框基本上用于以警報(bào)框的形式顯示數(shù)據(jù)。
4 Chart 圖表用于以圖形格式表示數(shù)據(jù)。
5 Tool tip 任何事件發(fā)生時(shí)，工具提示用于顯示一些基本信息。
6 Window 這個(gè)UI部件是創(chuàng)建一個(gè)窗口，當(dāng)任何事件發(fā)生時(shí)應(yīng)該彈出。
7 HTML editor HTML編輯器是非常有用的UI組件之一，用于對(duì)用戶(hù)輸入的字體，顏色，大小等數(shù)據(jù)進(jìn)行樣式設(shè)置。
8 Progress bar 顯示后端工作的進(jìn)度。
描述
拖放功能是為使開(kāi)發(fā)人員輕松工作而添加的強(qiáng)大功能之一。拖動(dòng)操作基本上是在某些UI元素上的點(diǎn)擊手勢(shì)，同時(shí)按住鼠標(biāo)按鈕并移動(dòng)鼠標(biāo)。 在拖動(dòng)操作后釋放鼠標(biāo)按鈕時(shí)，會(huì)發(fā)生放置操作。
句法
將類(lèi)拖放到可拖動(dòng)目標(biāo)。
var dd = Ext.create('Ext.dd.DD', el, 'imagesDDGroup', { isTarget: false });添加拖放目標(biāo)類(lèi)到drappable目標(biāo)
var mainTarget = Ext.create('Ext.dd.DDTarget', 'mainRoom', 'imagesDDGroup', { ignoreSelf: false });例子
下面是一個(gè)簡(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.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)格移動(dòng)到網(wǎng)格和網(wǎng)格到窗體。下面是在網(wǎng)格和窗體之間移動(dòng)數(shù)據(jù)的例子。
Ext.js提供了許多要在您的應(yīng)用程序中使用的主題。 你可以添加不同的主題的經(jīng)典主題，看到輸出的差異，這是簡(jiǎn)單地通過(guò)替換主題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
要查看效果，請(qǐng)嘗試以下程序:
<!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>這會(huì)產(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
要查看效果，請(qǐ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.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>這會(huì)產(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
要查看效果，請(qǐng)嘗試以下程序:
<!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>這會(huì)產(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
要查看效果，請(qǐng)嘗試以下程序:
<!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>這會(huì)產(chǎn)生以下結(jié)果:
事件是在類(lèi)發(fā)生的時(shí)候觸發(fā)的。 例如，當(dāng)一個(gè)按鈕被點(diǎn)擊或元素被渲染之前/之后。
寫(xiě)事件的方法:
- Built in events using listeners
- Attaching events later
- Custom events
內(nèi)置事件使用偵聽(tīng)器
Ext JS提供了用于在Ext JS文件中編寫(xiě)事件和自定義事件的偵聽(tīng)器屬性。
在Ext JS中編寫(xiě)偵聽(tīng)器
我們將通過(guò)在面板中添加listen屬性來(lái)將監(jiān)聽(tīng)器添加到上一個(gè)程序中，如下所示:
<!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>這會(huì)產(chǎn)生以下結(jié)果:
這樣我們可以在listeners屬性中寫(xiě)多個(gè)事件。
同一個(gè)偵聽(tīng)器中的多個(gè)事件
<!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>稍后再附加事件
在前面的寫(xiě)事件的方法中，我們?cè)趧?chuàng)建元素時(shí)在偵聽(tīng)器中寫(xiě)入事件。
其他方式是附加事件在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中編寫(xiě)自定義事件，并使用fireEvent方法觸發(fā)事件，下面的示例解釋了如何編寫(xiě)自定義事件。
<!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>一旦頁(yè)面被加載并且文檔準(zhǔn)備就緒，UI頁(yè)面與按鈕將出現(xiàn)，并且我們?cè)?秒后觸發(fā)事件文檔準(zhǔn)備就緒，警報(bào)框?qū)⒃?秒后出現(xiàn)。
這里我們寫(xiě)了自定義事件\'myEvent\'，我們將事件觸發(fā)為button.fireEvent（eventName）;
這些是在Ext JS中編寫(xiě)事件的三種方式。
數(shù)據(jù)包用于加載和保存應(yīng)用程序中的所有數(shù)據(jù)。
數(shù)據(jù)包有許多類(lèi)，但最重要的類(lèi)是:
- Modal
- Store
- Proxy
模型:
modal的基類(lèi)是Ext.data.Model.It表示應(yīng)用程序中的一個(gè)實(shí)體。 它將存儲(chǔ)數(shù)據(jù)綁定到視圖。 它有后端數(shù)據(jù)對(duì)象到視圖dataIndex的映射。 在store的幫助下獲取數(shù)據(jù)。
創(chuàng)建模型:
為了創(chuàng)建一個(gè)模型，我們需要擴(kuò)展Ext.data.Model類(lèi)，我們需要定義字段的名稱(chēng)和映射。
Ext.define('StudentDataModel', { extend: 'Ext.data.Model', fields: [ {name: 'name', mapping : 'name'}, {name: 'age', mapping : 'age'}, {name: 'marks', mapping : 'marks'} ] });這里的名稱(chēng)應(yīng)該與我們?cè)谝晥D中聲明的dataIndex相同，并且映射應(yīng)該匹配使用store從數(shù)據(jù)庫(kù)獲取的靜態(tài)或動(dòng)態(tài)數(shù)據(jù)。
商店:
存儲(chǔ)的基類(lèi)是Ext.data.Store。 它包含本地緩存的數(shù)據(jù)，該數(shù)據(jù)將在模型對(duì)象的幫助下在視圖上呈現(xiàn)。 存儲(chǔ)使用代理獲取數(shù)據(jù)，代理具有為服務(wù)定義的路徑以獲取后端數(shù)據(jù)。
存儲(chǔ)數(shù)據(jù)可以從靜態(tài)或動(dòng)態(tài)兩種方式獲取。
靜態(tài)存儲(chǔ):
對(duì)于靜態(tài)存儲(chǔ)，我們將存儲(chǔ)在存儲(chǔ)中的所有數(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" } ]; });動(dòng)態(tài)存儲(chǔ):
可以使用代理獲取動(dòng)態(tài)數(shù)據(jù)。 我們可以讓代理可以從Ajax，Rest和Json獲取數(shù)據(jù)。
代理:
代理的基類(lèi)是Ext.data.proxy.Proxy。 代理由模型和商店用于處理模型數(shù)據(jù)的加載和保存。
有兩種類(lèi)型的代理:
- Client Proxy
- Server Proxy
客戶(hù)端代理
客戶(hù)端代理包括使用HTML5本地存儲(chǔ)的內(nèi)存和本地存儲(chǔ)。
服務(wù)器代理
服務(wù)器代理使用Ajax，Json數(shù)據(jù)和Rest服務(wù)處理來(lái)自遠(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)添加不同的類(lèi)。
Font-Awesome
2. Font-Pictos
Font-Awesome
ExtJS的新主題Triton有內(nèi)置的字體家族字體awesome包含在框架本身，所以我們不需要任何明確的要求的字體真棒樣式表。
下面是在Triton主題中使用Font-Awesome類(lèi)的示例。
Font-Awesome with Triton theme
當(dāng)我們使用除了Triton之外的任何其他主題時(shí)，我們需要明確地要求或添加樣式表以用于font-awesome。
下面是使用沒(méi)有Triton主題的Font-Awesome類(lèi)的示例。
Font-Awesome with normal theme(Any theme other then Triton theme)
Font-Pictos
Font-pictos不包括在EXTJS的框架中，所以我們必須首先要求它，只有sencha的許可用戶(hù)才能使用font-pictos。
添加字體pictos的步驟
1.需要font-pictos類(lèi):
"requires": ["font-pictos"]
2.現(xiàn)在將pictos類(lèi)添加為:
iconCls: 'pictos pictos-home'
應(yīng)用程序樣式是指用戶(hù)調(diào)整組件的外觀和感覺(jué)。 這些調(diào)整可能包括:顏色，顏色漸變，字體，邊距/填充等。Ext JS 6有一種新的應(yīng)用程序樣式。
它使用SCSS的樣式。 SCSS是編寫(xiě)CSS代碼的更動(dòng)態(tài)的方式。 我們可以在這個(gè)幫助下在我們的樣式表中寫(xiě)入變量。 但是瀏覽器不能理解SCSS它只能理解CSS，所以所有的SCSS文件應(yīng)該被編譯成CSS生產(chǎn)就緒代碼。
這就是為什么SCSS文件被稱(chēng)為預(yù)處理器文件。 在Extjs中，編譯通過(guò)Sencha CMD工具完成。
Sencha CMD手動(dòng)編譯它一次使用命令如下:
sencha應(yīng)用程序構(gòu)建[開(kāi)發(fā)]
全局CSS是主要的CSS文件，它具有所有的SCSS變量與ExtJS相關(guān)聯(lián)，我們可以在我們的應(yīng)用程序中使用它來(lái)定制我們的主題，根據(jù)我們的需要提供不同的價(jià)值。
以下是Extjs中的Global_CSS中提供的一些CSS變量:
S.N. 變量＆amp; 描述 1 $ base-color
$ base-color:color（例如$ base-color:＃808080）
這個(gè)基色在整個(gè)主題中使用。
2 $ base-gradient
$ base-gradient:string（例如$ base-gradient:\'matte\'）
在整個(gè)主題中使用的基本漸變。
3 $ body-background-color
$ body-background-color:color（例如$ body-background-color:＃808080）
應(yīng)用到body元素的背景顏色。 如果設(shè)置為transparent或\'none\'，將不會(huì)在body元素上設(shè)置背景顏色樣式
4 $ color
$ color:color（例如$ color:＃808080）
要在整個(gè)主題中使用的默認(rèn)文本顏色
5 $ font-family
$ font-family:string（例如$ font-family:arial）
在整個(gè)主題中使用的默認(rèn)font-family。
6 $ font-size
$ font-size:number（例如$ font-size:9px）
要在整個(gè)主題中使用的默認(rèn)字體大小。
7 $ font-weight
$ font-weight:string / number（例如$ font-weight:normal）
在整個(gè)主題中使用的默認(rèn)字體權(quán)重
8 $ font-weight-bold
$ font-weight-bold:string / number（例如$ font-weight-bold:bold）
粗體字體的默認(rèn)字體粗細(xì)在整個(gè)主題中使用
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中的繪圖包使您能繪制通用圖形。 這可以用于在所有瀏覽器和移動(dòng)設(shè)備上工作的圖形。
S.N. 畫(huà)畫(huà) 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)圖形后在容器中移動(dòng)起點(diǎn)。 它可以與任何圖形一起使用。
10 Rotation 此屬性用于向添加的圖形添加旋轉(zhuǎn)。 它可以與任何圖形一起使用。
11 Square 此圖形用于創(chuàng)建正方形。
最好用他們理解和喜歡的語(yǔ)言來(lái)溝通用戶(hù)。 Extjs本地化包支持超過(guò)40種語(yǔ)言，如德語(yǔ)，法語(yǔ)，韓語(yǔ)，中文等。
? 在ExtJs中實(shí)現(xiàn)區(qū)域設(shè)置非常簡(jiǎn)單。您將在ext-locale軟件包的覆蓋文件夾中找到所有捆綁的區(qū)域設(shè)置文件。 語(yǔ)言環(huán)境文件只是覆蓋，它指示Ext JS替換某些組件的默認(rèn)英語(yǔ)值。這個(gè)程序是要顯示不同區(qū)域設(shè)置的月份來(lái)看效果，試試下面的程序:
<!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>這會(huì)產(chǎn)生以下結(jié)果:
描述:
對(duì)于使用不同的語(yǔ)言環(huán)境，除了英語(yǔ)，我們需要在我們的程序中添加區(qū)域設(shè)置特定的文件，我們使用https://cdnjs.cloudflare.com/ajax/libs/extjs/6.0.0/classic/locale/locale-fr .js法語(yǔ)。 您可以對(duì)不同的語(yǔ)言使用不同的區(qū)域設(shè)置，例如https://cdnjs.cloudflare.com/ajax/libs/extjs/6.0.0/classic/locale/locale-ko.js for korean等。
這個(gè)程序是顯示日期選擇器在韓國(guó)語(yǔ)區(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>這會(huì)產(chǎn)生以下結(jié)果:
下面是ExtJS中可用的幾個(gè)區(qū)域設(shè)置和要更改的主文件區(qū)域設(shè)置URL。
語(yǔ)言環(huán)境 語(yǔ)言 區(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 簡(jiǎn)化中文 https://cdnjs.cloudflare.com/ajax/libs/extjs/6.0.0/classic/locale/locale-zh_CN.js 什么是輔助功能？
一般來(lái)說(shuō)，可訪問(wèn)性意味著可用性，內(nèi)容可訪問(wèn)意味著內(nèi)容可用。
在軟件術(shù)語(yǔ)中，應(yīng)用程序可訪問(wèn)意味著應(yīng)用程序可用于所有人。 這里所指的是殘疾人，視障者一次或使用屏幕閱讀器的人，使用計(jì)算機(jī)或那些喜歡用鍵盤(pán)而不是使用鼠標(biāo)的所有導(dǎo)航。
可訪問(wèn)的應(yīng)用程序稱(chēng)為ARIA（可訪問(wèn)富互聯(lián)網(wǎng)應(yīng)用程序）。
Ext JS中的輔助功能:
Ext JS旨在牢記這一點(diǎn)，它應(yīng)該與所有鍵盤(pán)導(dǎo)航工作。它已內(nèi)置標(biāo)簽索引和聚焦能力，它始終是默認(rèn)開(kāi)啟，所以我們不需要添加任何屬性來(lái)啟用此功能。
此功能允許所有鍵盤(pán)啟用的組件在標(biāo)簽頁(yè)插入時(shí)與用戶(hù)交互。 像我們可以使用tab移動(dòng)到下一個(gè)組件，而不是鼠標(biāo)移動(dòng)該組件。 同樣，我們可以移動(dòng)+標(biāo)簽向后移動(dòng)，然后輸入鍵盤(pán)進(jìn)行點(diǎn)擊等。
焦點(diǎn)樣式和選項(xiàng)卡:
當(dāng)使用擊鍵進(jìn)行制表時(shí)，F(xiàn)ocus將內(nèi)置在Extjs中。
下面的示例顯示了當(dāng)焦點(diǎn)隨著制表符改變時(shí)如何改變樣式。
<!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)簽從下一個(gè)按鈕和Shift +選項(xiàng)卡向后移動(dòng)使用輸入并看到焦點(diǎn)按鈕的相關(guān)警報(bào)將彈出
ARIA主題:
ExtJS為視障人士提供主題詠嘆調(diào)。
這里的例子顯示的詠嘆調(diào)話(huà)題更容易為視障者。
下面的示例顯示了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é)果，您可以使用選項(xiàng)卡和鼠標(biāo)上下鍵移動(dòng)焦點(diǎn)在網(wǎng)格上，主題是基本為視障人士。
這是ExtJS內(nèi)置主題和聚焦的方式，使任何人都可以輕松訪問(wèn)。
任何JavaScript代碼都可以使用alert（）框或console.log（）或調(diào)試器中的調(diào)試指針進(jìn)行調(diào)試。
-
警告框:
請(qǐng)?jiān)谝獧z查流或任何變量值的代碼中放置一個(gè)警告框。
例如alert（\'message to show\'+ variable）; -
開(kāi)發(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是一個(gè)JavaScript框架，因此可以使用由不同瀏覽器提供或特定的開(kāi)發(fā)工具輕松調(diào)試。
所有主要瀏覽器都有他們的開(kāi)發(fā)工具可用于測(cè)試和調(diào)試JavaScript代碼。
流行的調(diào)試器是IE的IE開(kāi)發(fā)工具，firefox的firefox，Chrome瀏覽器的chrome開(kāi)發(fā)工具。
Chrome調(diào)試器自帶的Chrome瀏覽器，但firebug必須專(zhuān)門(mén)安裝，因?yàn)樗皇亲鳛橐粋€(gè)包與firefox。
以下是為Firefox瀏覽器安裝firebug的鏈接 http: //getfirebug.com
在Windows操作系統(tǒng)中打開(kāi)開(kāi)發(fā)工具的快捷鍵是F12鍵盤(pán)鍵。
如何在調(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.
下面是幾個(gè)內(nèi)置函數(shù)，主要在Ext JS中使用:
Ext.is類(lèi):
此類(lèi)檢查您使用的平臺(tái)，無(wú)論是手機(jī)還是桌面，Mac或Windows操作系統(tǒng)。
這些是與Ext.is類(lèi)相關(guān)的以下方法S.N. 方法＆amp; 描述 1 Ext.is.Platforms
此函數(shù)返回此版本可用的平臺(tái)。
例如。 當(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 如果你使用Android操作系統(tǒng)，這個(gè)函數(shù)將返回true，否則返回false。
3 Ext.is.Desktop
如果您正在為應(yīng)用程序使用桌面，則此函數(shù)將返回true，否則返回false。
4 Ext.is.Phone
這個(gè)函數(shù)將返回true，如果你使用的是移動(dòng)，否則返回false。
5 Ext.is.Phone
這個(gè)函數(shù)將返回true如果你使用iPhone的else它返回false。
6 Ext.is.Pod
如果你使用iPod，這個(gè)函數(shù)將返回true否則返回false。
7 Ext.is.iPad
這個(gè)函數(shù)將返回true如果你使用iPad的else返回false。
8 這個(gè)函數(shù)將返回true，如果你使用windows操作系統(tǒng)，否則返回false。
9 Ext.is.Linux
這個(gè)函數(shù)將返回true，如果你使用的是linux操作系統(tǒng)，否則返回false。
10 Ext.is.Blackberry
如果你使用Blackberry，這個(gè)函數(shù)將返回true，否則返回false。
11 Ext.is.Mac
這個(gè)函數(shù)將返回true，如果你使用的是mac操作系統(tǒng)，否則返回false。
Ext.supports類(lèi):
因?yàn)槊Q(chēng)表示這個(gè)類(lèi)提供關(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
這個(gè)返回的布爾值基于設(shè)備支持的HTML 5功能canvas是否繪制方法。 在內(nèi)部它檢查doc.createElement（\'canvas\'）。getContext并基于此方法的輸出返回值。
5 Ext.supports.Range
這個(gè)返回的布爾值是基于瀏覽器支持的document.createRange方法還是不行。
Ext.String類(lèi):
Ext.String類(lèi)有各種方法處理字符串?dāng)?shù)據(jù)，最常用的方法是編碼解碼，修剪，切換，urlAppend eyc。
編碼解碼函數(shù):這些是Ext.String類(lèi)中可用的函數(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 >"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ù)用于在兩個(gè)不同的值之間切換值。
例如。 var toggleString =\'ASC\'
toggleString = Ext.String.toggle（a，\'ASC\'，\'DESC\'）;
輸出 - DESC作為toggleString具有值A(chǔ)SC。 現(xiàn)在再次如果我們打印相同，我們將獲得toggleString =“ASC"這一次，因?yàn)樗闹礬'DESC\'。
它類(lèi)似于三元運(yùn)算符
toggleString =（（toggleString ==\'ASC\'）？\'DESC\':\'ASC\'）;
其他方法
S.N. S.N. 1 Ext.userAgent（）
此函數(shù)提供有關(guān)瀏覽器userAgent的信息。 UserAgent用于標(biāo)識(shí)Web服務(wù)器的瀏覽器和操作系統(tǒng)。
例如。 如果你在Mozilla工作，它會(huì)返回一些東西像:“mozilla / 5.0（windows nt 6.1; wow64; rv:43.0）gecko / 20100101 firefox / 43.0"
2 版本相關(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或者如果我們?cè)贗E瀏覽器中使用相同的方法，那么它將返回我們使用的版本，如8,9等。
3 Ext.getVersion（）
此函數(shù)返回當(dāng)前使用的Ext JS版本。
例如。 如果我們調(diào)用Ext.getVersion（），它返回一個(gè)值的數(shù)組，如版本，短版本等。
Ext.getVersion（）。version返回程序中使用的Ext JS的當(dāng)前版本，例如“4.2.2"。
4 瀏覽器相關(guān)功能
這些函數(shù)根據(jù)使用的瀏覽器返回布爾值。 這個(gè)方法是Ext.isIE，Ext.isIE6，Ext.isFF06，Ext.isChrome。
例如。 如果我們使用Chrome瀏覽器，那么Ext.isChrome函數(shù)將返回true，其他的都會(huì)返回false。
5 Ext.typeOf（）
此函數(shù)返回變量的數(shù)據(jù)類(lèi)型，例如
E.g. var a = 5; var b = 'hello'; Ext.typeOf(a); Output – Number Ext.typeOf(b); Output - String
6 DataType相關(guān)方法:這些函數(shù)根據(jù)變量的數(shù)據(jù)類(lèi)型返回布爾值。
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
更多建議：