使用和擴展Widget（傳統UI）

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

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

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

如需AEM中所有可用小工具的完整參考，請參閱小工具集API檔案或現有xtypes🔗清單。 此外，在Sencha網站（該架構的擁有者）上也提供許多顯示如何使用ExtJS架構的範例。

本頁面提供如何使用和擴充Widget的相關分析。 它首先說明如何在頁面🔗中包含用戶端代碼。 接著，它會說明已建立的一些範例元件，以說明一些基本用途和擴充功能。 這些元件可在​封裝共用​的​使用ExtJS Widget​封裝中使用。

套件包含下列範例：

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

Adobe Experience Manager的傳統UI是以ExtJS 3.4.0為基礎而建置。

注意

本頁面說明傳統UI中Widget的使用方式。 Adobe建議您根據Coral UI和Granite UI運用現代化的觸控式UI。

在頁面中包含用戶端代碼

客戶端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.extjtraing")，並用於在頁面上包含程式庫。

  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 Widget​的套件，並建立將包含元件的範例頁面。 若要這麼做：

  1. 在您的AEM例項中，從Package Share下載名為​Using ExtJS Widget(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介面工具集。

  4. 進入設計模式，將名為​Using ExtJS Widgets​的組的所有元件添加到Geometrixx設計中

  5. 在編輯模式中返回：組​使用ExtJS Widget​的元件可在Sidekick中使用。

注意

本頁的範例以Geometrixx範例內容為基礎，這些內容已由We.Retail取代，不再隨AEM提供。 有關如何下載和安裝Geometrixx，請參閱文檔We.Retail Reference Implementation。

基本對話框

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

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

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

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

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

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

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

納入​1。 範例頁面中的Dialog Basics​元件：

  1. 新增​1。 從 Sidekick 的「使用ExtJS Widget」標籤，將Dialog Basics 元件導向至範例頁面。

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

元件顯示如下：

chlimage_1-135

範例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

對話方塊顯示如下：

screen_shot_2012-01-31at45411pm

範例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

  • 與​完整對話​相比，優勢之一在於需要的配置較少。

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

若要使用「單一面板」對話方塊：

  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. 編輯元件：對話方塊顯示如下：

screen_shot_2012-01-31at45952pm

範例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

  • 與​完整對話​相比，優勢之一在於它具有簡化的結構。

  • 建議使用：對話框。

要使用「多面板」對話框，請執行以下操作：

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

    請依照範例2所述的步驟操作：單一面板對話方塊

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

screen_shot_2012-01-31at50119pm

範例4:富對話框

Rich​對話框顯示一個帶有兩個頁簽的窗口。 第一個頁簽具有文本欄位、下拉菜單和可折疊的文本區域。 第二個頁簽有一個欄位集，包含四個文本欄位，一個可折疊欄位集包含兩個文本欄位。 其特點是：

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

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

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

  • 第二個頁簽具有帶4個textfield小工具的dialogfieldset小工具，以及帶2個textfield小工具的可折疊dialogfieldset。

  • 由節點定義：

    /apps/extjstraining/components/dialogbasics/rich

  • 會透過要求：

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

要使用​Rich​對話框，請執行以下操作：

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

    請依照範例2所述的步驟操作：單一面板對話方塊

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

screen_shot_2012-01-31at50429 pmscreen_shot_2012-01-31at50519pm

動態對話框

Sidekick中​使用ExtJS Widget​組的第二個元件稱為​2。 動態對話框，包括三個使用現成小工具構建的動態對話框，以及使用自定義javascript邏輯​構建的。 對話框儲存在/apps/extjstraining/components/dynamicdialogs下。 動態對話方塊為：

  • 「交換機頁簽」對話框（switchtabs節點）:它會顯示一個包含兩個索引標籤的視窗。 第一個索引標籤有一個選項選項，包含三個選項：選取選項時，會顯示與選項相關的索引標籤。 第二個索引標籤有兩個文字欄位。
  • 任意對話框（arbitrary節點）:它會顯示一個包含一個索引標籤的視窗。 索引標籤有一個欄位，可拖放或上傳資產，以及一個欄位，可顯示容納頁面和資產的相關資訊（如果參考了該頁面）。
  • 切換欄位對話框（togglefield節點）:它會顯示一個包含一個索引標籤的視窗。 索引標籤中有核取方塊：勾選此欄位時，會顯示包含兩個文字欄位的欄位集。

納入​2。 範例頁面上的動態對話方塊​元件：

  1. 新增​2。 從 Sidekick 的「使用ExtJS Widget」標籤中​使用ExtJS Widget範例頁面的動態對話​元件。

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

元件顯示如下：

chlimage_1-136

範例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，所有可選頁簽都隱藏（從1到3）。

  • 選擇頁簽有2個偵聽器：一個在載入對話框時顯示選定頁簽(" loadcontent" event)，另一個在更改選擇時顯示選定頁簽(" selectionchanged" event):

    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) 隱藏索引標籤

