Ext.js - 問答

Ext JS 代表擴充套件的 JavaScript。它是一個 JavaScript 框架，用於開發豐富的基於 Web 的桌面應用程式使用者介面。

它是 Sencha 的產品，擴充套件自 YUI（Yahoo 使用者介面）。

這些是在 HTML 頁面中包含以執行 Ext JS 程式碼的主要檔案：

• Ext-all.js
• Ext-all.css

• 可定製的 UI 小部件，包含豐富的 UI 元素，例如網格、透視表、表單、圖表、樹。
• 新版本與舊版本的程式碼相容性。
• 靈活的佈局管理器有助於組織跨多個瀏覽器、裝置和螢幕尺寸的資料和內容顯示。
• 高階資料包將 UI 小部件與資料層解耦。資料包允許使用高功能模型在客戶端收集資料，從而實現排序和過濾等功能。
• 它是協議無關的，可以訪問來自任何後端的資料來源。
• 可定製的主題 Ext JS 小部件提供多個開箱即用的主題，這些主題在各個平臺上保持一致。

• 簡化跨桌面、平板電腦和智慧手機的跨平臺開發——適用於現代瀏覽器和舊版瀏覽器。

• 透過整合到企業開發環境中的 IDE 外掛來提高開發團隊的生產力。

• 降低 Web 應用程式開發成本。

• 使團隊能夠建立具有引人注目的使用者體驗的應用程式。

• 它有一套小部件，使 UI 功能強大且易於使用。

• 它遵循 MVC 架構，因此程式碼高度可讀。

• 庫的大小很大，大約 500 KB，這使得初始載入時間更長，並使應用程式變慢。

• HTML 充滿了

  標記，這使得它複雜且難以除錯。

• 根據通用公共許可證策略，它對開源應用程式是免費的，但對商業應用程式是收費的。

• 有時，即使載入簡單的東西也需要幾行程式碼，而使用純 HTML 或 jQuery 更簡單。

• 需要經驗豐富的開發者才能開發 Ext JS 應用程式。

Ext JS 支援跨瀏覽器相容性，它支援所有主要的瀏覽器，例如：

• IE 6 及更高版本
• Firefox 3.6 及更高版本
• Chrome 10 及更高版本
• Safari 4 及更高版本
• Opera 11 及更高版本

Ext JS 4+ 支援 MVC（模型檢視控制器）架構。從 Ext JS 5 開始，它也開始支援 MVVM（模型檢視檢視模型）。

Ext JS 6 是 Ext JS 的最新版本，其主要優勢在於它可以用於桌面應用程式和移動應用程式。基本上，它是 Ext JS（桌面應用程式）和 Sencha Touch（移動應用程式）的合併。

Ext JS 是一個 JavaScript 框架，因此要開始使用它，您應該具備 HTML 和 JS 的預備知識（不需要專家級水平，但應該具備基本的理解）。然後需要理解基礎知識，所以請花時間逐步學習。

這兩個框架非常不同，我們可以將 Ext JS 和 jQuery UI 進行比較，因為 Ext JS 是一個功能齊全的富 UI 框架。但 Ext JS 仍然比 jQuery UI 擁有更多元件。

Ext JS 1.1

Ext JS 的第一個版本由 Jack Slocum 於 2006 年開發。它是一組實用程式類，它是 YUI 的擴充套件。他將該庫命名為 YUI-ext。

Ext JS 2.0

Ext JS 2.0 版本於 2007 年釋出。此版本具有用於桌面應用程式的新 API 文件，但功能有限。此版本與 Ext JS 的先前版本不向後相容。

Ext JS 3.0

Ext JS 3.0 版本於 2009 年釋出。此版本添加了圖表和列表檢視等新功能，但以犧牲速度為代價。它向後相容 2.0 版本。

Ext JS 4.0

在釋出 Ext JS 3 之後，Ext JS 的開發人員面臨著提高速度的主要挑戰。Ext JS 4.0 版本於 2011 年釋出。它具有完全修改的結構，遵循 MVC 架構，並提供速度更快的應用程式。

Ext JS 5.0

Ext JS 5.0 版本於 2014 年釋出。此版本的主要變化是將 MVC 架構更改為 MVVM 架構。它包括能夠在支援觸控的裝置上構建桌面應用程式、雙向資料繫結、響應式佈局和許多其他功能。

Ext JS 6.0

Ext JS 6 合併了 Ext JS（用於桌面應用程式）和 Sencha Touch（用於移動應用程式）框架。

Ext JS 具有各種 UI 元件，一些最常用的元件是：

• 網格
• 表單
• 訊息框
• 進度條
• 工具提示
• 視窗
• HTML 編輯器
• 圖表

xType 定義了 Ext JS UI 元件的型別，該型別在元件呈現期間確定。例如 textField、Numeric、button 等。

