原文:What’s New in Ext JS 5.0.1

今天,我們很高興的宣佈Ext JS 5.0.1釋出了!此維護版本基於Sencha社群的反饋做了一些改進。

下面讓我們來了解一下這些改變。

可訪問性

與Ext JS 4.2.2一起,我們釋出了“ext-aria”包來為可訪問性提供了改進的支援(如WAI-ARIA 1.0標準中所描述的)。對於提供工具來讓提高應用程式的可訪問性來說,這是很重要的一步,我們還從測試合作伙伴和早期採用者的反饋意見中學到了一些東西。

隨著Ext JS 5的釋出,我們希望能綜合反饋意見並提供一個更好的解決方案。我可以很高興的宣佈,對於Ext JS 5.0.1,對於可訪問性的支援已經改進了許多。很大程度上,這是因為我們已經將焦點和鍵盤導航的支援從“ext-aria”移動到了框架本身。

焦點

在Ext JS 5.0.1,我們大大的改進了焦點的內部處理方式以便更好的符合可訪問性標準。核心元件(如按鈕、標籤、表單欄位和網格)現在可以完全提供一個清晰、視覺指示的焦點。這是可訪問性應用程式的關鍵需求。為了讓你可以完全控制這些新的視覺方法的東西,我們已經新增了幾個新的Sass變數和混入(mixin)引數。

鍵盤導航

之前版本的Ext JS會使用Ext.FocusManager來輔助管理焦點。雖然該類仍然存在,但它不再是推薦的方法。相反,所有元件現在都帶有“focusable”屬性,可用來管理DOM屬性tabIndex。將該屬性設定為true的任何元件都可通過單擊或鍵盤來接收焦點。

當這些可獲得焦點的元件被放置在某些容器(如工具欄)時,容器會提供箭頭鍵盤導航並可管理容器內的哪一些條目可以接收焦點。

還有許多與可訪問性、焦點和鍵盤導航改進有關的資訊,要想詳細瞭解這些,可以閱讀可訪問性指南

檢視模型

在很大程度上,已經看到了開發人員是如何迅速的拿起檢視模型和資料繫結。除了一般的bug修復外,還有一些值得注意的改進是與繫結有關的。

選擇繫結

許多開發人員已經要求我們在哪些支援選擇的元件上擴充套件繫結屬性的能力(如組合框、網格、樹、Breadcrumbs等等),以便支援選擇。

現在,在同步的時候,可以使用繫結來保持這些元件的選擇,有關這方面的詳細資訊,可參閱Kitchen Sink示例。

模型和欄位驗證

表單欄位的一項關鍵改進是,現在在更新他們的繫結屬性之前,雙向繫結會驗證值是否有效。為了實現這個,在將模型繫結到欄位的時候,表單自動現在會獲取模型的驗證並將它包含在自己的驗證裡。

在Ext JS 5.0.0,這些驗證只在第一次返回值(可能是無效的)的時候作為參考。而在Ext JS 5.0.1,終於可以放心了,因為無效值將永遠不糊返回到記錄中。

資料

在此版本,Ext.data也有一些重要的修復和改進。

TreeStore vs 節點事件

在Ext JS 5.0.0,TreeStore類被重構為派生於Ext.data.Store。然而,在此過程中,存在一個關鍵問題:TreeStore不會從根節點(Ext.data.NodeInterface)傳播事件。

對於大多數由樹節點除非的事件來說,一切如常。不過,某些節點事件在建立監聽的時候可能會與儲存事件發生衝突,如remove事件。


於這個問題,唯一安全和有效的修復是,在將所以節點事件作為TreeStore事件觸發之前,在事件前新增字首node,這意味著節點的remove事件
現在會作為TreeStore的noderemove事件觸發。在維護版本中,我們一直在努力去避免這種更改,但這實在是沒有其他辦法在不破壞任何接單監
聽或儲存監聽的情況去解決這個問題。對於這種變化造成的不便,我們深表歉意。

關聯

在Ext JS 5.0.0中,對於關聯的限制是,如果你要建立一個新記錄然後刪除該記錄,就會發現沒有清理邏輯來處理它潛在的子記錄,這可能會造成生成、建立或更新這些子記錄的操作會話,但在伺服器端卻無法處理這些操作,因為沒有父記錄不存在。

在Ext JS 5.0.1中,在移除記錄的時候,被宣告為模型之間父所有者或子所有者的reference欄位會被作為參考,當表示的是這種型別的關聯時,移除記錄將會自動去刪除他的子記錄。

例如:

    Ext.define(`App.model.Order`, {
        extend: `Ext.data.Model`,
        // ...
    }); 
    Ext.define(`App.model.OrderItem`, {
        extend: `Ext.data.Model`, 
        fields: [{
            name: `orderId`,             // Indicates that the referenced Model (Order) owns these
            // records:
            reference: { parent: `Order` }
        }]
    });

這樣,當Order被移除(標記為刪除)的時候,它的子OrderItems將同樣被移除:

 order.drop();

另外,設定父的references為null(例如,通過與父的關聯儲存刪除它)也可以清理這些記錄:

   order.orderItems().removeAt(0); // removed orderItem is dropped 
   order.orderItems().getAt(0).setOrder(null); // also drops this item