其顯示如下：

screen_shot_2012-02-01at114745am

範例2:任意對話框

對話方塊通常會顯示基礎元件的內容。 此處描述的對話方塊（稱為​Anvertial​對話框）從不同元件提取內容。

任意​對話框顯示一個帶有一個頁簽的窗口。 索引標籤有兩個欄位：一個用於拖放或上傳資產，一個用於顯示容納頁面和資產的相關資訊（若已參考）。

其主要特點是：

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

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

  • 該面板具有智慧檔案介面工具集（節點類型= cq:Widget, xtype = smartfile）和所有權繪圖介面工具集（節點類型= cq:Widget, xtype = ownerdraw）

  • 由arbitrary節點在下列位置定義：

    /apps/extjstraining/components/dynamicdialogs/arbitrary

  • 會透過要求：

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

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

  • ownerdraw widget具有「 loadcontent」監聽器，該監聽器顯示包含元件的頁面資訊以及載入內容時智慧檔案widget引用的資產：

    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

要使用​任意​對話框，請執行以下操作：

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

    請依照範例2所述的步驟操作：單一面板對話方塊

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

screen_shot_2012-02-01at115300am

範例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個監聽器：一個顯示載入內容時的dialogfieldset(" loadcontent" event)，另一個顯示更改選擇時的dialogfieldset(" selectionchanged" event):

    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

要使用​切換欄位​對話框，請執行以下操作：

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

    請依照範例2所述的步驟操作：單一面板對話方塊

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

screen_shot_2012-02-01at115518am

自定義小部件

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

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

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

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

自訂Widget和外掛程式包含在名為​3的元件中。​使用ExtJS Widget 套件的自訂Widget。 若要將此元件包含至範例頁面：

  1. 新增​3。 從 Sidekick 的「使用ExtJS Widget」標籤的​使用ExtJS Widget​元件到範例頁面。

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

    元件顯示如下：

chlimage_1-137

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

自訂多欄位​介面工具集對話方塊會顯示一個含有一個索引標籤的視窗。 索引標籤具有自訂的多欄位介面工具集，與具有一個欄位的標準介面工具集不同，它有兩個欄位：一個下拉式功能表，其中包含兩個選項和一個文字欄位。

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

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

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

  • 此面板具有multifield介面工具集（節點類型= 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中定義：

      /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」類型的。optionsProvider是Selection對象的配置，在對話框中定義的CustomWidget的optionsProvider配置已實例化
    • otherField 是 CQ.Ext.form. TextFieldobject

  • 覆寫CQ.form.CompositeField的方法setValue、getValue和getRawValue，以便以下格式設定和檢索CustomWidget的值：

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

  • 註冊為「 ejstcustom」xtype:

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

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

screen_shot_2012-02-01at115840am

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

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

自定義樹瀏覽對話框：

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

  • 顯示1個包含面板（節點類型= cq:Widget, xtype = tabpanel）的表板Widget（節點類型= 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