這是驗證型別，可以輕鬆自定義。Ext JS 提供的一些 vType 為：

alphanumText - 如果輸入的文字包含除字母或數字以外的任何符號，則返回 false。

emailText - 如果文字不是有效的電子郵件地址，則返回 false。

是的，Ext JS 可以與 Ajax 整合。實現方式如下：假設在某個文字框失去焦點後，它需要從伺服器驗證資料，為此，我們可以在文字框的 onblur/onchange 事件中進行 Ajax 呼叫，以檢查文字框中輸入的資料是否在伺服器/資料庫中存在。

是的，Ext JS 可以與其他伺服器端框架整合，例如 Java、.NET、Ruby on Rails、PHP、ColdFusion 等。

Ext JS 可以實現於任何流行的整合開發環境 (IDE) 上，例如 Eclipse、Aptana、Sublime、Webstrom 等。

以下是在 Ext JS 中訪問 DOM 元素的幾種方法：

• Ext.get()
• Ext.getElementById()
• Ext.fly()
• Ext.select()

MVVM 架構是模型檢視檢視模型。在 MVVM 架構中，MVC 的控制器由 ViewModel 替換。

ViewModel - 它基本上是檢視和模型之間變化的中介。它將資料從模型繫結到檢視。同時，它不與檢視直接互動，它只瞭解模型。

Ext.getCmp('buttonId').on('click', function(){
// statement to perform logic
});

Ext.onReady() 是在 DOM 完全載入後呼叫的第一個方法，這樣，當指令碼執行時，您想要引用的任何元素都將可用。

Ext.select('div').on('click', function(){
// statement to perform logic
});

Ext JS 中的不同型別的警告框有：

• Ext.MessageBox.alert();
• Ext.MessageBox.confirm();
• Ext.MessageBox.wait();
• Ext.MessageBox.prompt();
• Ext.MessageBox.show();

Store 的基類是 Ext.data.Store

model 的基類是 Ext.data.Model

Controller 的基類是 Ext.app.controller

這些是不同的事件處理方式：

• 使用監聽器
• 稍後附加事件
• 使用自定義事件

Store.getCount() - 用於快取的記錄

Store.getTotalCount() - 用於資料庫中的總記錄數。

Store.getModifiedRecords() 方法用於獲取已修改的記錄。

Store.commitChanges() 方法用於更新儲存更改。

如果我們有網格 ID：Ext.getCmp('gridId').getStore().getAt(index);

如果我們有儲存 ID：Ext.getStore('storeId').getAt(index);

Store.load();

• Grid 的基類 - Ext.grid.GridPanel
• 表單的基類 – Ext.form.Panel
• 面板的基類 – Ext.panel.Panel
• 圖表的基類 – Ext.chart.Chart
• 樹的基類 – Ext.tree.Panel

不同型別的佈局有：

• 絕對佈局
• 手風琴佈局
• 錨點佈局
• 邊框佈局
• 自動佈局
• 水平盒子佈局
• 垂直盒子佈局
• 卡片佈局（選項卡面板）
• 卡片佈局（嚮導）
• 列布局
• 填充佈局
• 表格佈局

這可以使用 pagingToolbar() 完成，如下所示：

new Ext.PagingToolbar ({
   pageSize: 25,
   store: store,
   displayInfo: true,
   displayMsg: 'Displaying topics {0} - {1} of {2}',
   emptyMsg: 'No topics to display',
});
// trigger the data store load
store.load({params:{start:0, limit:25}});

dockedItems: [{
   xtype: 'toolbar',
   items: [{ 
      id:'buttonId', 
      handler: function() { 
         Ext.Msg.alert('title','alertMsg');
      });
   }]
}]	

Loadmask 用於透過向用戶顯示載入（或自定義訊息）來阻止任何其他操作，直到資料呈現到網格為止。Loadmask: true; 是在資料呈現到網格時顯示 loadmask 的屬性。

渲染器 (Renderer) 用於操作從儲存中獲取的資料，根據某些條件顯示已處理的資料。它是一個列屬性，可以用作：

renderer: function(value, metadata, record, rowIndex, colIndex, store){
// logic to perform
} 

Ext.getCmp('id').getValue();

Hidden: true;

Sortable: true; 預設值為 true。

grid.getStore().on ({
   beforeload : function(store) {
      // perform some operation
   },
   load : {
      fn : function(store) {
         //perform some operation
      },
      scope : this
   }
   store.load();
});

Ext JS 6 具有工具包 (toolkit) 包，可以使用它包含兩個框架（Ext JS 和 Sencha Touch）的視覺元素。

可以新增為：

'toolkit': 'classic', // 或 'modern'

如果工具包為 classic，則包含 Ext JS 桌面應用程式框架。

如果工具包為 modern，則包含 Sencha Touch 移動應用程式框架。