【翻譯】Sencha Ext JS 6.7 的新增功能(節選)

原文地址:https://www.sencha.com/blog/announcing-sencha-ext-js-6-7-and-tooling-ga/?utm_source=snceb&utm_medium=email&utm_campaign=sncextjs&utm_content=020719-sncextjs-6-7-release
Ext JS 6.7終於拼接上了Classic工具包的最後一環,如鎖定表格、多選組件等,除了不支持IE和RTL外,Modern工具包的功能與Classic的功能已經沒有區別了。不過,暫時沒發現社區版已經更新到6.7。

網格篩選器

Ext JS 6.7現代包的網格提供了網格篩選功能,可以讓最終用戶顯示滿足指定條件的網格記錄。除了文本篩選器之外,網格篩選器還支持以下網格篩選器:

  • 文本網格篩選器可將結果限制爲與指定文本匹配的值
  • 布爾網格篩選器可將結果限制爲與true或false匹配的值
  • 日期網格篩選器可將結果限制爲與指定日期約束匹配的值
  • 數字網格篩選器可將結果限制爲與指定數字相匹配的值

Kitchensink提供了一個顯示所有這些網格篩選插件的示例,而且還包含了在全局範圍內管理這些篩選器的能力。

網格篩選器## 網格鎖定

Ext JS 6.7現代網格提供了網格鎖定功能,可以讓最終用戶實現類似於Excel的“凍結窗格”的鎖定列功能。鎖定網格提供了一個列菜單功能,可以讓用戶鎖定左側區域或右側區域的網格列,鎖定網格列菜單會顯示當前的鎖定狀態。

網格鎖定## 碎屑(chip)/標籤(tags)

Ext JS 6.7提供了緊湊的材料碎屑,可以讓最終用戶體驗到諸如選擇、過濾內容和觸發操作的任務。碎屑組件在視圖內可以顯示縮略圖和文本,可以在桌面或移動應用程序中如以下代碼哪樣通過配置displayTpl來提供不同的碎屑顯示:

chipView: {
                iconField: 'avatar',
                displayField: 'name',
                platformConfig: {
                    '!phone': {
                        displayTpl: '{name} ({email})'
                    }
                }
            },

在這裏插入圖片描述

多選組合框和選擇

Ext JS 6.7提供了多選組合框,以便讓最終用戶在組合框內看到多個選擇值。一個標準的組合框是由一個標準的文本輸入字段和一個選擇字段組成的。如果editable配置項爲true,那麼用戶就可以自由的字段內輸入內容,並從下拉列表中選擇值。多選組合框還提供了“multiselect: true”選項,允許最終用戶在組合框內選擇多個值。選擇值可以使用鍵盤箭頭鍵導航,也可以使用刪除鍵刪除。

在這裏插入圖片描述

Ext JS 6.7還提供了多選字段,可以讓最終用戶在選擇字段內選擇多個值。
在這裏插入圖片描述

##拾色器

Ext JS 6.7提供了拾色器,可以讓最終用戶使用色板、表單字段或顏色選擇器來選擇顏色。顏色選擇器提供提供了選項來指定選取的顏色值使用HSVA格式還是RGB格式。

在這裏插入圖片描述

虛擬滾動器(Virtual Scroller)

Ext JS 6.7提供了一個虛擬滾動器,以便在瀏覽器的正常滾動範圍之外實現滾動。虛擬滾動主要用於所有無限的列表或網格,讓允許的行數大於瀏覽器的所允許的最大滾動範圍。

scrollable: {
        type: 'virtual',
        infinite: true  // enable MAX_SAFE_INTEGER scroll
    },

在這裏插入圖片描述

Ext JS 6.7 示例

Ext JS 6.7 提供一些使用開放工具(open tooling)創建的示例。通過Ext JS 6.7和開放工具可以快速啓用這些應用程序:

  • Full Stack Employee Directory (Coworkee) application – Github Repo
  • Full Stack Progressive Web App (PWA) Application – Github Repo
  • Modern Tutorial Sample Application – Github Repo
  • Quick Start Sample Application – Github Repo
發表評論
所有評論
還沒有人評論,想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章