自訂樹狀瀏覽介面工具集(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. 將​自訂介面工具集​元件的對話框替換為​自訂樹瀏覽​對話框：

    請依照範例2所述的步驟操作：單一面板對話方塊

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

screen_shot_2012-02-01at120104pm

範例3:RTF編輯器(RTE)外掛程式

以​RTF編輯器(RTE)外掛程式​為基礎的對話方塊是以RTF編輯器為基礎的對話方塊，其中具有自訂按鈕，可在方括弧內插入某些自訂文字。 自訂文字可由某些伺服器端邏輯剖析（此範例中未實作），例如新增在指定路徑上定義的一些文字：

基於​RTE插件​的對話框：

  • 由rtplugin節點定義：

    /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」插件：

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

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

要使用基於​RTF編輯器(RTE)插件​的對話框，請執行以下操作：

  1. 使用​RTF編輯器(RTE)插件​基於對話框的​自定義Widget​元件的對話框替換：

    請依照範例2所述的步驟操作：單一面板對話方塊

  2. 編輯元件。

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

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

  4. 按一下​OK​以關閉RTF編輯器。

RTF編輯器(RTE)外掛程式​對話方塊顯示如下：

screen_shot_2012-02-01at120254pm

注意

此範例僅顯示如何實作邏輯的用戶端部分：然後，必須在伺服器端明確剖析預留位置([text])（例如在元件JSP中）。

樹概覽

現成可用的CQ.Ext.tree.TreePanel物件提供樹狀結構資料的樹狀結構UI表示法。 使用ExtJS Widget​套件中包含的樹概覽元件顯示如何使用TreePanel物件在指定路徑下顯示JCR樹。 窗口本身可以停靠/取消停靠。 在此示例中，窗口邏輯嵌入到<script></script>標籤之間的元件jsp中。

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

  1. 新增​4。 從 Sidekick 中的​使用ExtJS Widget 標籤到範例頁面的樹狀結構概述​元件。

  2. 元件隨即顯示：

    • 標題，帶有文字
    • a PROPERTIES​連結：按一下以顯示儲存庫中儲存的段落的屬性。 再按一下以隱藏屬性。
    • 浮動視窗，內含存放庫的樹狀表示，可展開。

元件顯示如下：

screen_shot_2012-02-01at120639pm

樹概述元件：

  • 定義於：

    /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

  • 顯示如下：

screen_shot_2012-02-01at120745pm

網格概述

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

  • 商店：保存資料記錄（列）的模型。
  • 欄模型：柱子的組成。
  • 檢視：封裝用戶介面。
  • 選取模型：選取行為。

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

  • 範例1使用靜態資料。
  • 範例2使用從存放庫擷取的資料。

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

  1. 新增​5。 從 Sidekick 中的​使用ExtJS Widget 標籤到範例頁面的格線概述​元件。

  2. 元件隨即顯示：

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

元件顯示如下：

screen_shot_2012-02-01at121109pm

範例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"></script>

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

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

  • 定義於：

    apps/extjstraining/components/gridoverview/content.jsp

元件jsp中嵌入的javascript代碼：

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

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

  • 如果grid不存在，則通過調用getGridPanel()方法來定義CQ.Ext.grid.GridPanel對象(gridPanel)（請參見下面）。 此方法在defaultgrid.js中定義。

  • grid 是以 CQ.Ext.Window預先定義的GridPanel為基礎的物件，且會顯示： grid.show();

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

元件jsp中引用的javascript檔案(defaultgrid.js)定義了由嵌入JSP中的指令碼調用的getGridPanel()方法，並基於靜態資料返回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:參考搜索網格

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

  • 有三欄。
  • 是以呼叫Servlet從存放庫擷取的資料為基礎。
  • 可以編輯最後一列的儲存格。 值會保存在test屬性中，位於由第一欄中顯示的路徑所定義的節點下方。

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

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

  1. 在元件的​CRXDE Lite​檔案的content.jsp檔案中，注釋包含defaultgrid.js檔案的行，使其如下所示：

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

  2. 從包含referencesearch.js檔案的行中移除註解，使其如下所示：

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

  3. 儲存變更。

  4. 重新整理範例頁面。

元件顯示如下：

screen_shot_2012-02-01at121429pm

元件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對象，否則它將被拒絕

本頁內容