App下載

Ext JS 6有什么新東西?

猿友 2020-12-31 16:17:48 瀏覽數(shù) (2376)
反饋

工具包(ToolKits)

Ext JS 6最大的變化就是將 Ext JS 和 Touch 合并為一個(gè)單一的框架。之前的框架的核心(數(shù)據(jù)、控制器、模型等等)已被調(diào)和為一個(gè)單一的公共平臺(tái)。這樣,數(shù)據(jù)和邏輯就可以同享,從而幫助開(kāi)發(fā)人員進(jìn)一步去優(yōu)化他們的利用程序。

那些具有獨(dú)特功能的東西將會(huì)被分解為兩個(gè)絕然不同的兩個(gè)工具包:古典(Classic)和現(xiàn)代(Modern)。這些工具包通過(guò) Ext JS 和Touch 的視圖層來(lái)進(jìn)行劃分的。那些同享核心資源和邏輯,并使用這兩種工具包的利用程序被稱為通用(Universal)利用程序。

在使用 Cmd 生成利用程序的時(shí)候,需要選擇利用程序的工具包,這個(gè)可通過(guò)簡(jiǎn)單調(diào)劑利用程序的 app.json 來(lái)實(shí)現(xiàn),以下所示:

"toolkit": "classic", // or "modern"

發(fā)布

由于框架結(jié)合為了單一實(shí)體,SDK 的結(jié)構(gòu)不能不根據(jù) classic、modern 和 common 這3個(gè)區(qū)域進(jìn)行重組。

微信截圖_20201231104617

一樣,生成和示例文件夾也包括 classic 和 modern 這兩個(gè)子目錄:

微信截圖_20201231104630

微信截圖_20201231104635

ext-all.js 這個(gè)文件在 build 文件夾中仍然存在。而 ext-modern.js 就相當(dāng)于使用 sencha-touch.js。二者使用的是共同的核心。

在當(dāng)前版本中,示例 kitchensink 就是所謂的通用利用程序,一個(gè)單一的結(jié)合了經(jīng)典和現(xiàn)代兩個(gè)生成配置的利用程序。

包的命名

對(duì)各種不同包中的前綴“ext-”和“sencha-”已被刪除。這些前綴當(dāng)初主要是用來(lái)辨別 Sencha Touch、Ext JS 和公共庫(kù)的。而現(xiàn)在,他們不再需要進(jìn)行這類辨別了,所有這些代碼都已包括到了 Ext JS 中。這意味著“sencha-charts”現(xiàn)在應(yīng)為“charts”,而“ext-theme-neptune”則為“theme-neptune”。

正如你所想的哪樣,要從 Ext JS 5 升級(jí)到 Ext JS 6,就需要在 app.json 文件中調(diào)劑包的援用名稱。

Fashion

Fashion 是 Sencha 推出的新的 SASS 編譯器,用于創(chuàng)建利用程序主題。它是使用 Javascript 編寫(xiě)的,可在閱讀器中運(yùn)行。結(jié)合PhantomJS 后,在 Sencha Cmd 中使用 Fashion 來(lái)創(chuàng)建 SASS 比 app watch 要好。這意味著 Ruby 不再是系統(tǒng)所需的!由于 Fashion 是運(yùn)行在閱讀器的,因此能將 SASS 的構(gòu)建減少到兩次(一次是進(jìn)行切片(slicer),一次是最小化所需內(nèi)容)。更重要的是,可以通過(guò) app watch 迅速的以增量方式重建 SASS,這給開(kāi)發(fā)人員帶來(lái)了實(shí)實(shí)在在的好處。

對(duì) app watch,使用Fashion還有一個(gè)更大的好處:在線更新!在(現(xiàn)代)閱讀器中打開(kāi)有一個(gè)利用程序并加載SASS文件來(lái)代替生成的CSS。Fashion 不必刷新頁(yè)面便可更改并編譯 SASS,并更新 CSS。

如果要啟用在西安更新,可將“?platformTags=fashion:true”添加到 URL。

由于不再使用 Ruby,因此依賴 Ruby 代碼的 Compass 功能將不能再使用。這就不能不使用 JavaScript 來(lái)創(chuàng)建。我們將會(huì)盡快編寫(xiě)如作甚 Fashion 編寫(xiě)自定義 JavaScript 擴(kuò)大的文檔。有一些 Compass 中的SASS代碼已遷移到了 Fashion,因此其實(shí)不是所有的Compass 功能都會(huì)遭到利用??偟膩?lái)講,如果不使用自定義的 Compass 功能,就不會(huì)體會(huì)到之間的差別。

