Adobe Experience Manager的網頁型介面使用AJAX和其他現代瀏覽器技術,讓作者直接在網頁上編輯和格式化內容。
Adobe Experience Manager(AEM)使用ExtJS Widget程式庫,提供精良的使用者介面元素,可在所有最重要的瀏覽器上運作,並可建立案頭級UI體驗。
這些Widget包含在AEM中,除了供AEM本身使用外,也可供使用AEM建立的任何網站使用。
如需AEM中所有可用小工具的完整參考,請參閱小工具集API檔案或現有xtypes🔗清單。 此外,在Sencha網站(該架構的擁有者)上也提供許多顯示如何使用ExtJS架構的範例。
本頁面提供如何使用和擴充Widget的相關分析。 它首先說明如何在頁面🔗中包含用戶端代碼。 接著,它會說明已建立的一些範例元件,以說明一些基本用途和擴充功能。 這些元件可在封裝共用的使用ExtJS Widget封裝中使用。
套件包含下列範例:
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連結:按一下連結以顯示儲存庫中儲存的段落的屬性。 再按一下連結以隱藏屬性。
元件顯示如下:
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
對話方塊顯示如下:
單面板對話框顯示一個窗口,其中一個頁簽包含兩個文本欄位。 其特點是:
顯示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對話框:
/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
與完整對話相比,優勢之一在於它具有簡化的結構。
建議使用:對話框。
要使用「多面板」對話框,請執行以下操作:
將Dialog Basics元件的對話框替換為Multi Panel對話框:
編輯元件:對話方塊顯示如下:
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對話框:
編輯元件:對話方塊顯示如下:
Sidekick中使用ExtJS Widget組的第二個元件稱為2。 動態對話框,包括三個使用現成小工具構建的動態對話框,以及使用自定義javascript邏輯構建的。 對話框儲存在/apps/extjstraining/components/dynamicdialogs
下。 動態對話方塊為:
switchtabs
節點):它會顯示一個包含兩個索引標籤的視窗。 第一個索引標籤有一個選項選項,包含三個選項:選取選項時,會顯示與選項相關的索引標籤。 第二個索引標籤有兩個文字欄位。arbitrary
節點):它會顯示一個包含一個索引標籤的視窗。 索引標籤有一個欄位,可拖放或上傳資產,以及一個欄位,可顯示容納頁面和資產的相關資訊(如果參考了該頁面)。togglefield
節點):它會顯示一個包含一個索引標籤的視窗。 索引標籤中有核取方塊:勾選此欄位時,會顯示包含兩個文字欄位的欄位集。納入2。 範例頁面上的動態對話方塊元件:
新增2。 從 Sidekick 的「使用ExtJS Widget」標籤中使用ExtJS Widget範例頁面的動態對話元件。
元件顯示標題、部分文本和PROPERTIES連結:按一下以顯示儲存庫中儲存的段落的屬性。 再按一下以隱藏屬性。
元件顯示如下:
交換機頁簽對話框顯示一個帶有兩個頁簽的窗口。 第一個索引標籤有一個選項選項,包含三個選項:選取選項時,會顯示與選項相關的索引標籤。 第二個索引標籤有兩個文字欄位。
其主要特點是:
由節點定義(節點類型= 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)
隱藏索引標籤
其顯示如下:
對話方塊通常會顯示基礎元件的內容。 此處描述的對話方塊(稱為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
要使用任意對話框,請執行以下操作:
將動態對話框元件的對話框替換為任意對話框:
編輯元件:對話方塊顯示如下:
切換欄位對話框顯示一個帶有一個頁簽的窗口。 索引標籤中有核取方塊:勾選此欄位時,會顯示包含兩個文字欄位的欄位集。
其主要特點是:
由節點定義(節點類型= 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要使用切換欄位對話框,請執行以下操作:
使用切換欄位對話框替換動態對話框元件的對話框:
編輯元件:對話方塊顯示如下:
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連結時,顯示儲存在儲存庫中的段落的屬性。 再按一下會隱藏屬性。
元件顯示如下:
自訂多欄位介面工具集對話方塊會顯示一個含有一個索引標籤的視窗。 索引標籤具有自訂的多欄位介面工具集,與具有一個欄位的標準介面工具集不同,它有兩個欄位:一個下拉式功能表,其中包含兩個選項和一個文字欄位。
自訂多欄位介面工具集對話方塊:
由節點定義(節點類型= 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);
自訂多欄位介面工具集對話方塊顯示如下:
基於自定義樹狀瀏覽介面工具集的對話框顯示一個窗口,其中一個頁簽包含自定義路徑瀏覽介面工具集:按一下箭頭時,會向上開啟一個窗口,您可以在其中瀏覽層次並選擇項目。 然後,項目的路徑會新增至路徑欄位,並在對話方塊關閉時持續保存。
自定義樹瀏覽對話框:
由節點定義(節點類型= 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
定義名為browseWindow
的瀏覽窗口。
覆蓋CQ.Ext.form.TriggerField
以在按一下箭頭時顯示瀏覽窗口。
/bin/wcm/siteadmin/tree.json
註冊的servlet來獲取其資料。apps/extjstraining
"。定義window
對象(CQ.Ext.Window
):
窗口錨定在Path欄位下。
所選路徑將從瀏覽欄位傳遞到show
事件上的窗口。
註冊為「 ejstbrowse
」xtype:
CQ.Ext.reg('ejstbrowse', Ejst.CustomBrowseField);
要使用基於自定義樹瀏覽介面工具集的對話框,請執行以下操作:
將自訂介面工具集元件的對話框替換為自訂樹瀏覽對話框:
編輯元件:對話方塊顯示如下:
以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
物件,並在實作外掛程式中覆寫:
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元件的對話框替換:
編輯元件。
按一下右側的最後一個圖示(四個箭頭的圖示)。 輸入路徑,然後按一下OK:
路徑顯示在括弧內([]
)。
按一下OK以關閉RTF編輯器。
RTF編輯器(RTE)外掛程式對話方塊顯示如下:
此範例僅顯示如何實作邏輯的用戶端部分:然後,必須在伺服器端明確剖析預留位置([text])(例如在元件JSP中)。
現成可用的CQ.Ext.tree.TreePanel
物件提供樹狀結構資料的樹狀結構UI表示法。 使用ExtJS Widget套件中包含的樹概覽元件顯示如何使用TreePanel
物件在指定路徑下顯示JCR樹。 窗口本身可以停靠/取消停靠。 在此示例中,窗口邏輯嵌入到<script></script>標籤之間的元件jsp中。
要將樹概述元件包含到示例頁:
新增4。 從 Sidekick 中的使用ExtJS Widget 標籤到範例頁面的樹狀結構概述元件。
元件隨即顯示:
元件顯示如下:
樹概述元件:
定義於:
/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。 從 Sidekick 中的使用ExtJS Widget 標籤到範例頁面的格線概述元件。
元件隨即顯示:
元件顯示如下:
在其現成版本中,格線概述元件以表格格式顯示一個包含靜態資料的窗口。 在此示例中,邏輯通過兩種方式嵌入到元件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
不存在,則通過調用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
安裝軟體包時,網格概述元件的content.jsp
將顯示基於靜態資料的網格。 可以修改元件以顯示具有以下特徵的網格:
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
檔案的行,使其如下所示:
<!-- 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(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
為基礎,預先定義gridPanel
是可 CQ.Ext.grid.EditorGridPanel
編輯的物件:
它以預定義的store
和列模型cm
為基礎
一次只能選取一列:
sm: new
CQ.Ext.grid.RowSelectionModel
({singleSelect:true})
afteredit
接聽程式確保在「Test」欄中的儲存格已編輯後:
test
」,其值為單元格store
對象,否則它將被拒絕