使用和擴充Widget(Classic UI)

Adobe Experience Manager的網頁介面使用AJAX和其他現代瀏覽器技術，讓作者直接在網頁上編輯和格式化內容。

Adobe Experience Manager(AEM)使用ExtJS Widget程式庫，提供高度精美的使用者介面元素，可跨所有最重要的瀏覽器運作，並允許建立案頭等級的UI體驗。

這些Widget包含在AEM中，而且除了AEM本身使用外，還可供任何使用AEM建立的網站使用。

如需AEM中所有可用介面工具集的完整參考，請參閱介面工具集API檔案或現有xtypes](/docs/experience-manager-64/sites-developing/xtypes.html?lang=zh-Hant)清單。 [此外，在Sencha網站（架構的擁有者）上，也提供許多說明如何使用ExtJS架構的範例。

本頁提供如何使用和擴充Widget的深入資訊。 它首先說明如何在頁面中包含用戶端程式碼。 然後，它說明已建立的一些範例元件，以說明其基本用途和擴充功能。 這些元件可在​Package Share​上的​Using ExtJS Widgets​套件中使用。

此套件包含下列範例：

• 使 用現成可用的Widget建立基本對話方塊。
• 使用 現成可用的Widget和自訂的Javascript邏輯建立動態對話方塊。
• 以自訂Widget為基礎的對話方塊。
• 樹面板在給定路徑下顯示JCR樹。
• 格線面板以表格格式顯示資料。

在頁面中包含用戶端代碼

客戶端的javascript和樣式表代碼應放置在客戶端庫中。

要建立客戶端庫：

1. 使用以下屬性在/apps/<project>下建立節點：

       name="clientlib"
       jcr:mixinTypes="[mix:lockable]"
       jcr:primaryType="cq:ClientLibraryFolder" 
       sling:resourceType="widgets/clientlib" 
       categories="[<category-name>]" 
       dependencies="[cq.widgets]"
   

   注意

   注意：<category-name>是自訂資料庫的名稱(例如"cq.extjtranting")，並用於將程式庫包含在頁面上。

2. 在clientlib下面建立css和js資料夾(nt:folder)。

3. 在clientlib下建立css.txt和js.txt檔案(nt:files)。 這些。txt檔案會列出程式庫所包含的檔案。

4. 編輯js.txt:它需要從' #base=js'開始，後面接著CQ客戶端庫服務要聚合的檔案清單，例如：

   #base=js
    components.js
    exercises.js
    CustomWidget.js
    CustomBrowseField.js
    InsertTextPlugin.js
   

5. 編輯css.txt:它需要從' #base=css'開始，後面接著CQ客戶端庫服務要聚合的檔案清單，例如：

   #base=css
    components.css
   

6. 在js資料夾下方，放置屬於程式庫的javascript檔案。

7. 在css資料夾下方，放置.css檔案和css檔案所使用的資源(例如my_icon.png)。

要在頁面元件jsp中包含客戶端庫，請：

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

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

  其中<category-nameX>是客戶端庫的名稱。

• 若要僅包含javascript程式碼：

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

如需詳細資訊，請參閱<ui:includeClientLib>標籤的說明。

在某些情況下，用戶端程式庫只能在作者模式下使用，而且應在發佈模式中排除。 具體實現如下：

    if (WCMMode.fromRequest(request) != WCMMode.DISABLED) {
        %><ui:includeClientLib categories="cq.collab.blog"/><%
    }

開始使用範例

若要遵循本頁的教學課程，請在本機AEM例項中安裝名為​使用ExtJS Widgets​的套件，並建立包含元件的範例頁面。 若要這麼做：

1. 在您的AEM例項中，從「套件共用」下載名為「使用ExtJS Widgets(v01)的套件並安裝此套件。​它會在儲存庫中建立/apps下的extjstraining項目。

2. 將包含指令碼(js)和樣式表(css)的用戶端程式庫包含在geometrixx頁面jsp的head標籤中，因為您會將範例元件包含在​Geometrixx​分支的新頁面中：

   在​CRXDE Lite​中，開啟檔案/apps/geometrixx/components/page/headlibs.jsp並將cq.extjstraining類別新增至現有的<ui:includeClientLib>標籤，如下所示：

   %><ui:includeClientLib categories="apps.geometrixx-main, cq.extjstraining"/><%

3. 在/content/geometrixx/en/products下方的​Geometrixx​分支中建立新頁面，並呼叫​使用ExtJS Widgets。

4. 進入設計模式，並將名為​「使用ExtJS Widgets​的群組所有元件新增至Geometrixx的設計

5. 返回編輯模式：「使用ExtJS介面工具集」群組​的元件可在Sidekick中使用。

基本對話框

對話框通常用於編輯內容，但也只能顯示資訊。 檢視完整對話方塊的簡單方式，是存取其json格式的表示法。 若要這麼做，請將您的瀏覽器指向：

http://localhost:4502/<path-to-dialog>.-1.json

Sidekick中​使用ExtJS Widgets​群組的第一個元件稱為​1。 Dialog Basics​並包含4個基本對話方塊，這些對話方塊是使用現成可用的Widget建立，而不需自訂的Javascript邏輯。 對話方塊儲存在/apps/extjstraining/components/dialogbasics下方。 基本對話框包括：

• 完整對話框（full節點）:它顯示一個包含3個頁籤的窗口，每個頁籤具有2個文本欄位。

• 「單面板」對話框（singlepanel節點）:它顯示一個包含1個頁籤的窗口，其中包含2個文本欄位。

• 多面板對話框（multipanel節點）:其顯示與「完整」對話框相同，但其構建方式不同。

• 設計對話框（design節點）:它顯示一個包含2個頁籤的窗口。 第一個標籤具有文字欄位、下拉式選單和可收合的文字區域。 第二個標籤有一個欄位集，其中包含4個文本欄位，另一個可折疊的欄位集，其中包含2個文本欄位。

包含​1。 範例頁中的Dialog Basics​元件：

1. 添加​1。 從 Sidekick 的「使用ExtJS Widgets」標籤中，將Dialog Basics 元件傳送至範例頁面。

2. 元件顯示標題、部分文本和​PROPERTIES​連結：按一下連結可顯示儲存在儲存庫中的段落的屬性。 再按一下連結以隱藏屬性。

元件顯示如下：

範例1:完整對話框

Full​對話方塊會顯示一個視窗，其中包含三個標籤，每個標籤包含兩個文字欄位。 它是​Dialog Basics​元件的預設對話框。 其特點是：

• 由節點定義：節點類型= 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

對話方塊顯示如下：

範例2:單面板對話框

「單一面板」​對話方塊會顯示一個視窗，其中有一個標籤包含兩個文字欄位。 其特點是：

• 顯示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

• 與​Full Dialog​相比，其優勢之一是所需的配置更少。

• 建議使用：，以取得顯示資訊或只有幾個欄位的簡單對話方塊。

要使用「單一面板」對話框：

1. 將​Dialog Basics​元件的對話框替換為​Single Panel​對話框：

   1. 在​CRXDE Lite​中，刪除節點：/apps/extjstraining/components/dialogbasics/dialog
   2. 按一下​保存所有​保存更改。
   3. 複製節點：/apps/extjstraining/components/dialogbasics/singlepanel
   4. 將複製的節點貼上到下面：/apps/extjstraining/components/dialogbasics
   5. 選擇節點：/apps/extjstraining/components/dialogbasics/Copy of singlepanel並將其重新命名為dialog。

2. 編輯元件：對話方塊顯示如下：

範例3:多面板對話框

多面板​對話框的顯示與​完整​對話框的顯示相同，但其構建方式不同。 其特點是：

• 由節點定義（節點類型= 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

• 與​Full Dialog​相比，其優點之一是其結構簡化。

• 建議使用：對話框。

要使用「多面板」對話框：

1. 將​Dialog Basics​元件的對話框替換為​Multi Panel​對話框：

   按照Example 2中說明的步驟操作：單面板對話框

2. 編輯元件：對話方塊顯示如下：

範例4:豐富對話框

Rich​對話方塊會顯示一個包含兩個標籤的視窗。 第一個標籤具有文字欄位、下拉式選單和可收合的文字區域。 第二個頁籤具有一個欄位集，其中包含四個文本欄位和一個可折疊的欄位集，其中包含兩個文本欄位。 其特點是：

• 由節點定義（節點類型= cq:Dialog, xtype = dialog）。

• 顯示2個頁籤（節點類型= cq:Panel）。

• 第一個頁籤具有dialogfieldset介面工具集（帶有textfield）和selection介面工具集（帶有3個選項），以及帶有textarea介面工具集的可折疊dialogfieldset。

• 第二個標籤具有dialogfieldset介面工具集（4個textfield介面工具集）和可折疊dialogfieldset介面工具集（2個textfield介面工具集）。

• 由節點定義：

  /apps/extjstraining/components/dialogbasics/rich

• 請求：

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

要使用​Rich​對話框：

1. 將​Dialog Basics​元件的對話框替換為​Rich​對話框：

   按照Example 2中說明的步驟操作：單面板對話框

2. 編輯元件：對話方塊顯示如下：

動態對話框

Sidekick中​使用ExtJS Widgets​群組的第二個元件稱為​2。 動態對話方塊​並包含三個動態對話方塊，這些對話方塊是使用現成可用的Widget建立，而​則使用自訂的javascript邏輯。 對話方塊儲存在/apps/extjstraining/components/dynamicdialogs下方。 動態對話框包括：

• 交換機頁籤對話框（switchtabs節點）:它顯示一個包含兩個頁籤的窗口。 第一個標籤有一個頁籤選項，其中包含三個選項：當選取選項時，會顯示與選項相關的標籤。 第二個標籤有兩個文字欄位。
• 任意對話框（arbitrary節點）:它會顯示一個含有一個標籤的視窗。 此標籤有一個可拖放或上傳資產的欄位，以及一個欄位，其中顯示有關包含頁面的資訊，以及參考資產的資訊。
• 切換欄位對話框（togglefield節點）:它會顯示一個含有一個標籤的視窗。 該頁籤具有複選框：勾選時，會顯示包含兩個文字欄位的欄位集。

包含​2。 範例頁面上的動態對話框​元件：

1. 添加​2。 從 Sidekick 的「使用ExtJS Widgets」標籤中，動態對話方塊​元件至範例頁面。

2. 元件顯示標題、部分文本和​PROPERTIES​連結：按一下以顯示儲存在儲存庫中的段落的屬性。 再按一下以隱藏屬性。

元件顯示如下：

範例1:交換機頁籤對話框

交換機頁籤​對話框顯示一個帶有兩個頁籤的窗口。 第一個標籤有一個頁籤選項，其中包含三個選項：當選取選項時，會顯示與選項相關的標籤。 第二個標籤有兩個文字欄位。

其主要特點是：

• 由節點定義（節點類型= 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

邏輯是透過事件接聽程式和javascript程式碼實作，如下所示：

• 對話框節點具有" 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，所有可選頁籤都隱藏（i從1到3）。

• 選擇頁籤有2個偵聽程式：一個在載入對話框時顯示選定頁籤（" loadcontent"事件），另一個在更改選擇時顯示選定頁籤（" 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) 隱藏標籤

其顯示如下：

範例2:任意對話框

對話方塊通常會顯示基礎元件的內容。 此處介紹的對話方塊稱為​Arbitary​對話方塊，會從不同的元件提取內容。

任意​對話框顯示一個帶有一個頁籤的窗口。 此標籤包含兩個欄位：一個要拖放或上傳資產，另一個要顯示包含頁面的相關資訊，而另一個要顯示包含頁面的相關資訊（如果已參考）。

其主要特點是：

• 由節點定義（節點類型= cq:Dialog, xtype = dialog）。

• 顯示1個面板構件（節點類型= cq:Widget, xtype = tabpanel）和1個面板（節點類型= cq:Panel）

• 此面板具有smartfile Widget（節點類型= cq:Widget, xtype = smartfile）和ownerdraw Widget（節點類型= cq:Widget, xtype = ownerdraw）

• 由arbitrary節點定義，位於：

  /apps/extjstraining/components/dynamicdialogs/arbitrary

• 請求：

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

邏輯是透過事件接聽程式和javascript程式碼實作，如下所示：

• ownerdraw Widget有一個" loadcontent"偵聽器，它顯示包含元件的頁面和smartfile Widget在載入內容時引用的資產的相關資訊：

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

  field 與ownerdraw對象一起設定

  path 是與元件的內容路徑一起設定(例如：/content/geometrixx/tw/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

要使用​任意​對話框：

1. 將​動態對話框​元件的對話框替換為​任意​對話框：

   按照Example 2中說明的步驟操作：單面板對話框

2. 編輯元件：對話方塊顯示如下：

範例3:切換欄位對話方塊

切換欄位​對話方塊會顯示一個含有一個標籤的視窗。 該頁籤具有複選框：勾選時，會顯示包含兩個文字欄位的欄位集。

其主要特點是：

• 由節點定義（節點類型= cq:Dialog, xtype = dialog）。

• 顯示1個面板構件（節點類型= cq:Widget, xtype = tabpanel）和1個面板（節點類型= cq:Panel）。

• 面板具有選擇／複選框構件（節點類型= cq:Widget, xtype = selection，類型= checkbox）和可折疊的對話框欄位集構件（節點類型= 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

邏輯是透過事件接聽程式和javascript程式碼實作，如下所示：

• 選擇頁籤有2個偵聽程式：一個顯示載入內容時的對話框欄位集（" loadcontent"事件），另一個顯示更改選擇時的對話框欄位集（" 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 是包含選取範圍和對話欄位集Widget的面板
  • fieldSet 是對話框欄位集對象
  • show 是選取範圍的值（true或false）
  • 根據「 show」顯示或不顯示對話框欄位集

要使用​切換欄位​對話框：

1. 將​動態對話框​元件的對話框替換為​切換欄位​對話框：

   按照Example 2中說明的步驟操作：單面板對話框

2. 編輯元件：對話方塊顯示如下：

自訂介面工具集

AEM隨附的現成可用Widget應涵蓋大部分的使用案例。 不過，有時可能需要建立自訂介面工具集，以涵蓋專案特定需求。 您可以延伸現有的Widget來建立自訂Widget。 為協助您開始進行此類自訂，使用ExtJS Widgets​套件包含三個使用三個不同自訂Widget的對話方塊：

• 「多欄位」對話框（multifield節點）顯示一個帶有一個頁籤的窗口。 此標籤有一個自訂的多欄位介面工具集，其中包含兩個欄位：下拉式選單（含兩個選項）和文字欄位。 由於它以現成可用的multifield介面工具集（僅包含文字欄位）為基礎，因此具有multifield介面工具集的所有功能。

• 「樹瀏覽」對話框（treebrowse節點）顯示一個窗口，其中一個頁籤包含路徑瀏覽構件：按一下箭頭時，將開啟一個窗口，您可以在其中瀏覽層次並選擇一個項目。 然後項目的路徑會新增至路徑欄位，並在對話方塊關閉時持續存在。

• 「富格文本編輯器插件」對話框（rteplugin節點），它向富格文本編輯器添加一個自定義按鈕，以將一些自定義文本插入主文本。 它由richtext Widget(RTE)和通過RTE插件機制添加的自定義功能組成。

自訂Widget和外掛程式都包含在名為​3的元件中。​使用ExtJS Widgets 套件的自訂Widget。 要將此元件包含到示例頁中：

1. 添加​3。 自訂Widgets​元件至​Sidekick​中「使用ExtJS Widgets 」標籤的範例頁面。

2. 元件顯示標題和部分文本，並在按一下​PROPERTIES​連結時，顯示儲存在儲存庫中的段落的屬性。 再按一下會隱藏屬性。

   元件顯示如下：

範例1:自訂多欄位介面工具集

自訂多欄位​介面工具集對話方塊會顯示一個含有一個標籤的視窗。 此標籤有自訂的多欄位介面工具集，與標準的多欄位介面工具集不同，它有兩個欄位：下拉式選單（含兩個選項）和文字欄位。

自訂多欄位​介面工具集對話方塊：

• 由節點定義（節點類型= cq:Dialog, xtype = dialog）。

• 顯示1個包含面板（節點類型= cq:Widget, xtype = tabpanel）的面板構件（節點類型= cq:Widget, xtype = panel）。

• 此面板具有multifield介面工具集（節點類型= cq:Widget, xtype = multifield）。

• multifield介面工具集具有基於自定義xtype ' ejstcustom'的欄位配置（節點類型= nt:unstructured, xtype = ejstcustom, optionsProvider = Ejst.x3.provideOptions）:

  • 「 fieldconfig」是CQ.form.MultiField對象的配置選項。

  • ' optionsProvider'是ejstcustom介面工具集的配置。 它以Ejst.x3.provideOptions方法設定，定義於exercises.js，網址為：

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

    並傳回2個選項。

• 由multifield節點定義，位於：

  /apps/extjstraining/components/customwidgets/multifield

• 請求：

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

自訂多欄位介面工具集(xtype = ejstcustom):

• 是名為Ejst.CustomWidget的javascript物件。

• 定義於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. Selectionobject，類型為'select'。optionsProvider是Selection物件的設定，會以對話方塊中定義之自訂介面工具集的optionsProvider設定實例化
  • otherField 是 CQ.Ext.form. TextFieldobject

• 覆寫的setValue、getValue和getRawValue方法CQ.form.CompositeField，以設定並擷取格式為：

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

• 將自身註冊為' ejstcustom' xtype:

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

自訂多欄位​介面工具集對話方塊顯示如下：

範例2:自訂樹狀瀏覽介面工具集

基於自定義​樹狀瀏覽​構件的對話框顯示一個窗口，其中一個頁籤包含自定義路徑瀏覽構件：按一下箭頭時，將開啟一個窗口，您可以在其中瀏覽層次並選擇一個項目。 然後項目的路徑會新增至路徑欄位，並在對話方塊關閉時持續存在。

自訂樹狀瀏覽對話框：

• 由節點定義（節點類型= cq:Dialog, xtype = dialog）。

• 顯示1個包含面板（節點類型= cq:Widget, xtype = tabpanel）的面板構件（節點類型= cq:Widget, xtype = panel）。

• 面板具有自訂介面工具集（節點類型= cq:Widget, xtype = ejstbrowse）

• 由treebrowse節點定義，位於：

  /apps/extjstraining/components/customwidgets/treebrowse

• 請求：

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

自訂樹狀瀏覽介面工具集(xtype = ejstbrowse):

• 是名為Ejst.CustomWidget的javascript物件。

• 定義於CustomBrowseField.js javascript檔案中：

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

• 延伸CQ.Ext.form.TriggerField。

• 定義名為browseWindow的瀏覽窗口。

• 覆寫CQ.Ext.form.TriggerField以在按下箭頭時顯示瀏覽視窗。

• 定義CQ.Ext.tree.TreePanel對象：

  • 它通過調用在/bin/wcm/siteadmin/tree.json註冊的servlet來獲取其資料。
  • 其根為" apps/extjstraining"。

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

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

• 窗口錨定在​Path​欄位下。

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

• 將自身註冊為' ejstbrowse' xtype:

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

要使用基於​自定義樹狀瀏覽​構件的對話框：

1. 將​自訂介面工具集​元件的對話方塊取代為​自訂樹狀瀏覽​對話方塊：

   按照Example 2中說明的步驟操作：單面板對話框

2. 編輯元件：對話方塊顯示如下：

範例3:富格文本編輯器(RTE)插件

基於​Rich Text Editor(RTE)Plug-in​的對話框是基於Rich Text Editor的對話框，它具有一個自定義按鈕，可在方括弧內插入一些自定義文本。 自訂文字可由某些伺服器端邏輯來解析（在此範例中未實作），例如新增某些在指定路徑上定義的文字：

基於​RTE plugin​的對話框：

• 由retplugin節點定義，位於：

  /apps/extjstraining/components/customwidgets/rteplugin

• 請求：

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

• rtePlugins節點具有以插件命名的子節點inserttext（節點類型= nt:unstructured）。 它有一個名為features的屬性，用於定義RTE可用的插件功能。

RTE外掛程式：

• 是名為Ejst.InsertTextPlugin的javascript物件。

• 定義於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' plugin:

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

• Ejst.InsertTextPlugin.Dialog物件定義在按下外掛程式按鈕時開啟的對話方塊。 該對話框由面板、表單、文本欄位和2個按鈕（OK​和​Cancel）組成。

要使用基於​Rich Text Editor(RTE)Plug-in​的對話框：

1. 將​自訂介面工具集​元件的對話方塊取代為以​RTE外掛程式​為基礎的對話方塊：

   按照Example 2中說明的步驟操作：單面板對話框

2. 編輯元件。

3. 按一下右邊的最後一個圖示（四個箭頭的圖示）。 輸入路徑，然後按一下​OK:

   路徑顯示在括弧([])中。

4. 按一下​確定​以關閉Rich Text Editor。

基於​Rich Text Editor(RTE)Plug-in​的對話框顯示如下：

樹概述

現成可用的CQ.Ext.tree.TreePanel物件提供樹狀結構資料的樹狀結構UI表示。 使用ExtJS Widgets​套件中包含的樹概述元件顯示了如何使用TreePanel對象在給定路徑下顯示JCR樹。 窗口本身可以與塢站連接／斷開塢站連接。 在此示例中，窗口邏輯嵌入到<script></script>標籤之間的元件jsp中。

要將​樹概述​元件包含到示例頁中：

1. 添加​4。 樹概述​元件到​Sidekick​中「使用ExtJS Widgets 」標籤中的示例頁。

2. 元件將顯示：

   • 標題，含有文字
   • a 屬性​連結：按一下以顯示儲存在儲存庫中的段落的屬性。 再按一下以隱藏屬性。
   • 一個浮動窗口，其中包含儲存庫的樹形表示，可以展開。

元件顯示如下：

樹概述元件：

• 定義於：

  /apps/extjstraining/components/treeoverview

• 其對話框用於設定窗口的大小和將窗口固定／取消固定（請參閱下面的詳細資訊）。

元件jsp:

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

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

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

• 定義於：

  apps/extjstraining/components/treeoverview/content.jsp

元件jsp中嵌入的javascript代碼：

• 通過嘗試從頁面檢索樹窗口來定義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

• 顯示如下：

格線概述

「格線面板」以表格式表示行和列的資料。 它由以下幾部分組成：

• 商店：保存資料記錄（行）的模型。
• 欄模型：專欄的構成。
• 檢視：封裝了用戶介面。
• 選擇模型：選擇行為。

使用ExtJS Widgets​套件中包含的格線概述元件顯示如何以表格格式顯示資料：

• 範例1使用靜態資料。
• 示例2使用從儲存庫檢索到的資料。

要將網格概述元件包括到示例頁中，請執行以下操作：

1. 添加​5。 格線概述​元件至範例頁面，範例頁面位於​Sidekick​的「使用ExtJS Widgets 」標籤中。

2. 元件將顯示：

   • 帶有文字的標題
   • a 屬性​連結：按一下以顯示儲存在儲存庫中的段落的屬性。 再按一下以隱藏屬性。
   • 包含表格格式的資料的浮動窗口。

元件顯示如下：

範例1:預設網格

在其現成版本中，格線概述​元件以表格格式顯示一個包含靜態資料的窗口。 在此示例中，邏輯以兩種方式嵌入到元件jsp中：

• 一般邏輯定義於<script></script>標籤之間
• 特定邏輯可在個別的。js檔案中使用，並在jsp中連結至。 此設定可讓您在兩個邏輯（靜態／動態）之間輕鬆切換，方法是加上所需<script>標籤的註解。

網格概述元件：

• 定義於：

  /apps/extjstraining/components/gridoverview

• 其對話框用於設定窗口的大小，並將窗口固定／取消固定。

元件jsp:

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

• 顯示部分文字作為網格概述資料格式的簡介。

• 參考定義GridPanel物件的Javascript程式碼：

  <script type="text/javascript" src="/apps/extjstraining/components/gridoverview/defaultgrid.js?lang=zh-Hant"></script>

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

• 在javascript標籤之間內嵌javascript程式碼，此標籤定義使用GridPanel物件的Window物件。

• 定義於：

  apps/extjstraining/components/gridoverview/content.jsp

元件jsp中嵌入的javascript代碼：

• 通過嘗試從頁面檢索窗口元件來定義grid對象：

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

• 如果grid不存在，則CQ.Ext.grid.GridPanel物件(gridPanel)是透過呼叫getGridPanel()方法來定義的（請參閱下文）。 此方法在defaultgrid.js中定義。

• grid 是基於 CQ.Ext.Window預定義的GridPanel的對象，並顯示： grid.show();

• 如果grid已存在，則根據從儲存庫檢索到的寬度、高度和塢站連接屬性來顯示該屬性。

元件jsp中引用的javascript檔案(defaultgrid.js)定義了getGridPanel()方法，該方法由嵌入在JSP中的指令碼調用，並基於靜態資料返回CQ.Ext.grid.GridPanel對象。 邏輯如下：

• myData 是一組靜態資料，格式為5列和4行的表。

• store 是一 CQ.Ext.data.Store 個使用的對象 myData。

• store 已載入到記憶體中：

  store.load();

• gridPanel 是一 CQ.Ext.grid.GridPanel 個對象，它使用 store:

  • 欄寬會隨時重新比例：

    forceFit: true

  • 一次只能選取一行：

    singleSelect:true

範例2:參考搜索網格

安裝軟體包時，Grid Overview​元件的content.jsp將顯示基於靜態資料的網格。 可以修改元件以顯示具有以下特徵的網格：

• 有三欄。
• 基於通過調用servlet從儲存庫檢索到的資料。
• 可編輯最後一列的儲存格。 值保存在由第一列中顯示的路徑所定義的節點下的test屬性中。

如前一節所述，窗口對象通過調用defaultgrid.js檔案/apps/extjstraining/components/gridoverview/defaultgrid.js中定義的getGridPanel()方法來獲取其CQ.Ext.grid.GridPanel對象。 格線概述​元件為getGridPanel()方法提供了不同的實現，該方法在referencesearch.js檔案中定義為/apps/extjstraining/components/gridoverview/referencesearch.js。 切換元件jsp中引用的。js檔案後，網格將基於從儲存庫中檢索的資料。

切換元件jsp中引用的。js檔案：

1. 在​CRXDE Lite​中，在元件的content.jsp檔案中，對包含defaultgrid.js檔案的行加上註解，使其如下所示：

   <!-- script type="text/javascript" src="/apps/extjstraining/components/gridoverview/defaultgrid.js?lang=zh-Hant"></script-->

2. 從包含referencesearch.js檔案的行中刪除注釋，使其如下所示：

   <script type="text/javascript" src="/apps/extjstraining/components/gridoverview/referencesearch.js?lang=zh-Hant"></script>

3. 儲存變更。

4. 重新整理範例頁面。

元件顯示如下：

元件jsp(referencesearch.js)中引用的javascript代碼定義了從元件jsp調用的getGridPanel()方法，並基於從儲存庫動態檢索的資料返回CQ.Ext.grid.GridPanel對象。 referencesearch.js中的邏輯將一些動態資料定義為GridPanel的基礎：

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

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

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

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

• 這些列是可排序的：

  cm.defaultSortable = true;

• store 是對 CQ.Ext.data.GroupingStore 像：

  • 它通過調用註冊於" /bin/querybuilder.json"的servlet來獲取其資料，其中有一些參數用於過濾查詢
  • 它以reader為基礎，預先定義
  • 表按照「jcr:path」列的升序排序

• gridPanel 是可 CQ.Ext.grid.EditorGridPanel 以編輯的對象：

  • 它基於預定義的store和列模型cm

  • 一次只能選取一行：

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

  • afteredit偵聽器確保在"Test"列中的單元格被編輯後：

    • 在儲存庫中設定由「jcr:path」列定義的路徑上節點的屬性「 test」，其值為單元格
    • 如果POST成功，則該值將添加到store對象中，否則將被拒絕