Adobe Experience Manager的基于web的界面使用AJAX和其他现代浏览器技术,使作者能够直接在网页上对内容进行WYSIWYG编辑和格式化。
Adobe Experience Manager(AEM)使用 ExtJS 小组件库,它提供了经过高度优化的用户界面元素,这些元素可在所有最重要的浏览器中使用,并允许创建桌面级UI体验。
这些小组件包含在AEM中,除了供AEM本身使用外,还可供使用AEM构建的任何网站使用。
有关AEM中所有可用小组件的完整引用,您可以参阅 小组件API文档 或 现有xtype列表. 此外,还提供了许多显示如何使用ExtJS框架的示例,这些示例位于 森查 站点,框架的所有者。
本页对如何使用和扩展小组件提供了一些分析。 它首先描述了如何 在页面中包含客户端代码. 然后,该文档描述了为说明一些基本用法和扩展而创建的一些示例组件。 这些组件在 使用ExtJS小组件 软件包 包共享.
该包包含以下示例:
Adobe Experience Manager的经典UI基于 ExtJS 3.4.0.
本页介绍了小组件在经典UI中的用法。 Adobe建议您利用现代 触屏优化UI 基于 Coral用户界面 和 Granite用户界面.
客户端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.extjstring”),用于在页面上包含库。
下面 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小组件 在本地AEM实例中,并创建一个将包含组件的示例页面。 为此,请执行以下操作:
在AEM实例中,下载名为 使用ExtJS小组件(v01) 从包共享中,安装包。 它会创建项目 extjstraining
下面 /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小组件.
进入设计模式,并添加组中名为 使用ExtJS小组件 Geometrixx设计
在编辑模式下返回:组的组件 使用ExtJS小组件 可在Sidekick中使用。
本页面上的示例基于Geometrixx示例内容,该内容不再随AEM一起提供,而已被We.Retail替换。 查看文档 We.Retail参考实施 以了解如何下载和安装Geometrixx。
对话框通常用于编辑内容,但也只能显示信息。 查看完整对话框的一种简单方法是访问其json格式的表示形式。 为此,请将您的浏览器指向:
http://localhost:4502/<path-to-dialog>.-1.json
的 使用ExtJS小组件 在Sidekick中的组被调用 1. 对话框基础知识 以及包含四个基本对话框,这些对话框是使用现成的小组件构建的,并且不使用自定义的javascript逻辑。 对话框存储在下面 /apps/extjstraining/components/dialogbasics
. 基本对话框包括:
完整对话框( full
节点):它显示一个窗口,其中包含3个选项卡,每个选项卡都包含2个文本字段。
单个面板对话框( singlepanel
节点):它显示一个窗口,其中带有1个选项卡,其中具有2个文本字段。
多面板对话框( multipanel
节点):其显示方式与“完整”对话框相同,只是构建方式不同。
设计对话框( design
节点):此时将显示一个带有2个选项卡的窗口。 第一个选项卡具有文本字段、下拉菜单和可折叠的文本区域。 第二个选项卡具有一个字段集,其中包含4个文本字段,以及一个可折叠的字段集,其中包含2个文本字段。
包括 1. 对话框基础知识 组件:
添加 1. 对话框基础知识 组件到示例页面 使用ExtJS小组件 选项卡 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
通过请求以下项以json格式呈现:
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
通过请求以下项以json格式呈现:
http://localhost:4502/apps/extjstraining/components/dialogbasics/multipanel.-1.json
比 完整对话框 就是它的结构简化了。
建议使用:的子菜单。
要使用多面板对话框,请执行以下操作:
替换 对话框基础知识 组件 多面板 对话框:
按照 示例2:单面板对话框
编辑组件:对话框显示如下:
的 富 对话框显示一个带有两个选项卡的窗口。 第一个选项卡具有文本字段、下拉菜单和可折叠的文本区域。 第二个选项卡具有一个字段集,其中包含四个文本字段,而一个可折叠的字段集中包含两个文本字段。 其特点是:
由节点定义(节点类型= cq:Dialog
, xtype = dialog
)。
显示2个选项卡(节点类型= cq:Panel
)。
第一个选项卡具有 dialogfieldset
小组件 textfield
和 selection
具有3个选项的小组件,以及可折叠的 dialogfieldset
带有 textarea
小组件。
第二个选项卡具有 dialogfieldset
带4的小组件 textfield
小部件和可折叠的 dialogfieldset
2 textfield
小组件。
由节点定义:
/apps/extjstraining/components/dialogbasics/rich
通过请求以下项以json格式呈现:
http://localhost:4502/apps/extjstraining/components/dialogbasics/rich.-1.json
使用 富 对话框:
替换 对话框基础知识 组件 富 对话框:
按照 示例2:单面板对话框
编辑组件:对话框显示如下:
的第二个组件 使用ExtJS小组件 在Sidekick中的组被调用 2. 动态对话框 和包含三个使用现成小组件构建的动态对话框,以及 使用自定义javascript逻辑. 对话框存储在下面 /apps/extjstraining/components/dynamicdialogs
. 动态对话框包括:
switchtabs
节点):此时将显示一个带有两个选项卡的窗口。 第一个选项卡具有一个单选按钮选项,其中包含三个选项:选择某个选项后,会显示与该选项相关的选项卡。 第二个选项卡有两个文本字段。arbitrary
节点):此时会显示一个带有一个选项卡的窗口。 选项卡中有一个用于放置或上传资产的字段,以及一个字段,用于显示有关容器页面以及资产(如果引用了)的一些信息。togglefield
节点):此时会显示一个带有一个选项卡的窗口。 选项卡中有一个复选框:选中此选项后,将显示一个字段集,其中包含两个文本字段。要包含 2. 动态对话框 组件:
添加 2. 动态对话框 组件到示例页面 使用ExtJS小组件 选项卡 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
通过请求以下项以json格式呈现:
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
“事件”),以及在更改选择时显示选定选项卡(“ 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
)
面板具有智能文件小组件(节点类型= cq:Widget
, xtype = smartfile
)和ownerdraw小组件(节点类型= cq:Widget
, xtype = ownerdraw
)
由 arbitrary
节点:
/apps/extjstraining/components/dynamicdialogs/arbitrary
通过请求以下项以json格式呈现:
http://localhost:4502/apps/extjstraining/components/dynamicdialogs/arbitrary.-1.json
该逻辑通过事件侦听器和Javascript代码实现,如下所示:
ownerdraw小组件具有“ loadcontent
"侦听器,用于显示加载内容时包含组件的页面和智能文件小组件引用的资产的相关信息:
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
)。
该面板具有一个选择/复选框小组件(节点类型= cq:Widget
, xtype = selection
,类型= checkbox
)和可折叠的对话框字段集小组件(节点类型= cq:Widget
, xtype = dialogfieldset
),默认隐藏2个文本字段小组件(节点类型= cq:Widget
, xtype = textfield
)。
由 togglefields
节点:
/apps/extjstraining/components/dynamicdialogs/togglefields
通过请求以下项以json格式呈现:
http://localhost:4502/apps/extjstraining/components/dynamicdialogs/togglefields.-1.json
该逻辑通过事件侦听器和Javascript代码实现,如下所示:
“选择”选项卡有2个侦听器:其中一个用于显示加载内容时对话框字段集(" 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
是包含所选内容和对话框字段集小组件的面板fieldSet
是dialogfieldset对象show
是所选内容的值(true或false)show
“对话框字段集是否显示使用 切换字段 对话框:
替换 动态对话框 组件 切换字段 对话框:
按照 示例2:单面板对话框
编辑组件:对话框显示如下:
AEM附带的现成小组件应涵盖大多数用例。 但是,有时可能需要创建自定义小组件以满足特定于项目的要求。 可通过扩展现有小组件来创建自定义小组件。 为帮助您开始进行此类自定义, 使用ExtJS小组件 包包含三个使用三个不同自定义小组件的对话框:
多字段对话框( multifield
节点)显示一个带有一个选项卡的窗口。 选项卡具有一个自定义的多字段小组件,该小组件具有两个字段:包含两个选项和一个文本字段的下拉菜单。 因为它基于现成的 multifield
小组件(仅具有文本字段),具有 multifield
小组件。
树浏览对话框( treebrowse
节点)显示一个窗口,其中包含一个包含路径浏览小组件的选项卡:单击箭头时,将打开一个窗口,您可以在其中浏览层次结构并选择项目。 项目的路径随后会添加到路径字段,并在对话框关闭时持久保留该路径。
基于富文本编辑器插件的对话框( rteplugin
节点)来向富文本编辑器添加自定义按钮,以向主文本插入一些自定义文本。 它由 richtext
构件(RTE)和自定义功能(通过RTE插件机制添加)的集成。
自定义小组件和插件将包含在名为 3. 自定义小组件 的 使用ExtJS小组件 包。 要将此组件包含到示例页面,请执行以下操作:
添加 3. 自定义小组件 组件到示例页面 使用ExtJS小组件 选项卡 Sidekick.
该组件会显示标题和一些文本,在单击 属性 链接,存储库中所存储段落的属性。 再次单击会隐藏属性。
组件显示如下:
的 自定义多字段 基于小组件的对话框显示一个带有一个选项卡的窗口。 选项卡具有一个自定义的多字段小组件,该小组件与具有一个字段的标准小组件不同,具有两个字段:包含两个选项和一个文本字段的下拉菜单。
的 自定义多字段 基于小组件的对话框:
由节点定义(节点类型= cq:Dialog
, xtype = dialog
)。
显示1个表格面板小组件(节点类型= cq:Widget
, xtype = tabpanel
)包含面板(节点类型= 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
at:
/apps/extjstraining/clientlib/js/exercises.js
和返回2个选项。
由 multifield
节点:
/apps/extjstraining/components/customwidgets/multifield
通过请求以下项以json格式呈现:
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
(组合框)和 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
)。
面板具有自定义小组件(节点类型= cq:Widget
, xtype = ejstbrowse
)
由 treebrowse
节点:
/apps/extjstraining/components/customwidgets/treebrowse
通过请求以下项以json格式呈现:
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:单面板对话框
编辑组件:对话框显示如下:
的 富文本编辑器(RTE)插件 “基于”对话框是基于富文本编辑器的对话框,具有一个自定义按钮,用于在方括号内插入一些自定义文本。 自定义文本可以由某些服务器端逻辑解析(本示例中未实现),例如,添加在给定路径中定义的一些文本:
的 RTE插件 基于对话框:
由rtplugin节点在以下位置定义:
/apps/extjstraining/components/customwidgets/rteplugin
通过请求以下项以json格式呈现:
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
对象。
以下方法定义 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
对象定义在单击插件按钮时打开的对话框。 该对话框由面板、表单、文本字段和2个按钮(确定 和 取消)。
使用 富文本编辑器(RTE)插件 基于对话框:
替换 自定义小组件 组件 富文本编辑器(RTE)插件 基于对话框:
按照 示例2:单面板对话框
编辑组件。
单击右侧的最后一个图标(带四个箭头的图标)。 输入路径并单击 确定:
路径显示在方括号内([]
)。
单击 确定 以关闭富文本编辑器。
的 富文本编辑器(RTE)插件 基于对话框显示如下:
此示例仅显示如何实施逻辑的客户端部分:占位符([文本]),则必须在服务器端进行显式解析(例如,在组件JSP中)。
开箱即用 CQ.Ext.tree.TreePanel
对象提供树结构化数据的树结构化用户界面表示。 包含在 使用ExtJS小组件 包中显示了如何使用 TreePanel
对象,以在给定路径下显示JCR树。 窗口本身可以停靠/取消停靠。 在本例中,窗口逻辑嵌入到组件jsp中, <script></script> 标记。
要包含 树概述 组件添加到示例页面:
添加 4. 树概述 组件到示例页面 使用ExtJS小组件 选项卡 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
,类型= radio
),其中包含2个选项(true/false)
由对话框节点在以下位置定义:
/apps/extjstraining/components/treeoverview/dialog
通过请求以下项以json格式呈现:
http://localhost:4502/apps/extjstraining/components/treeoverview/dialog.-1.json
显示如下:
网格面板以行和列的表格格式表示数据。 它由以下内容组成:
中包含的网格概述组件 使用ExtJS小组件 包显示了如何以表格格式显示数据:
要将网格概述组件包含到示例页面,请执行以下操作:
添加 5. 网格概述 组件到示例页面 使用ExtJS小组件 选项卡 Sidekick.
组件会显示:
组件显示如下:
在现成版本中,网格概述组件以表格格式显示一个包含静态数据的窗口。在本例中,逻辑以两种方式嵌入到组件jsp中:
网格概述组件:
定义于:
/apps/extjstraining/components/gridoverview
其对话框用于设置窗口的大小和停靠/取消停靠窗口。
组件jsp:
从存储库中检索宽度、高度和停靠属性。
显示一些文本作为网格概述数据格式的简介。
引用定义GridPanel对象的Javascript代码:
<script type="text/javascript" src="/apps/extjstraining/components/gridoverview/defaultgrid.js"></script>
defaultgrid.js
将一些静态数据定义为GridPanel对象的基。
在可定义使用GridPanel对象的Window对象的Javascript标记之间嵌入Javascript代码。
定义于:
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
已存在,则会根据从存储库检索的宽度、高度和停靠属性来显示。
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
对象。
可以编辑“测试”列单元格,因为这些单元格是通过编辑器定义的:
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
对象,否则将被拒绝