使用和擴充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)）。

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

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

multifield Widget具有以自訂xtype ' ejstcustom'為基礎的fieldconfig （節點型別= nt:unstructured，xtype = ejstcustom，optionsProvider = Ejst.x3.provideOptions）：

• '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的設定。 它是使用定義於exercises.js中的Ejst.x3.provideOptions方法設定的：

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

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

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

是名為Ejst.CustomWidget的JavaScript物件

已在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 (Textfield)、allowField (ComboBox)和otherField (Textfield)

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

• allowField是型別為'select'的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);

是名為Ejst.CustomWidget的JavaScript物件

已在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物件：

• 它透過呼叫在/bin/wcm/siteadmin/tree.json註冊的servlet來取得其資料。
• 其根目錄為" 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);

是名為Ejst.InsertTextPlugin的JavaScript物件

已在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()顯示標題和文字。
• 按一下按鈕並執行plugin動作時會呼叫execute()：它會顯示一個視窗，用來定義要包含的文字。

insertText()使用對應的對話方塊物件Ejst.InsertTextPlugin.Dialog插入文字（請參閱後續內容）。

對話方塊的apply()方法呼叫executeInsertText()，此動作會在按一下​ 確定 ​按鈕時觸發。

將自身註冊為' 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是使用myData的CQ.Ext.data.Store物件。

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

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

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

  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)物件：

• 它會透過呼叫「/bin/querybuilder.json」上註冊的servlet來取得其資料，並使用一些用於篩選查詢的引數
• 它是以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'資料行所定義路徑之節點的屬性'test'是在儲存庫中以儲存格的值設定的
  • 如果POST成功，則會將值新增至store物件，否則會遭到拒絕