Adobe Experience Manager的網頁型介面使用AJAX和其他現代瀏覽器技術,讓作者直接在網頁上編輯和格式化內容。
Adobe Experience Manager(AEM)使用 ExtJS widget程式庫,提供精良的使用者介面元素,可在所有最重要的瀏覽器上運作,並可建立案頭級UI體驗。
這些Widget包含在AEM中,除了供AEM本身使用外,也可供使用AEM建立的任何網站使用。
如需AEM中所有可用小工具的完整參考,請參閱 介面工具集API檔案 或 現有xtype清單. 此外,也提供許多範例,說明如何使用ExtJS架構,位於 森沙 站點,框架的所有者。
本頁面提供如何使用和擴充Widget的相關分析。 它首先描述如何 在頁面中包含用戶端代碼. 接著,它會說明已建立的一些範例元件,以說明一些基本用途和擴充功能。 這些元件可在 使用ExtJS Widget 封裝 封裝共用.
套件包含下列範例:
Adobe Experience Manager的傳統UI建置於 ExtJS 3.4.0.
本頁面說明傳統UI中Widget的使用方式。 Adobe建議您運用現代 觸控式UI 根據 Coral UI 和 Granite 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>, ..."/>
where <category-nameX>
是用戶端程式庫的名稱。
僅包含javascript程式碼:
<ui:includeClientLib js="<category-name>"/>
如需更多詳細資訊,請參閱 <ui:includeclientlib> 標籤。
在某些情況下,用戶端程式庫應僅能以製作模式使用,且應以發佈模式排除。 具體實現如下:
if (WCMMode.fromRequest(request) != WCMMode.DISABLED) {
%><ui:includeClientLib categories="cq.collab.blog"/><%
}
若要遵循本頁的教學課程,請安裝以下的套件: 使用ExtJS Widget 在本機AEM例項中,並建立要包含元件的範例頁面。 若要這麼做:
在您的AEM例項中,下載以下的套件: 使用ExtJS Widget(v01) 從「包共用」安裝包。 它會建立專案 extjstraining
low /apps
儲存庫中。
將包含指令碼(js)和樣式表(css)的用戶端程式庫包含在geometrixx頁jsp的head標籤中,因為您會將範例元件包含在的新頁面中 Geometrixx 分支:
in CRXDE Lite 開啟檔案 /apps/geometrixx/components/page/headlibs.jsp
並新增 cq.extjstraining
類別至現有 <ui:includeClientLib>
標籤,如下所示:
%><ui:includeClientLib categories="apps.geometrixx-main, cq.extjstraining"/><%
在 Geometrixx 分支 /content/geometrixx/en/products
然後叫它 使用ExtJS Widget.
進入設計模式,然後新增群組的所有元件,稱為 使用ExtJS Widget 設計Geometrixx
在編輯模式中返回:組成部分 使用ExtJS Widget 可在Sidekick中使用。
本頁的範例以Geometrixx範例內容為基礎,這些內容已由We.Retail取代,不再隨AEM提供。 請參閱檔案 We.Retail參考實作 以了解如何下載和安裝Geometrixx。
對話方塊通常用於編輯內容,但也只能顯示資訊。 檢視完整對話方塊的簡單方式,是存取其json格式的表示法。 若要這麼做,請將瀏覽器指向:
http://localhost:4502/<path-to-dialog>.-1.json
的第一個元件 使用ExtJS Widget sidekick中的群組稱為 1. 對話基本知識 和包含四個基本對話方塊,這些對話方塊是使用現成可用的Widget建置,而不使用自訂的Javascript邏輯。 對話方塊儲存於下方 /apps/extjstraining/components/dialogbasics
. 基本對話方塊為:
完整對話方塊( full
節點):它顯示一個包含3個頁簽的窗口,每個頁簽都包含2個文本欄位。
「單一面板」對話方塊( singlepanel
節點):它會顯示一個包含1個標籤的視窗,其中包含2個文字欄位。
「多面板」對話框( multipanel
節點):其顯示與「完整」對話方塊相同,但建置方式不同。
設計對話方塊( design
節點):它顯示一個包含2個頁簽的窗口。 第一個頁簽具有文本欄位、下拉菜單和可折疊的文本區域。 第二個頁簽具有一個欄位集,其中包含4個文本欄位,另一個可折疊欄位集,其中包含2個文本欄位。
納入 1. 對話基本知識 元件(在範例頁面中):
新增 1. 對話基本知識 元件至範例頁面(從 使用ExtJS Widget 標籤 Sidekick.
元件會顯示標題、部分文字和 屬性 連結:按一下連結以顯示儲存庫中儲存的段落的屬性。 再按一下連結以隱藏屬性。
元件顯示如下:
此 完整 對話框顯示一個窗口,其中包含三個頁簽,每個頁簽都包含兩個文本欄位。 這是 對話基本知識 元件。 其特點是:
由節點定義:節點類型= 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
對話方塊顯示如下:
此 單一面板 對話框顯示一個窗口,其中一個頁簽包含兩個文本欄位。 其特點是:
顯示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
優於 完整對話方塊 就是需要的配置較少。
建議使用:顯示資訊或只有幾個欄位的簡單對話框。
若要使用「單一面板」對話方塊:
取代 對話基本知識 元件 單一面板 對話框:
/apps/extjstraining/components/dialogbasics/dialog
/apps/extjstraining/components/dialogbasics/singlepanel
/apps/extjstraining/components/dialogbasics
/apps/extjstraining/components/dialogbasics/Copy of singlepanel
重新命名 dialog
.編輯元件:對話方塊顯示如下:
此 多面板 對話框的顯示與 完整 但對話的構建方式不同。 其特點是:
由節點定義(節點類型= 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
優於 完整對話方塊 就是它有簡化的結構。
建議使用:對話框。
要使用「多面板」對話框,請執行以下操作:
取代 對話基本知識 元件 多面板 對話框:
請依照 範例2:單一面板對話方塊
編輯元件:對話方塊顯示如下:
此 Rich 對話框顯示一個包含兩個頁簽的窗口。 第一個頁簽具有文本欄位、下拉菜單和可折疊的文本區域。 第二個頁簽有一個欄位集,包含四個文本欄位,一個可折疊欄位集包含兩個文本欄位。 其特點是:
由節點定義(節點類型= cq:Dialog
, xtype = dialog
)。
顯示2個頁簽(節點類型= cq:Panel
)。
第一個索引標籤具有 dialogfieldset
帶有 textfield
和 selection
包含3個選項的介面工具集和可折疊 dialogfieldset
帶 textarea
介面工具集。
第二個索引標籤具有 dialogfieldset
4件小工具 textfield
小工具和可折疊 dialogfieldset
2 textfield
小工具。
由節點定義:
/apps/extjstraining/components/dialogbasics/rich
會透過要求:
http://localhost:4502/apps/extjstraining/components/dialogbasics/rich.-1.json
若要使用 Rich 對話框:
取代 對話基本知識 元件 Rich 對話框:
請依照 範例2:單一面板對話方塊
編輯元件:對話方塊顯示如下:
的第二個元件 使用ExtJS Widget sidekick中的群組稱為 2. 動態對話方塊 包含三個使用現成可用小工具建立的動態對話方塊,以及 使用自訂的javascript邏輯. 對話方塊儲存於下方 /apps/extjstraining/components/dynamicdialogs
. 動態對話方塊為:
switchtabs
節點):它會顯示一個包含兩個索引標籤的視窗。 第一個索引標籤有一個選項選項,包含三個選項:選取選項時,會顯示與選項相關的索引標籤。 第二個索引標籤有兩個文字欄位。arbitrary
節點):它會顯示一個包含一個索引標籤的視窗。 索引標籤有一個欄位,可拖放或上傳資產,以及一個欄位,可顯示容納頁面和資產的相關資訊(如果參考了該頁面)。togglefield
節點):它會顯示一個包含一個索引標籤的視窗。 索引標籤中有核取方塊:勾選此欄位時,會顯示包含兩個文字欄位的欄位集。若要包含 2. 動態對話方塊 元件(在範例頁面上):
新增 2. 動態對話方塊 元件至範例頁面(從 使用ExtJS Widget 標籤 Sidekick.
元件會顯示標題、部分文字和 屬性 連結:按一下以顯示儲存庫中儲存的段落的屬性。 再按一下以隱藏屬性。
元件顯示如下:
此 切換標籤 對話框顯示一個包含兩個頁簽的窗口。 第一個索引標籤有一個選項選項,包含三個選項:選取選項時,會顯示與選項相關的索引標籤。 第二個索引標籤有兩個文字欄位。
其主要特點是:
由節點定義(節點類型= 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
「事件):
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)
隱藏索引標籤
其顯示如下:
對話方塊通常會顯示基礎元件的內容。 此處描述的對話方塊稱為 任意 對話方塊,從不同元件提取內容。
此 任意 對話框顯示一個帶有一個頁簽的窗口。 索引標籤有兩個欄位:一個用於拖放或上傳資產,一個用於顯示容納頁面和資產的相關資訊(若已參考)。
其主要特點是:
由節點定義(節點類型= cq:Dialog
, xtype = dialog
)。
顯示1個表格介面工具集(節點類型= cq:Widget
, xtype = tabpanel
),具有1個面板(節點類型= cq:Panel
)
面板具有smartfile介面工具集(節點類型= 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程式碼來實作,如下所示:
所有權繪製小部件具有「 loadcontent
"在載入內容時顯示包含元件的頁面和smartfile介面工具集引用的資產資訊的偵聽器:
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:單一面板對話方塊
編輯元件:對話方塊顯示如下:
此 切換欄位 對話框顯示一個帶有一個頁簽的窗口。 索引標籤中有核取方塊:勾選此欄位時,會顯示包含兩個文字欄位的欄位集。
其主要特點是:
由節點定義(節點類型= cq:Dialog
, xtype = dialog
)。
顯示1個表格介面工具集(節點類型= cq:Widget
, xtype = tabpanel
),具有1個面板(節點類型= cq:Panel
)。
此面板具有選取/核取方塊Widget(節點類型= cq:Widget
, xtype = selection
, type = checkbox
)和可折疊的對話欄位集widget(節點類型= 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),以及在更改選項時顯示對話框欄位集(" 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
是包含選取項目和dialogfieldset小工具的面板fieldSet
是dialogfieldset對象show
是選取項目的值(true或false)show
'是否顯示dialogfieldset若要使用 切換欄位 對話框:
取代 動態對話方塊 元件 切換欄位 對話框:
請依照 範例2:單一面板對話方塊
編輯元件:對話方塊顯示如下:
AEM隨附的現成可用Widget應涵蓋大部分使用案例。 不過,有時可能需要建立自訂Widget,以滿足專案特定需求。 可通過擴展現有小部件來建立自定義小部件。 為協助您開始進行此類自訂, 使用ExtJS Widget 套件包含三個使用三個不同自訂小工具的對話方塊:
多欄位對話方塊( multifield
節點)顯示一個包含一個頁簽的窗口。 索引標籤具有自訂的多欄位介面工具集,其中包含兩個欄位:一個下拉式功能表,其中包含兩個選項和一個文字欄位。 因為是以現成可用的為基礎 multifield
介面工具集(只有一個文本欄位),它具有 multifield
介面工具集。
樹瀏覽對話框( treebrowse
節點)顯示一個窗口,其中一個頁簽包含路徑瀏覽小工具:按一下箭頭時,會向上開啟一個窗口,您可以在其中瀏覽層次並選擇項目。 然後,項目的路徑會新增至路徑欄位,並在對話方塊關閉時持續保存。
RTF編輯器外掛程式對話方塊( rteplugin
節點),將自訂按鈕新增至RTF編輯器,以將一些自訂文字插入主要文字。 它包含 richtext
介面工具集(RTE)和自訂功能的介面工具集(透過RTE外掛程式機制新增)。
自訂Widget和外掛程式會包含在 3. 自訂介面工具集 的 使用ExtJS Widget 包。 若要將此元件包含至範例頁面:
新增 3. 自訂介面工具集 元件至範例頁面(從 使用ExtJS Widget 標籤 Sidekick.
元件會顯示標題、部分文字,以及按一下 屬性 連結,儲存在儲存庫中的段落的屬性。 再按一下會隱藏屬性。
元件顯示如下:
此 自訂多欄位 基於介面工具集的對話框顯示一個窗口,其中包含一個頁簽。 索引標籤具有自訂的多欄位介面工具集,與具有一個欄位的標準介面工具集不同,它有兩個欄位:一個下拉式功能表,其中包含兩個選項和一個文字欄位。
此 自訂多欄位 基於介面工具集的對話框:
由節點定義(節點類型= cq:Dialog
, xtype = dialog
)。
顯示1個表格介面工具集(節點類型= cq:Widget
, xtype = tabpanel
)包含面板(節點類型= cq:Widget
, xtype = panel
)。
面板具有 multifield
widget(節點類型) 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
at:
/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
):
是Javascript物件,稱為 Ejst.CustomWidget
.
定義於 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.Selection 「select」類型的對象。 optionsProvider是Selection對象的配置,在對話框中定義的CustomWidget的optionsProvider配置已實例化otherField
是 CQ.Ext.form.TextField 物件覆寫方法 setValue
, getValue
和 getRawValue
of CQ.form.CompositeField 若要以下格式設定及擷取CustomWidget的值:
<allowField value>/<otherField value>, e.g.: 'Bla1/hello'
。
將自身註冊為「 ejstcustom
' xtype:
CQ.Ext.reg('ejstcustom', Ejst.CustomWidget);
此 自訂多欄位 介面工具集對話方塊的顯示如下:
自訂 樹狀瀏覽 基於介面工具集的對話框顯示一個窗口,其中包含一個包含自定義路徑瀏覽介面工具集的頁簽:按一下箭頭時,會向上開啟一個窗口,您可以在其中瀏覽層次並選擇項目。 然後,項目的路徑會新增至路徑欄位,並在對話方塊關閉時持續保存。
自定義樹瀏覽對話框:
由節點定義(節點類型= cq:Dialog
, xtype = dialog
)。
顯示1個表格介面工具集(節點類型= cq:Widget
, xtype = tabpanel
)包含面板(節點類型= 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
):
是Javascript物件,稱為 Ejst.CustomWidget
.
定義於 CustomBrowseField.js
javascript檔案:
/apps/extjstraining/clientlib/js/CustomBrowseField.js
定義名為的瀏覽窗口 browseWindow
.
覆寫 CQ.Ext.form.TriggerField
按一下箭頭時顯示瀏覽窗口。
定義 CQ.Ext.tree.TreePanel
物件:
/bin/wcm/siteadmin/tree.json
.apps/extjstraining
」。定義 window
對象(CQ.Ext.Window
):
窗戶固定在 路徑 欄位。
所選路徑將從瀏覽欄位傳遞到上的窗口 show
事件。
將自身註冊為「 ejstbrowse
' xtype:
CQ.Ext.reg('ejstbrowse', Ejst.CustomBrowseField);
若要使用 自訂樹狀瀏覽 基於介面工具集的對話框:
取代 自訂介面工具集 元件 自訂樹狀瀏覽 對話框:
請依照 範例2:單一面板對話方塊
編輯元件:對話方塊顯示如下:
此 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外掛程式:
是Javascript物件,稱為 Ejst.InsertTextPlugin
.
定義於 InsertTextPlugin.js
javascript檔案:
/apps/extjstraining/clientlib/js/InsertTextPlugin.js
下列方法會定義 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);
the Ejst.InsertTextPlugin.Dialog
object定義按一下外掛程式按鈕時開啟的對話方塊。 對話方塊由面板、表單、文字欄位和2個按鈕(確定 和 取消)。
若要使用 RTF編輯器(RTE)外掛程式 基於對話框:
取代 自訂介面工具集 元件 RTF編輯器(RTE)外掛程式 基於對話框:
請依照 範例2:單一面板對話方塊
編輯元件。
按一下右側的最後一個圖示(四個箭頭的圖示)。 輸入路徑並按一下 確定:
路徑會顯示在方括弧內([]
)。
按一下 確定 來關閉RTF編輯器。
此 RTF編輯器(RTE)外掛程式 基於對話方塊的顯示如下:
此範例僅顯示如何實作邏輯的用戶端部分:佔位符([文字]),則會在伺服器端明確剖析(例如在元件JSP中)。
現成可用 CQ.Ext.tree.TreePanel
物件提供樹狀結構資料的樹狀結構UI表示。 包含在 使用ExtJS Widget 套件會示範如何使用 TreePanel
對象,在指定路徑下顯示JCR樹。 窗口本身可以停靠/取消停靠。 在此示例中,窗口邏輯嵌入到元件jsp中, <script></script> 標籤。
若要包含 樹概述 元件至範例頁面:
新增 4. 樹概述 元件至範例頁面(從 使用ExtJS Widget 標籤 Sidekick.
元件隨即顯示:
元件顯示如下:
樹概述元件:
定義於:
/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 Widget 套件會顯示如何以表格格式顯示資料:
要將「網格概述」元件包含到示例頁,請執行以下操作:
新增 5。 格線概述 元件至範例頁面(從 使用ExtJS Widget 標籤 Sidekick.
元件隨即顯示:
元件顯示如下:
在其現成版本中,網格概述元件以表格格式顯示一個包含靜態資料的窗口。在此示例中,邏輯通過兩種方式嵌入到元件jsp中:
網格概述元件:
定義於:
/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
不存在,a CQ.Ext.grid.GridPanel 對象( gridPanel
)的定義方式為呼叫 getGridPanel()
方法(請參閱下方)。 此方法定義於 defaultgrid.js
.
grid
是 CQ.Ext.Window
物件,會根據預先定義的GridPanel顯示: grid.show();
若 grid
已存在,則會根據從儲存庫檢索到的寬度、高度和停靠屬性來顯示。
Javascript檔案( defaultgrid.js
)在元件jsp中引用,定義 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
安裝套件時, content.jsp
的 格線概述 元件顯示基於靜態資料的網格。 可以修改元件以顯示具有以下特徵的網格:
test
由第一列中顯示的路徑定義的節點下的屬性。如前一節所述,視窗物件會取得其 CQ.Ext.grid.GridPanel
物件,方法是呼叫 getGridPanel()
在中定義的方法 defaultgrid.js
檔案位置 /apps/extjstraining/components/gridoverview/defaultgrid.js
. 此 格線概述 元件提供不同的實作 getGridPanel()
方法,在中定義 referencesearch.js
檔案位置 /apps/extjstraining/components/gridoverview/referencesearch.js
. 切換元件jsp中參考的.js檔案後,網格將以從儲存庫擷取的資料為基礎。
切換元件jsp中引用的.js檔案:
在 CRXDE Lite,在 content.jsp
元件的檔案中,對包含 defaultgrid.js
檔案,因此如下所示:
<!-- script type="text/javascript" src="/apps/extjstraining/components/gridoverview/defaultgrid.js"></script-->
從包含 referencesearch.js
檔案,因此如下所示:
<script type="text/javascript" src="/apps/extjstraining/components/gridoverview/referencesearch.js"></script>
儲存變更。
重新整理範例頁面。
元件顯示如下:
元件jsp中引用的javascript代碼(referencesearch.js
)定義 getGridPanel()
方法從元件jsp中調用並返回 CQ.Ext.grid.GridPanel
物件,以動態從存放庫擷取的資料為基礎。 中的邏輯 referencesearch.js
將某些動態資料定義為GridPanel的基礎:
reader
是 CQ.Ext.data.JsonReader
為3欄以json格式讀取servlet回應的物件。
cm
是 CQ.Ext.grid.ColumnModel
3欄的物件。
「測試」欄儲存格可依使用編輯器定義的方式加以編輯:
editor: new
CQ.Ext.form.TextField
({})
欄可排序:
cm.defaultSortable = true;
store
是 CQ.Ext.data.GroupingStore
物件:
/bin/querybuilder.json
",其中幾個參數用於篩選查詢reader
預先定義gridPanel
是 CQ.Ext.grid.EditorGridPanel
可編輯的物件:
其基礎為預先定義 store
和列模型 cm
一次只能選取一列:
sm: new
CQ.Ext.grid.RowSelectionModel
({singleSelect:true})
the afteredit
接聽程式會在「測試已編輯「 」列:
test
「jcr:path「 」欄是在儲存庫中使用儲存格的值設定store
對象,否則它被拒絕