伺服器仍然可以負責最終的完整級聯刪除,不過上述處理需要確保客戶端永遠不會在儲存操作中引用移除的記錄。

響應配置

新的responsiveConfig是由Ext.mixin.Responsive提供的,而Ext.plugin.Responsive提供的是一些針對管理動態條件清理的靈活性。

新的responsiveFormulas允許為responsiveConfig規則新增可用屬性,例如,主控制器可以使用以下方式來發布新的屬性:

    Ext.define(`MyApp.view.main.Main`, {
        extend: `Ext.container.Container`, 
        mixins: [
            `Ext.mixin.Responsive`
        ], 
        responsiveFormulas: {
            small: `width < 600`,
            medium: `width >= 600 && width < 800`,
            large: `width >= 800`, 
            tuesday: function (context) {
                return (new Date()).getDay() === 2;
            }
        }
    });

在以上程式碼中,新的值(small等)就可以使用在其他的responsiveConfigs中。這有助於簡化應用程式的responsiveConfigs,以及在一個地方維護這些選擇。

圖表

“Sencha-charts”包也有幾個改進,如可重用的標記(箭頭、菱形等)。對於那些不使用Sencha
Cmd的初學者來說,sencha-charts包已經包含在Ext JS
5.0.1的生成包中。最顯著的改變是在文件中已經說明了如何去建立自定義圖表的主題。

圖表主題

在Ext JS 5.0.0,可以為圖表選擇附帶的幾個內建主題,不過建立自定義主題則沒有任何文件進行說明。在當前版本,已經提供了這種能力,從而你可以製作自己的調色盤和其他更多東西。

圖表的主題是一個派生於Ext.chart.theme.Base,且別名是以“chart.theme.”開頭的類,基本的主題就像以下程式碼那樣簡單:

    Ext.define(`App.chart.theme.Awesome`, {
        extend: `Ext.chart.theme.Base`, 
        singleton: true,
        alias: `chart.theme.awesome`, 
        config: {
            baseColor: `#4d7fe6`
        }
    });

這樣,就可以在圖表系列、座標軸和標記中任意使用這些惡配置了。如要了解所有選項,可閱讀有關的可用配置API。要使用新建立的主題,可以在圖表中設定theme配置項:

  theme: `awesome`

Sencha Cmd

最後但並非不重要的是,在Sencha Cmd 5.0.1中,已經擴充套件了app.json的選擇,擁有了更多的細粒度的控制來配置東西,以滿足所需,而不需要深入研究生成指令碼。

輸出

為了一窺這些有用的新控制,我們來研究下輸出物件。在某些環境中,最常見的要求是要在資料夾之外保持“標記”檔案以表明Sencha應用程式所在,例如:

    foo.php
    foo/
        app.json
        app.js

與模型不同的是,標記檔案(以上是foo.php,不過也可以是其他任何東西)是在父資料夾,在之前版本,這要求設定幾個生成屬性。在Sencha Cmd 5.0.1,可以在app.json中實現:

    {
        ...        "indexHtmlPath": "../foo.php",         "output": {
            "page": {
                "path": "../foo.php",
                "enable": false
            }
        }
    }

以上程式碼就可禁用生成步驟,以確保所有路徑都會根據父資料夾來計算好相對路徑後再重寫標記檔案。輸出物件還可以控制生成輸出方面,從啟用編譯器優化到調整微載入方面等許多東西。

打包

Cordova
和PhoneGap現在通過使用新的packager屬性可以獲得更多靈活性且易於使用。新的設定允許直接在app.json中生成指定的包
(cordova或phonegap)。結合builds物件(在Sencha Cmd
5.0.0中加入),還可以在應用程式生成是選擇是生成web的,還是iOS的,還是安卓的。

例如:

    {
        ...        "builds": {
            "web": {
                "default": true  // picked by "sencha app build" 
            },
            "ios": {
                "packager": "phonegap",
                "phonegap": {
                    "config": {
                        "platform": "ios",
                        "remote": true  // use PhoneGap Build
                    }
                }
            },
            "android": {
                "packager": "phonegap"
                "phonegap": {
                    "config": {
                        "platform": "android" // use Local Phonegap
                    }
                }
            }
        }
    }

基於以上程式碼,可以執行以下程式碼來指定生成:

  sencha app build

以上程式碼是用來生成Web生成的。現在還可以這樣進行生成:

    sencha app build ios
    sencha app build android

小結

Ext JS 5.0.1和Sencha Cmd 5.0.1提供了很多所需的重要改進。在所有這些Ext JS 5的新功能中,我們很期待的他們會在你的應用程式中發生什麼了不起的事情。下載它並試用一下,然後,在論壇裡告訴我們你的想法。

作者:Don Griffin
                                   Don
Griffin is a member of the Ext JS core team. He was an Ext JS user for 2
years before joining Sencha and has over 20 years of software
engineering experience on a broad range of platforms. His experience
includes designing web application front-ends and back-ends, native GUI
applications, network protocols and device drivers. Don’s passion is to
build world class products that people love to use.