使用和擴充Widget（傳統UI） using-and-extending-widgets-classic-ui

要同時包括javascript代碼和樣式表，請執行以下操作：

<ui:includeClientLib categories="<category-name1>, <category-name2>, ..."/>

where <category-nameX> 是用戶端程式庫的名稱。

僅包含javascript程式碼：

<ui:includeClientLib js="<category-name>"/>

完整對話方塊( full 節點):它顯示一個包含3個頁簽的窗口，每個頁簽都包含2個文本欄位。

「單一面板」對話方塊( singlepanel 節點):它會顯示一個包含1個標籤的視窗，其中包含2個文字欄位。

「多面板」對話框( multipanel 節點):其顯示與「完整」對話方塊相同，但建置方式不同。

設計對話方塊( design 節點):它顯示一個包含2個頁簽的窗口。 第一個頁簽具有文本欄位、下拉菜單和可折疊的文本區域。 第二個頁簽具有一個欄位集，其中包含4個文本欄位，另一個可折疊欄位集，其中包含2個文本欄位。

由節點定義：節點類型= cq:Dialog, xtype = dialog.

顯示3個頁簽(節點類型= cq:Panel)。

每個索引標籤有2個文字欄位(節點類型= cq:Widget, xtype = textfield)。

由節點定義：

/apps/extjstraining/components/dialogbasics/full

會以JSON格式呈現，方法是要求：

http://localhost:4502/apps/extjstraining/components/dialogbasics/full.-1.json

顯示1個頁簽(節點類型= cq:Dialog, xtype = panel)

索引標籤有2個文字欄位(節點類型= cq:Widget, xtype = textfield)

由節點定義：

/apps/extjstraining/components/dialogbasics/singlepanel

會透過要求：

http://localhost:4502/apps/extjstraining/components/dialogbasics/singlepanel.-1.json

優於 完整對話方塊 就是需要的配置較少。

建議使用：顯示資訊或只有幾個欄位的簡單對話框。

由節點定義(節點類型= cq:Dialog, xtype = tabpanel)。

顯示3個頁簽(節點類型= cq:Panel)。

每個索引標籤有2個文字欄位(節點類型= cq:Widget, xtype = textfield)。

由節點定義：

/apps/extjstraining/components/dialogbasics/multipanel

會透過要求：

http://localhost:4502/apps/extjstraining/components/dialogbasics/multipanel.-1.json

優於 完整對話方塊 就是它有簡化的結構。

建議使用：對話框。

由節點定義(節點類型= cq:Dialog, xtype = dialog)。

顯示2個頁簽(節點類型= cq:Panel)。

第一個索引標籤具有 dialogfieldset 帶有 textfield 和 selection 包含3個選項的介面工具集和可折疊 dialogfieldset 帶 textarea 介面工具集。

第二個索引標籤具有 dialogfieldset 4件小工具 textfield 小工具和可折疊 dialogfieldset 2 textfield 小工具。

由節點定義：

/apps/extjstraining/components/dialogbasics/rich

會透過要求：

http://localhost:4502/apps/extjstraining/components/dialogbasics/rich.-1.json

由節點定義(節點類型= cq:Dialog, xtype = dialog)。

顯示2個頁簽(節點類型= cq:Panel):1選擇頁簽，第2個頁簽取決於第1個頁簽（3個選項）中的選擇。

有3個可選頁簽(節點類型= cq:Panel)，每個欄位都有2個文字欄位(節點類型= cq:Widget, xtype = textfield)。 一次只會顯示一個選用索引標籤。

由 switchtabs 節點位於：

/apps/extjstraining/components/dynamicdialogs/switchtabs

會透過要求：

http://localhost:4502/apps/extjstraining/components/dynamicdialogs/switchtabs.-1.json

對話框節點具有「 beforeshow"在顯示對話框之前隱藏所有可選頁簽的偵聽器：

beforeshow="function(dialog){Ejst.x2.manageTabs(dialog.items.get(0));}"

dialog.items.get(0) 獲取包含「選擇」面板和3個可選面板的表。

此 Ejst.x2 物件是在 exercises.js 檔案位置：

/apps/extjstraining/clientlib/js/exercises.js

在 Ejst.x2.manageTabs() 方法，作為 index 為–1時，會隱藏所有可選索引標籤（從1到3）。

