使用和擴展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和樣式表代碼應放置在客戶端庫中。

要建立客戶端庫：

使用以下屬性在/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")，並用於在頁面上包含程式庫。

在clientlib下建立css和js資料夾(nt:folder)。
在clientlib下建立css.txt和js.txt檔案(nt:files)。這些.txt檔案會列出程式庫中包含的檔案。
編輯js.txt:它需要從「#base=js」開始，後面接著CQ用戶端程式庫服務要匯總的檔案清單，例如：
```
#base=js
 components.js
 exercises.js
 CustomWidget.js
 CustomBrowseField.js
 InsertTextPlugin.js
```
編輯css.txt:它需要從「#base=css」開始，後面接著CQ用戶端程式庫服務要匯總的檔案清單，例如：
```
#base=css
 components.css
```
在js資料夾下方，放置屬於程式庫的javascript檔案。
在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的套件，並建立將包含元件的範例頁面。若要這麼做：

在您的AEM例項中，從Package Share下載名為Using ExtJS Widget(v01)的套件並安裝該套件。它會在存放庫的/apps下建立專案extjstraining。
將包含指令碼(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"/><%
在/content/geometrixx/en/products下方的Geometrixx分支中建立新頁面，並呼叫它使用ExtJS介面工具集。
進入設計模式，將名為Using ExtJS Widgets的組的所有元件添加到Geometrixx設計中
在編輯模式中返回：組使用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。從 Sidekick 的「使用ExtJS Widget」標籤，將Dialog Basics 元件導向至範例頁面。
元件顯示標題、部分文本和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
與完整對話相比，優勢之一在於需要的配置較少。
建議使用：顯示資訊或只有幾個欄位的簡單對話框。

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

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

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
與完整對話相比，優勢之一在於它具有簡化的結構。
建議使用：對話框。

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

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

請依照範例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對話框，請執行以下操作：

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

請依照範例2所述的步驟操作：單一面板對話方塊
編輯元件：對話方塊顯示如下：

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

動態對話框

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

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

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

新增2。從 Sidekick 的「使用ExtJS Widget」標籤中使用ExtJS Widget範例頁面的動態對話元件。
元件顯示標題、部分文本和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

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

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

請依照範例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

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

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

請依照範例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。若要將此元件包含至範例頁面：

新增3。從 Sidekick 的「使用ExtJS Widget」標籤的使用ExtJS Widget元件到範例頁面。
元件顯示標題和一些文本，並在按一下PROPERTIES連結時，顯示儲存在儲存庫中的段落的屬性。再按一下會隱藏屬性。

元件顯示如下：

chlimage_1-137

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

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

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

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

自定義樹瀏覽對話框：

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

要使用基於自定義樹瀏覽介面工具集的對話框，請執行以下操作：

將自訂介面工具集元件的對話框替換為自訂樹瀏覽對話框：

請依照範例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)插件的對話框，請執行以下操作：

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

請依照範例2所述的步驟操作：單一面板對話方塊
編輯元件。
按一下右側的最後一個圖示（四個箭頭的圖示）。輸入路徑，然後按一下OK:

路徑顯示在括弧內([])。
按一下OK以關閉RTF編輯器。

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

screen_shot_2012-02-01at120254pm

注意

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

樹概覽

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

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

新增4。從 Sidekick 中的使用ExtJS Widget 標籤到範例頁面的樹狀結構概述元件。
元件隨即顯示：
- 標題，帶有文字
- 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使用從存放庫擷取的資料。

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

新增5。從 Sidekick 中的使用ExtJS Widget 標籤到範例頁面的格線概述元件。
元件隨即顯示：
- 帶有文本的標題
- 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檔案：

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


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

<script type="text/javascript" src="/apps/extjstraining/components/gridoverview/referencesearch.js"></script>
儲存變更。
重新整理範例頁面。

元件顯示如下：

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

Business.Adobe.com 資源

Automated Onboarding Targeted Content Mobile Forms Theme Editor Web Content Management Content Management

全新的改善搜尋

使用和擴展Widget（傳統UI）

在頁面中包含用戶端代碼

範例快速入門

基本對話框

範例1:完整對話框

範例2:單面板對話框

範例3:多面板對話框

範例4:富對話框

動態對話框

範例1:切換頁簽對話框

範例2:任意對話框

範例3:切換欄位對話框

自定義小部件

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

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

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

樹概覽

網格概述

範例1:預設網格

範例2:參考搜索網格

Business.Adobe.com 資源

本頁內容

檢視下一個:

學習

說明文件

社群

技術支援

資源

Adobe 帳戶

Adobe