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

若要同時包含JavaScript程式碼和樣式表：
<ui:includeClientLib categories="<category-name1>, <category-name2>, ..."/>
位置 <category-nameX> 是使用者端程式庫的名稱。

若只要包含JavaScript程式碼：
<ui:includeClientLib js="<category-name>"/>

由節點定義(節點型別= cq:Dialog， xtype = [dialog](/docs/experience-manager-65/content/implementing/developing/components/classic-ui-components/xtypes.md#dialog))。

顯示一個 tabpanel Widget (節點型別= cq:Widget， xtype = [tabpanel](/docs/experience-manager-65/content/implementing/developing/components/classic-ui-components/xtypes.md#tabpanel))內含面板(節點型別= cq:Widget， xtype = [panel](/docs/experience-manager-65/content/implementing/developing/components/classic-ui-components/xtypes.md#panel))。

面板有 multifield Widget (節點型別= cq:Widget， xtype = [multifield](/docs/experience-manager-65/content/implementing/developing/components/classic-ui-components/xtypes.md#multifield))。

此 multifield widget有fieldconfig (節點型別= nt:unstructured， xtype = ejstcustom，optionsProvider = Ejst.x3.provideOptions)為基礎，根據自訂xtype ``ejstcustom`'：

• 『 fieldconfig'是 [CQ.form.MultiField](https://developer.adobe.com/experience-manager/reference-materials/6-5/widgets-api/index.html?class=CQ.form.MultiField) 物件。

• 『 optionsProvider'是 ejstcustom Widget. 它設定為 Ejst.x3.provideOptions 在中定義的方法 exercises.js 於：

  /apps/extjstraining/clientlib/js/exercises.js
  和會傳回兩個選項。

由以下定義 multifield 節點位置：
/apps/extjstraining/components/customwidgets/multifield

透過請求以json格式轉譯：
https://localhost:4502/apps/extjstraining/components/customwidgets/multifield.-1.json

是名為的JavaScript物件 Ejst.CustomWidget

在中定義 CustomWidget.js JavaScript檔案位於：
/apps/extjstraining/clientlib/js/CustomWidget.js

擴充 [CQ.form.CompositeField](https://developer.adobe.com/experience-manager/reference-materials/6-5/widgets-api/index.html?class=CQ.form.CompositeField) Widget.

有三個欄位： hiddenField （文字欄位）， allowField (ComboBox)，和 otherField （文字欄位）

覆寫 CQ.Ext.Component#initComponent 新增三個欄位：

• allowField 是 CQ.form.Selection 「選取」型別的物件。 optionsProvider是Selection物件的組態，它是使用對話方塊中定義的CustomWidget的optionsProvider組態具現化
• otherField 是 CQ.Ext.form.TextField 物件

覆蓋 setValue方法 、 getValue和 getRawValue CQ.form.CompositeField 以設定和檢索 CustomWidget 的值，內容如下格式：
<allowField value>/<otherField value>, for example: 'Bla1/hello'。

將自身註冊為' ejstcustom' xtype：
CQ.Ext.reg('ejstcustom', Ejst.CustomWidget);

是名為的JavaScript物件 Ejst.CustomWidget

在中定義 CustomBrowseField.js JavaScript檔案位於：
/apps/extjstraining/clientlib/js/CustomBrowseField.js

延伸 [CQ.Ext.form.TriggerField](https://developer.adobe.com/experience-manager/reference-materials/6-5/widgets-api/index.html?class=CQ.Ext.form.TriggerField).

定義瀏覽視窗，稱為 browseWindow.

覆寫 [CQ.Ext.form.TriggerField](https://developer.adobe.com/experience-manager/reference-materials/6-5/widgets-api/index.html?class=CQ.Ext.form.TriggerField)#onTriggerClick 在按一下箭頭時顯示瀏覽視窗。

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

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

定義 window 物件( [CQ.Ext.Window](https://developer.adobe.com/experience-manager/reference-materials/6-5/widgets-api/index.html?class=CQ.Ext.Window))：

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

視窗錨定在 路徑 欄位。

選取的路徑會從瀏覽欄位傳遞至上的視窗 show 事件。

將自身註冊為' ejstbrowse' xtype：
CQ.Ext.reg('ejstbrowse', Ejst.CustomBrowseField);

是名為的JavaScript物件 Ejst.InsertTextPlugin

在中定義 InsertTextPlugin.js JavaScript檔案位於：
/apps/extjstraining/clientlib/js/InsertTextPlugin.js

擴充 [CQ.form.rte.plugins.Plugin](https://developer.adobe.com/experience-manager/reference-materials/6-5/widgets-api/index.html?class=CQ.form.rte.plugins.Plugin) 物件。

下列方法可定義 [CQ.form.rte.plugins.Plugin](https://developer.adobe.com/experience-manager/reference-materials/6-5/widgets-api/index.html?class=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);

此 Ejst.InsertTextPlugin.Dialog 物件會定義按一下外掛程式按鈕時開啟的對話方塊。 此對話方塊包含面板、表單、文字欄位和兩個按鈕(確定 和 取消)。

定義於：
/apps/extjstraining/components/treeoverview

對話方塊可讓您設定視窗的大小，並固定或取消固定視窗（請參閱下列詳細資訊）。

定義 tree 物件，嘗試從頁面擷取樹狀結構視窗。

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

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

• 系統會呼叫在下列位置註冊的servlet來擷取資料：

  /bin/wcm/siteadmin/tree.json

此 beforeload 監聽器會確定已載入選取的節點。

此 root 物件設定路徑 apps/extjstraining 作為樹狀根目錄。

tree ( [CQ.Ext.Window](https://developer.adobe.com/experience-manager/reference-materials/6-5/widgets-api/index.html?class=CQ.Ext.Window))是根據預先定義的 treePanel，和的顯示方式：
tree.show();

如果視窗存在，視窗會根據從存放庫擷取的寬度、高度和停駐屬性顯示。

myData 是一系列靜態資料，格式為五欄四列的表格。

store 是 CQ.Ext.data.Store 使用中的物件 myData.

store 已載入記憶體中：
store.load();

gridPanel 是 [CQ.Ext.grid.GridPanel](https://developer.adobe.com/experience-manager/reference-materials/6-5/widgets-api/index.html?class=CQ.Ext.grid.GridPanel) 使用中的物件 store：

• 欄寬一律會按比例分配：

  forceFit: true

• 一次只能選取一列：

  singleSelect:true

reader 是 [CQ.Ext.data.JsonReader](https://developer.adobe.com/experience-manager/reference-materials/6-5/widgets-api/index.html?class=CQ.Ext.data.JsonReader)讀取三欄json格式之servlet回應的物件。

cm 是 [CQ.Ext.grid.ColumnModel](https://developer.adobe.com/experience-manager/reference-materials/6-5/widgets-api/index.html?class=CQ.Ext.grid.ColumnModel) 物件，共三欄。
「測試」欄儲存格可以編輯，因為它們是使用編輯器定義的：
editor: new [CQ.Ext.form.TextField](https://developer.adobe.com/experience-manager/reference-materials/6-5/widgets-api/index.html?class=CQ.Ext.form.TextField)({})

欄可排序：
cm.defaultSortable = true;

store 是 [CQ.Ext.data.GroupingStore](https://developer.adobe.com/experience-manager/reference-materials/6-5/widgets-api/index.html?class=CQ.Ext.data.GroupingStore) 物件：

• 它會透過呼叫在「」註冊的servlet來取得其資料 /bin/querybuilder.json"，以及一些用於篩選查詢的引數
• 它基於 reader，預先定義
• 表格是根據『jcr：path'欄的遞增順序

gridPanel 是 [CQ.Ext.grid.EditorGridPanel](https://developer.adobe.com/experience-manager/reference-materials/6-5/widgets-api/index.html?class=CQ.Ext.grid.EditorGridPanel) 可以編輯的物件：

• 其基礎為預先定義的 store 在欄模型上 cm

• 一次只能選取一列：

  sm: new [CQ.Ext.grid.RowSelectionModel](https://developer.adobe.com/experience-manager/reference-materials/6-5/widgets-api/index.html?class=CQ.Ext.grid.RowSelectionModel)({singleSelect:true})

• 此 afteredit 接聽程式會確定在「測試「 」欄已編輯：

  • 屬性' test「」所定義路徑下節點的「jcr：path「欄」是使用儲存格的值在存放庫中設定的
  • 如果POST成功，則會將該值新增至 store 物件，否則會遭到拒絕