選擇頁簽有2個監聽器：一個在載入對話框時顯示選定頁簽(" loadcontent" event)，以及變更選取項目時顯示所選索引標籤的索引標籤(" selectionchanged「事件):

loadcontent="function(field,rec,path){Ejst.x2.showTab(field);}"

selectionchanged="function(field,value){Ejst.x2.showTab(field);}"

在 Ejst.x2.showTab() 方法：

field.findParentByType('tabpanel') 獲取包含所有頁簽( field 代表選取介面工具集)

field.getValue() 獲取選取項的值，例如：tab2

Ejst.x2.manageTabs() 顯示所選頁簽。

每個可選頁簽都有一個監聽器，它隱藏「 render"事件：

render="function(tab){Ejst.x2.hideTab(tab);}"

在 Ejst.x2.hideTab() 方法：

tabPanel 是包含所有標籤的表格面板

index 是可選頁簽的索引

tabPanel.hideTabStripItem(index) 隱藏索引標籤

由節點定義(節點類型= cq:Dialog, xtype = dialog)。

顯示1個表格介面工具集(節點類型= cq:Widget, xtype = tabpanel)，具有1個面板(節點類型= cq:Panel)

面板具有smartfile介面工具集(節點類型= cq:Widget, xtype = smartfile)和擁有者介面工具集(節點類型= cq:Widget, xtype = ownerdraw)

由 arbitrary 節點位於：

/apps/extjstraining/components/dynamicdialogs/arbitrary

會透過要求：

http://localhost:4502/apps/extjstraining/components/dynamicdialogs/arbitrary.-1.json

所有權繪製小部件具有「 loadcontent"在載入內容時顯示包含元件的頁面和smartfile介面工具集引用的資產資訊的偵聽器：

loadcontent="function(field,rec,path){Ejst.x2.showInfo(field,rec,path);}"

field 是使用ownerdraw對象設定的

path 是以元件的內容路徑設定(例如：/content/geometrixx/en/products/triangle/ui-tutorial/jcr:content/par/dynamicdialogs)

此 Ejst.x2 物件是在 exercises.js 檔案位置：

/apps/extjstraining/clientlib/js/exercises.js

在 Ejst.x2.showInfo() 方法：

pagePath 是包含元件的頁面路徑

pageInfo 以json格式代表頁面屬性

reference 是參考資產的路徑

metadata 以json格式表示資產的中繼資料

ownerdraw.getEl().update(html); 在對話方塊中顯示已建立的html

由節點定義(節點類型= cq:Dialog, xtype = dialog)。

顯示1個表格介面工具集(節點類型= cq:Widget, xtype = tabpanel)，具有1個面板(節點類型= cq:Panel)。

此面板具有選取/核取方塊Widget(節點類型= cq:Widget, xtype = selection, type = checkbox)和可折疊的對話欄位集widget(節點類型= cq:Widget, xtype = dialogfieldset)，預設為隱藏，包含2個文字欄位小工具(節點類型= cq:Widget, xtype = textfield)。

由 togglefields 節點位於：

/apps/extjstraining/components/dynamicdialogs/togglefields

會透過要求：

http://localhost:4502/apps/extjstraining/components/dynamicdialogs/togglefields.-1.json

「選擇」頁簽有2個監聽器：顯示內容載入時的dialogfieldset的對話欄位集(" loadcontent" event)，以及在更改選項時顯示對話框欄位集(" selectionchanged「事件):

loadcontent="function(field,rec,path){Ejst.x2.toggleFieldSet(field);}"

selectionchanged="function(field,value){Ejst.x2.toggleFieldSet(field);}"

此 Ejst.x2 物件是在 exercises.js 檔案位置：

/apps/extjstraining/clientlib/js/exercises.js

在 Ejst.x2.toggleFieldSet() 方法：

• box 是選取物件
• panel 是包含選取項目和dialogfieldset小工具的面板
• fieldSet 是dialogfieldset對象
• show 是選取項目的值（true或false）
• 基於' show'是否顯示dialogfieldset

多欄位對話方塊( multifield 節點)顯示一個包含一個頁簽的窗口。 索引標籤具有自訂的多欄位介面工具集，其中包含兩個欄位：一個下拉式功能表，其中包含兩個選項和一個文字欄位。 因為是以現成可用的為基礎 multifield 介面工具集（只有一個文本欄位），它具有 multifield 介面工具集。

樹瀏覽對話框( treebrowse 節點)顯示一個窗口，其中一個頁簽包含路徑瀏覽小工具：按一下箭頭時，會向上開啟一個窗口，您可以在其中瀏覽層次並選擇項目。 然後，項目的路徑會新增至路徑欄位，並在對話方塊關閉時持續保存。

RTF編輯器外掛程式對話方塊( rteplugin 節點)，將自訂按鈕新增至RTF編輯器，以將一些自訂文字插入主要文字。 它包含 richtext 介面工具集(RTE)和自訂功能的介面工具集（透過RTE外掛程式機制新增）。

由節點定義(節點類型= cq:Dialog, xtype = dialog)。

顯示1個表格介面工具集(節點類型= cq:Widget, xtype = tabpanel)包含面板(節點類型= cq:Widget, xtype = panel)。

面板具有 multifield widget（節點類型） cq:Widget, xtype = multifield)。

此 multifield 介面工具集的欄位設定(節點類型= nt:unstructured, xtype = ejstcustom, optionsProvider = Ejst.x3.provideOptions)，此變數以自訂xtype '為基礎 ejstcustom':

• ' fieldconfig'是 CQ.form.MultiField 物件。

• ' optionsProvider'是 ejstcustom 介面工具集。 已使用 Ejst.x3.provideOptions 定義於 exercises.js at:

  /apps/extjstraining/clientlib/js/exercises.js

  和會傳回2個選項。

由 multifield 節點位於：

/apps/extjstraining/components/customwidgets/multifield

會透過要求：

http://localhost:4502/apps/extjstraining/components/customwidgets/multifield.-1.json

是Javascript物件，稱為 Ejst.CustomWidget.

定義於 CustomWidget.js javascript檔案：

/apps/extjstraining/clientlib/js/CustomWidget.js

將 CQ.form.CompositeField 介面工具集。

有3個欄位： hiddenField （文本欄位）, allowField (ComboBox)和 otherField （文本欄位）

覆寫 CQ.Ext.Component#initComponent 若要新增3個欄位：

• allowField 是 CQ.form.Selection 「select」類型的對象。 optionsProvider是Selection對象的配置，在對話框中定義的CustomWidget的optionsProvider配置已實例化
• otherField 是 CQ.Ext.form.TextField 物件

覆寫方法 setValue, getValue 和 getRawValue of CQ.form.CompositeField 若要以下格式設定及擷取CustomWidget的值：

<allowField value>/<otherField value>, e.g.: 'Bla1/hello'。

將自身註冊為「 ejstcustom' xtype:

CQ.Ext.reg('ejstcustom', Ejst.CustomWidget);

由節點定義(節點類型= cq:Dialog, xtype = dialog)。

顯示1個表格介面工具集(節點類型= cq:Widget, xtype = tabpanel)包含面板(節點類型= cq:Widget, xtype = panel)。

面板具有自訂Widget(節點類型= cq:Widget, xtype = ejstbrowse)

由 treebrowse 節點位於：

/apps/extjstraining/components/customwidgets/treebrowse

會透過要求：

http://localhost:4502/apps/extjstraining/components/customwidgets/treebrowse.-1.json

是Javascript物件，稱為 Ejst.CustomWidget.

定義於 CustomBrowseField.js javascript檔案：

/apps/extjstraining/clientlib/js/CustomBrowseField.js

延伸 CQ.Ext.form.TriggerField.

定義名為的瀏覽窗口 browseWindow.

覆寫 CQ.Ext.form.TriggerField 按一下箭頭時顯示瀏覽窗口。

定義 CQ.Ext.tree.TreePanel 物件：

• 它會呼叫註冊於的servlet以取得其資料 /bin/wcm/siteadmin/tree.json.
• 其根為「 apps/extjstraining」。

定義 window 對象(CQ.Ext.Window):

• 根據預先定義的面板。
• 有 確定 按鈕，設定所選路徑的值並隱藏面板。

窗戶固定在 路徑 欄位。

所選路徑將從瀏覽欄位傳遞到上的窗口 show 事件。

將自身註冊為「 ejstbrowse' xtype:

CQ.Ext.reg('ejstbrowse', Ejst.CustomBrowseField);

由rtplugin節點定義：

/apps/extjstraining/components/customwidgets/rteplugin

會透過要求：

http://localhost:4502/apps/extjstraining/components/customwidgets/rteplugin.-1.json

此 rtePlugins 節點具有子節點 inserttext (節點類型= nt:unstructured)，以外掛程式命名。 其屬性稱為 features，定義RTE可使用的外掛程式功能。

是Javascript物件，稱為 Ejst.InsertTextPlugin.

定義於 InsertTextPlugin.js javascript檔案：

/apps/extjstraining/clientlib/js/InsertTextPlugin.js

將 CQ.form.rte.plugins.Plugin 物件。

下列方法會定義 CQ.form.rte.plugins.Plugin 物件，且在實作外掛程式中遭覆寫：

• getFeatures() 會傳回外掛程式可用之所有功能的陣列。
• initializeUI() 將新按鈕添加到RTE工具欄。
• notifyPluginConfig() 當按鈕暫留時顯示標題和文字。
• execute() 按一下按鈕並執行外掛程式動作時，會呼叫：它顯示一個窗口，用於定義要包括的文本。

insertText() 使用對應的對話框對象插入文本 Ejst.InsertTextPlugin.Dialog （請參閱之後）。

executeInsertText() 由呼叫 apply() 對話方塊的方法，會在 確定 按鈕。

將自身註冊為「 inserttext'插件：

CQ.form.rte.plugins.PluginRegistry.register("inserttext", Ejst.InsertTextPlugin);

the Ejst.InsertTextPlugin.Dialog object定義按一下外掛程式按鈕時開啟的對話方塊。 對話方塊由面板、表單、文字欄位和2個按鈕(確定 和 取消)。

定義於：

/apps/extjstraining/components/treeoverview

其對話框用於設定窗口的大小，以及固定/取消固定窗口（請參閱下面的詳細資訊）。

從儲存庫中檢索寬度、高度和停靠屬性。

顯示樹概述資料格式的一些文本。

在javascript標籤之間，將視窗邏輯嵌入元件jsp中。

定義於：

apps/extjstraining/components/treeoverview/content.jsp

定義 tree 對象，方法是嘗試從頁中檢索樹窗口。

如果顯示樹的窗口不存在， treePanel (CQ.Ext.tree.TreePanel)已建立：

• treePanel 包含用於建立視窗的資料。

• 通過調用在註冊的servlet來檢索資料：

  /bin/wcm/siteadmin/tree.json

此 beforeload 偵聽器確保已載入點擊的節點。

此 root 對象設定路徑 apps/extjstraining 作為樹根。

tree (CQ.Ext.Window)，則會根據預先定義 treePanel，及顯示為：

tree.show();

如果窗口已存在，則根據從儲存庫檢索到的寬度、高度和停靠屬性顯示該窗口。

顯示1個頁簽，其中包含2個欄位，用於設定樹概覽窗口的大小（寬度和高度），以及1個欄位用於固定/取消固定窗口

由節點定義(節點類型= cq:Dialog, xtype = panel)。

面板具有大小欄位小部件(節點類型= cq:Widget, xtype = sizefield)和選取介面工具集(節點類型= cq:Widget, xtype = selection, type = radio)，包含2個選項(true/false)

由對話方塊節點在下列位置定義：

/apps/extjstraining/components/treeoverview/dialog

會透過要求：

http://localhost:4502/apps/extjstraining/components/treeoverview/dialog.-1.json

顯示如下：

定義於：

/apps/extjstraining/components/gridoverview

其對話框用於設定窗口的大小，以及固定/取消固定窗口。

從儲存庫中檢索寬度、高度和停靠屬性。

顯示一些文本作為網格概述資料格式的簡介。

參考定義GridPanel對象的Javascript代碼：

<script type="text/javascript" src="/apps/extjstraining/components/gridoverview/defaultgrid.js"></script>

defaultgrid.js將一些靜態資料定義為GridPanel對象的基礎。

在javascript標籤之間嵌入javascript代碼，該標籤定義使用GridPanel對象的窗口對象。

定義於：

apps/extjstraining/components/gridoverview/content.jsp

定義 grid 物件，方法是嘗試從頁面擷取視窗元件：

var grid = CQ.Ext.getCmp("<%= node.getName() %>-grid");

若 grid 不存在，a CQ.Ext.grid.GridPanel 對象( gridPanel)的定義方式為呼叫 getGridPanel() 方法（請參閱下方）。 此方法定義於 defaultgrid.js.

grid 是 CQ.Ext.Window物件，會根據預先定義的GridPanel顯示： grid.show();

若 grid 已存在，則會根據從儲存庫檢索到的寬度、高度和停靠屬性來顯示。

myData 是靜態資料的陣列，格式為5欄4列的表格。

store 是 CQ.Ext.data.Store 使用的對象 myData.

store 已載入記憶體中：

store.load();

gridPanel 是 CQ.Ext.grid.GridPanel 使用的對象 store:

• 欄寬隨時會重新比例：

  forceFit: true

• 一次只能選取一列：

  singleSelect:true

reader 是 CQ.Ext.data.JsonReader 為3欄以json格式讀取servlet回應的物件。

cm 是 CQ.Ext.grid.ColumnModel 3欄的物件。

「測試」欄儲存格可依使用編輯器定義的方式加以編輯：

editor: new CQ.Ext.form.TextField({})

欄可排序：

cm.defaultSortable = true;

store 是 CQ.Ext.data.GroupingStore 物件：

• 它會呼叫註冊於「 」的servlet以取得其資料 /bin/querybuilder.json"，其中幾個參數用於篩選查詢
• 其基礎為 reader預先定義
• 表格會根據​ jcr:path ​按升序列

gridPanel 是 CQ.Ext.grid.EditorGridPanel 可編輯的物件：

• 其基礎為預先定義 store 和列模型 cm

• 一次只能選取一列：

  sm: new CQ.Ext.grid.RowSelectionModel({singleSelect:true})

• the afteredit 接聽程式會在「測試 ​已編輯「 」列：

  • 屬性' test「jcr:path「 」欄是在儲存庫中使用儲存格的值設定
  • 如果POST成功，則會將值新增至 store 對象，否則它被拒絕