使用和擴充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樹。
  • 格線面板以表格格式顯示資料。
注意

Adobe Experience Manager的傳統UI建立在ExtJS 3.4.0上。

注意

本頁說明傳統UI中介面工具集的使用方式。 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.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中使用。

注意

本頁的範例是以Geometrixx範例內容為基礎，此內容已不再隨AEM一起出貨，而已由We.Retail取代。 如需如何下載和安裝Geometrixx的資訊，請參閱檔案We.Retail Reference Implementation。

基本對話框

對話框通常用於編輯內容，但也只能顯示資訊。 檢視完整對話方塊的簡單方式，是存取其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​連結：按一下連結可顯示儲存在儲存庫中的段落的屬性。 再按一下連結以隱藏屬性。

元件顯示如下：

chlimage_1-133

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

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

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

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

  • 建議使用：對話框。

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

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

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

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

screen_shot_2012-01-31at50119pm

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

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

動態對話框

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

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

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

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

  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，所有可選頁籤都隱藏（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) 隱藏標籤

其顯示如下：

screen_shot_2012-02-01at114745am

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

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個偵聽程式：一個顯示載入內容時的對話框欄位集（" 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. 編輯元件：對話方塊顯示如下：

screen_shot_2012-02-01at115518am

自訂介面工具集

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​連結時，顯示儲存在儲存庫中的段落的屬性。 再按一下會隱藏屬性。

    元件顯示如下：

chlimage_1-137

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

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

screen_shot_2012-02-01at115840am

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

screen_shot_2012-02-01at120104pm

範例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​的對話框顯示如下：

screen_shot_2012-02-01at120254pm

注意

此範例僅說明如何實作邏輯的用戶端部分：然後必須在伺服器端顯式解析佔位符（例如，在元件JSP中）。]**[

樹概述

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

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

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

  2. 元件將顯示：

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

元件顯示如下：

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 Widgets​套件中包含的格線概述元件顯示如何以表格格式顯示資料：

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

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

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

  2. 元件將顯示：

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

元件顯示如下：

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物件的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"></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對象中，否則將被拒絕

本頁內容