重要的是,在線更新只有在頁(yè)面視圖是運(yùn)行在 Cmd Web server 的時(shí)候才會(huì)工作。在 Ext JS 的 classic 工具包中,一些 Sass 的修改可能需要一個(gè)布局或全部頁(yè)面重新加載。對(duì) modern 工具包來(lái)講,很少會(huì)有這樣的問(wèn)題,由于它很大程度上是基于 CSS 的,且更能適應(yīng)積極的變化。

圖表

圖表包中最大的變化是在 3D餅圖中,它現(xiàn)在支持標(biāo)簽和可配置的 3D方面。在圖表 kitchensink 中可以查看到這些示例。

微信截圖_20201231104646

ItemEdit插件

另外一個(gè)最大最新的功能是itemEdit插件,它運(yùn)行用戶通過(guò)拖動(dòng)標(biāo)記去修改圖表值。可通過(guò)查看Kitchen Sink中Scatter Chart的自定義圖標(biāo)示例來(lái)查看itemEdit插件的行動(dòng)。

微信截圖_20201231104652

序列標(biāo)簽、條碼和提示信息的 renderer 現(xiàn)在支持通過(guò) ViewController 的方法來(lái)命名(聲明式渲染)。軸標(biāo)簽的 renderer 也行將到來(lái)。

值得注意的是,Ext JS 6 已拋棄舊的 ext-charts 包。任何使用 ext-charts 的都需要重構(gòu)利用程序以使用 sencha-charts 包。

網(wǎng)格
電子表格

在 Ext JS 5.1 中引入的電子表格模型現(xiàn)在有了一些使人驚嘆的新功能。選擇現(xiàn)在可通過(guò)設(shè)置 extensible 為 true 來(lái)設(shè)置為可擴(kuò)大的,這樣,便可拖動(dòng)右下角的拖動(dòng)角唆使器來(lái)添加選擇,從而對(duì)當(dāng)前所選內(nèi)容沿垂直方向或水平方向進(jìn)行擴(kuò)大。

微信截圖_20201231104539


這通常會(huì)結(jié)合使用當(dāng)前選擇的插件來(lái)復(fù)制值到擴(kuò)大區(qū)域,就像在一個(gè)典型的電子表格中所期望的哪樣。

可操作模式(Actionable Mode)和可訪問(wèn)性

網(wǎng)格還支持ARIA的“可操作模式”,該模式是原始單元格編輯模式的延伸。這將允許所有類型的單元格內(nèi)容能夠通過(guò)鍵盤獲得焦點(diǎn)或激活。這是對(duì)可訪問(wèn)性的巨大進(jìn)步,這對(duì)超級(jí)用戶來(lái)講,就能夠無(wú)需鼠標(biāo)就可以導(dǎo)航到網(wǎng)格中的任何地方。

LazyItems插件

該插件可延遲子組件的渲染,直到顯現(xiàn)的時(shí)候再進(jìn)行渲染,從而下降子組件的實(shí)例化和初始化的履行本錢。

例如,在標(biāo)簽面板中設(shè)置 deferredRender 為 true,未顯現(xiàn)的標(biāo)簽就不會(huì)對(duì)它的后代組件進(jìn)行實(shí)例化和初始化,從而減少開(kāi)消,直到標(biāo)簽被激活的時(shí)候才會(huì)進(jìn)行渲染。

屏幕瀏覽器支持(可訪問(wèn)性)

ARIA 功能已直接到了組件的生命周期,這意味著不再需要指定 aria 包來(lái)獲得正確的 ARIA 行動(dòng)了。利用程序現(xiàn)在支持屏幕瀏覽器(類似JAWS)而無(wú)需指定援用。

微加載(Microloader)

Sencha Cmd 6現(xiàn)在資源方面包括了本地存儲(chǔ)緩存,這類似于 Sencha Touch 的產(chǎn)品的微加載。雖然如此,還是有一些重要的改進(jìn):

緩存能在 app.json 中禁用

只有通過(guò)微加載方式加載的內(nèi)容才不會(huì)被刪除

只有利用程序確當(dāng)前版本才可保持在本地存儲(chǔ)

這些改進(jìn)解決了當(dāng)前 Touch 微加載所報(bào)告的問(wèn)題。主要的是,它會(huì)在超越空間的時(shí)候積極的刪除本地存儲(chǔ)的內(nèi)容。這問(wèn)題經(jīng)常產(chǎn)生是由于保存了沒(méi)必要要的舊版本利用程序,這讓完全刪除成為終究選擇。

Touch網(wǎng)格

Touch 網(wǎng)格不再是一個(gè)獨(dú)立的 Cmd 包,它現(xiàn)在已默許成為 modern 工具包的一部份。

ES6 的知識(shí)點(diǎn)還等待你的學(xué)習(xí):


0 人點(diǎn)贊