本页介绍经典UI中构件的用法,AEM 6.4已弃用该构件。
Adobe建议你利用现代的, 触屏优化UI 基于 Coral UI 和 Granite UI.
Adobe Experience Manager基于Web的界面使用AJAX和其他现代浏览器技术,使作者能够直接在网页上对WYSIWYG内容进行编辑和格式化。
Adobe Experience Manager (AEM)使用 ExtJS widget库,提供经过高度改进的用户界面元素,可在所有最重要的浏览器中使用,并允许创建桌面级的UI体验。
这些构件包含在AEM中,除了供AEM本身使用外,还可供使用AEM构建的任何网站使用。
有关AEM中所有可用小部件的完整参考,请参见 构件API文档 或 现有xtype的列表. 此外,上提供了许多说明如何使用ExtJS框架的示例 森查 站点,即框架的所有者。
本页提供了有关如何使用和扩展小部件的见解。 它首先介绍如何 在页面中包含客户端代码. 然后,它介绍了一些已创建的示例组件,以说明一些基本用法和扩展。 这些组件在以下位置提供: 使用ExtJS小组件 程序包位于 包共享.
该软件包包含以下示例:
Adobe Experience Manager的经典用户界面是基于 ExtJS 3.4.0.
客户端的JavaScript和样式表代码应放置在客户端库中。
要创建客户端库,请执行以下操作:
在下方创建节点 /apps/<project>
具有以下属性:
Note: <category-name> is the name of the custom library (e.g. "cq.extjstraining") and is used to include the library on the page.
以下 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"/><%
}
要遵循此页面上的教程,请安装名为的包 使用ExtJS小组件 在本地AEM实例中,并创建一个包含组件的示例页面。 为此,请执行以下操作:
extjstraining
以下 /apps
在存储库中。/apps/geometrixx/components/page/headlibs.jsp
并添加 cq.extjstraining
类别到现有 <ui:includeClientLib>
标记如下所示:%><ui:includeClientLib categories="apps.geometrixx-main, cq.extjstraining"/><%
/content/geometrixx/en/products
并调用 使用ExtJS小组件.此页面上的示例基于Geometrixx示例内容,该内容不再随AEM提供,已被We.Retail取代。 查看文档 We.Retail参考实施 了解如何下载和安装Geometrixx。
对话框通常用于编辑内容,但也只能显示信息。 查看完整对话框的一个简单方法是以json格式访问其表示形式。 为此,请将浏览器指向:
https://localhost:4502/<path-to-dialog>.-1.json
的第一个组件 使用ExtJS小组件 Sidekick中的组被称为 1. Dialog基础知识 并且包括四个基本对话框,这些对话框使用现成的构件构建,并且没有自定义的javascript逻辑。 对话框存储在下方 /apps/extjstraining/components/dialogbasics
. 基本对话框包括:
full
节点):它显示一个带3个选项卡的窗口,每个选项卡有2个文本字段。singlepanel
节点):显示一个带1个选项卡的窗口,其中包含2个文本字段。multipanel
节点):其显示与“完整”对话框相同,但构建方式不同。design
节点):显示一个带2个选项卡的窗口。 第一个选项卡有一个文本字段、一个下拉菜单和一个可折叠文本区域。 第二选项卡具有包含4个文本字段的字段集和包含2个文本字段的可折叠字段集。包括 1. Dialog基础知识 示例页面中的组件:
组件显示如下:
此 完整 对话框将显示一个窗口,其中带有三个选项卡,每个选项卡都有两个文本字段。 它是的缺省对话框 Dialog基础知识 组件。 其特点是:
cq:Dialog
, xtype = [dialog](/docs/experience-manager-65/developing/components/classic-ui-components/xtypes.md#dialog)
.cq:Panel
)。cq:Widget
, xtype = [textfield](/docs/experience-manager-65/developing/components/classic-ui-components/xtypes.md#textfield)
)。/apps/extjstraining/components/dialogbasics/full
https://localhost:4502/apps/extjstraining/components/dialogbasics/full.-1.json
对话框显示如下:
此 单个面板 对话框显示一个窗口,其中有一个选项卡具有两个文本字段。 其特点是:
cq:Dialog
, xtype = [panel](/docs/experience-manager-65/developing/components/classic-ui-components/xtypes.md#panel)
)cq:Widget
, xtype = [textfield](/docs/experience-manager-65/developing/components/classic-ui-components/xtypes.md#textfield)
)/apps/extjstraining/components/dialogbasics/singlepanel
https://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](/docs/experience-manager-65/developing/components/classic-ui-components/xtypes.md#tabpanel)
)。cq:Panel
)。cq:Widget
, xtype = [textfield](/docs/experience-manager-65/developing/components/classic-ui-components/xtypes.md#textfield)
)。/apps/extjstraining/components/dialogbasics/multipanel
https://localhost:4502/apps/extjstraining/components/dialogbasics/multipanel.-1.json
要使用“多面板”对话框,请执行以下操作:
此 富有 对话框显示一个窗口,其中包含两个选项卡。 第一个选项卡有一个文本字段、一个下拉菜单和一个可折叠文本区域。 第二个选项卡具有包含四个文本字段的字段集和包含两个文本字段的可折叠字段集。 其特点是:
cq:Dialog
, xtype = [dialog](/docs/experience-manager-65/developing/components/classic-ui-components/xtypes.md#dialog)
)。cq:Panel
)。 [dialogfieldset](/docs/experience-manager-65/developing/components/classic-ui-components/xtypes.md#dialogfieldset)
带有的小部件 [textfield](/docs/experience-manager-65/developing/components/classic-ui-components/xtypes.md#textfield)
和 [selection](/docs/experience-manager-65/developing/components/classic-ui-components/xtypes.md#selection)
带3个选项和一个可折叠的构件 [dialogfieldset](/docs/experience-manager-65/developing/components/classic-ui-components/xtypes.md#dialogfieldset)
带有 [textarea](/docs/experience-manager-65/developing/components/classic-ui-components/xtypes.md#textarea)
构件。 [dialogfieldset](/docs/experience-manager-65/developing/components/classic-ui-components/xtypes.md#dialogfieldset)
带有4的构件 [textfield](/docs/experience-manager-65/developing/components/classic-ui-components/xtypes.md#textfield)
构件和可折叠 dialogfieldset
带2 [textfield](/docs/experience-manager-65/developing/components/classic-ui-components/xtypes.md#textfield)
小组件。/apps/extjstraining/components/dialogbasics/rich
https://localhost:4502/apps/extjstraining/components/dialogbasics/rich.-1.json
要使用 富有 对话框:
的第二个组件 使用ExtJS小组件 Sidekick中的组被称为 2. 动态对话框 并包括三个使用现成构件和构建的动态对话框 使用自定义javascript逻辑. 对话框存储在下方 /apps/extjstraining/components/dynamicdialogs
. 动态对话框包括:
switchtabs
节点):显示一个窗口,其中包含两个选项卡。 第一个选项卡具有带有三个选项的单选选项:选择某个选项时,将显示与该选项相关的选项卡。 第二个选项卡有两个文本字段。arbitrary
节点):显示一个带有一个选项卡的窗口。 选项卡中有一个字段用于放置或上传资产,还有一个字段显示有关容器页面和资产的一些信息(如果已引用)。togglefield
节点):显示一个带有一个选项卡的窗口。 选项卡中有一个复选框:选中时,将显示一个字段集,其中包含两个文本字段。要包含 2. 动态对话框 示例页面上的组件:
组件显示如下:
此 切换选项卡 对话框显示一个窗口,其中包含两个选项卡。 第一个选项卡具有带有三个选项的单选选项:选择某个选项时,将显示与该选项相关的选项卡。 第二个选项卡有两个文本字段。
其主要特点是:
cq:Dialog
, xtype = [dialog](/docs/experience-manager-65/developing/components/classic-ui-components/xtypes.md#dialog)
)。cq:Panel
):1个选择选项卡,第2个选项卡取决于第1个选项卡中的选择(3个选项)。cq:Panel
),每个字段有2个文本字段(节点类型= cq:Widget
, xtype = [textfield](/docs/experience-manager-65/developing/components/classic-ui-components/xtypes.md#textfield)
)。 一次只显示一个可选选项卡。switchtabs
节点位置:/apps/extjstraining/components/dynamicdialogs/switchtabs
https://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个可选面板的tabpanel。
此 Ejst.x2
对象定义于 exercises.js
文件位置:
/apps/extjstraining/clientlib/js/exercises.js
在 Ejst.x2.manageTabs()
方法,作为的值 index
为–1,则所有可选选项卡都将隐藏(i从1到3)。
选择选项卡有2个监听器:其中一个在加载对话框时显示选定的选项卡(" loadcontent
”事件),选择更改时显示选定选项卡的选项卡(“ 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)
隐藏选项卡
它显示如下:
通常,对话框会显示底层组件的内容。 此处介绍的对话框,名为 任意 对话框,从其他组件提取内容。
此 任意 对话框显示一个带有一个选项卡的窗口。 该选项卡有两个字段:一个用于放置或上传资产,另一个用于显示有关容器页面的一些信息,如果已被引用,则显示有关资产的信息。
其主要特点是:
cq:Dialog
, xtype = [dialog](/docs/experience-manager-65/developing/components/classic-ui-components/xtypes.md#dialog)
)。cq:Widget
, xtype = [tabpanel](/docs/experience-manager-65/developing/components/classic-ui-components/xtypes.md#tabpanel)
)和1个面板(节点类型= cq:Panel
)cq:Widget
, xtype = [smartfile](/docs/experience-manager-65/developing/components/classic-ui-components/xtypes.md#smartfile)
)和一个ownerdraw小组件(节点类型= cq:Widget
, xtype = [ownerdraw](/docs/experience-manager-65/developing/components/classic-ui-components/xtypes.md#ownerdraw)
)arbitrary
节点位置:/apps/extjstraining/components/dynamicdialogs/arbitrary
https://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
要使用 任意 对话框:
此 切换字段 对话框显示一个带有一个选项卡的窗口。 选项卡中有一个复选框:选中时,将显示一个字段集,其中包含两个文本字段。
其主要特点是:
cq:Dialog
, xtype = [dialog](/docs/experience-manager-65/developing/components/classic-ui-components/xtypes.md#dialog)
)。cq:Widget
, xtype = [tabpanel](/docs/experience-manager-65/developing/components/classic-ui-components/xtypes.md#textpanel)
)和1个面板(节点类型= cq:Panel
)。cq:Widget
[selection](/docs/experience-manager-65/developing/components/classic-ui-components/xtypes.md#selection)
[checkbox](/docs/experience-manager-65/developing/components/classic-ui-components/xtypes.md#checkbox)
cq:Widget
[dialogfieldset](/docs/experience-manager-65/developing/components/classic-ui-components/xtypes.md#dialogfieldset)
cq:Widget
[textfield](/docs/experience-manager-65/developing/components/classic-ui-components/xtypes.md#textfield)
togglefields
/apps/extjstraining/components/dynamicdialogs/togglefields
https://localhost:4502/apps/extjstraining/components/dynamicdialogs/togglefields.-1.json
该逻辑通过事件侦听器和JavaScript代码实现,如下所示:
选择选项卡有2个监听器:一个在加载内容时显示dialogfieldset (" loadcontent
“ event),选择更改时显示对话框字段集的活动(” 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
是对话框字段集对象
show
是所选内容的值(true或false),基于' show
'是否显示对话框字段集
要使用 切换字段 对话框:
AEM附带的现成小组件应涵盖大多数用例。 但是,有时可能有必要创建自定义构件以满足项目特定要求。 可通过扩展现有构件来创建自定义构件。 为了帮助您开始进行此类自定义, 使用ExtJS小组件 该软件包包含三个使用三个不同自定义小部件的对话框:
multifield
节点)显示一个带有一个选项卡的窗口。 选项卡具有自定义的多字段小组件,其中包含两个字段:一个包含两个选项的下拉菜单和一个文本字段。 因为它基于开箱即用的 multifield
构件(只有文本字段),它具有 multifield
构件。treebrowse
节点)显示一个窗口,其中包含一个包含路径浏览小部件的选项卡:单击箭头时,将打开一个窗口,您可以在其中浏览层次结构并选择项目。 然后,该项的路径将添加到路径字段中,并在对话框关闭时保留。rteplugin
节点)来将自定义按钮添加到富文本编辑器,以将某些自定义文本插入到主文本。 它包含 richtext
构件(RTE)和通过RTE插件机制添加的自定义功能的构件。自定义小部件和插件包含在名为的组件中 3. 自定义构件 的 使用ExtJS小组件 包。 要将此组件包含在示例页面中,请执行以下操作:
此 自定义多字段 基于构件的对话框会显示一个带有一个选项卡的窗口。 选项卡具有自定义的多字段构件,与具有一个字段的标准构件不同,该构件具有两个字段:一个包含两个选项的下拉菜单和一个文本字段。
此 自定义多字段 基于构件的对话框:
cq:Dialog
, xtype = [dialog](/docs/experience-manager-65/developing/components/classic-ui-components/xtypes.md#dialog)
)。cq:Widget
, xtype = [tabpanel](/docs/experience-manager-65/developing/components/classic-ui-components/xtypes.md#tabpanel)
)包含面板(节点类型= cq:Widget
, xtype = [panel](/docs/experience-manager-65/developing/components/classic-ui-components/xtypes.md#panel)
)。multifield
构件(节点类型= cq:Widget
, xtype = [multifield](/docs/experience-manager-65/developing/components/classic-ui-components/xtypes.md#multifield)
)。multifield
构件具有fieldconfig(节点类型= nt:unstructured
, xtype = ejstcustom
,选项提供程序= Ejst.x3.provideOptions
),基于自定义xtype
ejstcustom`':
‘ fieldconfig
'是 [CQ.form.MultiField](https://helpx.adobe.com/experience-manager/6-5/sites/developing/using/reference-materials/widgets-api/index.html?class=CQ.form.MultiField)
对象。
‘ optionsProvider
'是 ejstcustom
构件。 它通过 Ejst.x3.provideOptions
在中定义的方法 exercises.js
在:
/apps/extjstraining/clientlib/js/exercises.js
并返回2个选项。
multifield
节点位置:/apps/extjstraining/components/customwidgets/multifield
https://localhost:4502/apps/extjstraining/components/customwidgets/multifield.-1.json
自定义多字段小组件(xtype = ejstcustom
):
Ejst.CustomWidget
.CustomWidget.js
javascript文件位于:/apps/extjstraining/clientlib/js/CustomWidget.js
[CQ.form.CompositeField](https://helpx.adobe.com/experience-manager/6-5/sites/developing/using/reference-materials/widgets-api/index.html?class=CQ.form.CompositeField)
构件。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
之 CQ.form.CompositeField 要以格式设置和检索CustomWidget的值,请执行以下操作:<allowField value>/<otherField value>, e.g.: 'Bla1/hello'
。ejstcustom
’ xtype:CQ.Ext.reg('ejstcustom', Ejst.CustomWidget);
的 自定义多字段 基于小组件的对话框如下所示:
自定义 树浏览 基于构件的对话框显示一个窗口,其中有一个选项卡包含自定义路径浏览构件:单击箭头时,将打开一个窗口,您可以在其中浏览层次结构并选择项目。 然后,该项的路径将添加到路径字段中,并在对话框关闭时保留。
The custom treebrowse dialog:
cq:Dialog
[dialog](/docs/experience-manager-65/developing/components/classic-ui-components/xtypes.md#dialog)
cq:Widget
[tabpanel](/docs/experience-manager-65/developing/components/classic-ui-components/xtypes.md#tabpanel)
cq:Widget
[panel](/docs/experience-manager-65/developing/components/classic-ui-components/xtypes.md#panel)
cq:Widget
, xtype = ejstbrowse
)treebrowse
节点位置:/apps/extjstraining/components/customwidgets/treebrowse
https://localhost:4502/apps/extjstraining/components/customwidgets/treebrowse.-1.json
自定义树状浏览构件(xtype = ejstbrowse
):
Ejst.CustomWidget
.CustomBrowseField.js
javascript文件位于:/apps/extjstraining/clientlib/js/CustomBrowseField.js
[CQ.Ext.form.TriggerField](https://helpx.adobe.com/experience-manager/6-5/sites/developing/using/reference-materials/widgets-api/index.html?class=CQ.Ext.form.TriggerField)
.browseWindow
. [CQ.Ext.form.TriggerField](https://helpx.adobe.com/experience-manager/6-5/sites/developing/using/reference-materials/widgets-api/index.html?class=CQ.Ext.form.TriggerField)#onTriggerClick
在单击箭头时显示浏览窗口。/bin/wcm/siteadmin/tree.json
.apps/extjstraining
“。window
对象( [CQ.Ext.Window](https://helpx.adobe.com/experience-manager/6-5/sites/developing/using/reference-materials/widgets-api/index.html?class=CQ.Ext.Window)
):
show
事件。ejstbrowse
’ xtype:CQ.Ext.reg('ejstbrowse', Ejst.CustomBrowseField);
要使用 自定义Treebrowse 基于构件的对话框:
此 富文本编辑器(RTE)插件 基于对话框是一个基于富文本编辑器的对话框,它有一个自定义按钮来在方括号内插入一些自定义文本。 自定义文本可以通过某些服务器端逻辑(在本示例中未实现)来解析,例如,添加在给定路径中定义的一些文本:
此 RTE插件 基于的对话框:
/apps/extjstraining/components/customwidgets/rteplugin
https://localhost:4502/apps/extjstraining/components/customwidgets/rteplugin.-1.json
rtePlugins
节点具有子节点 inserttext
(节点类型= nt:unstructured
),该插件以插件命名。 它有一个属性,名为 features
,定义RTE可用的插件功能。RTE插件:
Ejst.InsertTextPlugin
.InsertTextPlugin.js
javascript文件位于:/apps/extjstraining/clientlib/js/InsertTextPlugin.js
[CQ.form.rte.plugins.Plugin](https://helpx.adobe.com/experience-manager/6-5/sites/developing/using/reference-materials/widgets-api/index.html?class=CQ.form.rte.plugins.Plugin)
对象。 [CQ.form.rte.plugins.Plugin](https://helpx.adobe.com/experience-manager/6-5/sites/developing/using/reference-materials/widgets-api/index.html?class=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
对象定义在单击插件按钮时打开的对话框。 该对话框包含一个面板、一个表单、一个文本字段和两个按钮(确定 和 取消)。要使用 富文本编辑器(RTE)插件 基于的对话框:
此 富文本编辑器(RTE)插件 基于的对话框显示如下:
此示例仅显示如何实施逻辑的客户端部分:占位符([文本]),则必须在服务器端进行显式解析(例如,在组件JSP中)。
开箱即用 [CQ.Ext.tree.TreePanel](https://helpx.adobe.com/experience-manager/6-5/sites/developing/using/reference-materials/widgets-api/index.html?class=CQ.Ext.tree.TreePanel)
对象提供树结构化数据的树结构化用户界面表示。 包含在 使用ExtJS小组件 包中显示了如何使用 TreePanel
对象,以在给定路径下显示JCR树。 窗口本身可以停靠/取消停靠。 在此示例中,窗口逻辑嵌入到组件jsp中,介于 <script></script> 标记之间。
要包含 树概述 示例页面的组件:
组件显示如下:
树概述组件:
定义于:
/apps/extjstraining/components/treeoverview
其对话框允许设置窗口的大小并停靠/取消停靠窗口(请参阅下面的详细信息)。
组件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](https://helpx.adobe.com/experience-manager/6-5/sites/developing/using/reference-materials/widgets-api/index.html?class=CQ.Ext.Window)
)的设置基于预定义的 treePanel
、和的显示方式:tree.show();
组件对话框:
cq:Dialog
, xtype = [panel](/docs/experience-manager-65/developing/components/classic-ui-components/xtypes.md#panel)
)。cq:Widget
, xtype = [sizefield](/docs/experience-manager-65/developing/components/classic-ui-components/xtypes.md#sizefield)
)和选择小组件(节点类型= cq:Widget
, xtype = [selection](/docs/experience-manager-65/developing/components/classic-ui-components/xtypes.md#selection)
,类型= radio
)和2个选项(true/false)/apps/extjstraining/components/treeoverview/dialog
https://localhost:4502/apps/extjstraining/components/treeoverview/dialog.-1.json
网格面板以行和列的表格格式表示数据。 它由以下部分组成:
网格概述组件包含在 使用ExtJS小组件 包显示如何以表格格式显示数据:
要将Grid Overview组件包括在示例页中,请执行以下操作:
组件显示如下:
在其开箱即用版本中, 网格概述 组件以表格格式显示带有静态数据的窗口。 在此示例中,逻辑通过两种方式嵌入到组件jsp中:
网格概述组件:
/apps/extjstraining/components/gridoverview
组件jsp:
从存储库中检索宽度、高度和停靠属性。
Displays some text as introduction to the grid overview data format.
References javascript code that defines the GridPanel object:
<script type="text/javascript" src="/apps/extjstraining/components/gridoverview/defaultgrid.js"></script>
defaultgrid.js
在javascript标记之间嵌入javascript代码,这些标记定义了使用GridPanel对象的Window对象。
定义于:
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](https://helpx.adobe.com/experience-manager/6-5/sites/developing/using/reference-materials/widgets-api/index.html?class=CQ.Ext.Window)
对象,基于预定义的GridPanel,并显示: grid.show();
grid
已存在,则会根据从存储库检索到的宽度、高度和停靠属性来显示它。Javascript文件( defaultgrid.js
)组件jsp中引用的 getGridPanel()
方法,该方法由嵌入在JSP中的脚本调用,并返回 [CQ.Ext.grid.GridPanel](https://helpx.adobe.com/experience-manager/6-5/sites/developing/using/reference-materials/widgets-api/index.html?class=CQ.Ext.grid.GridPanel)
对象,基于静态数据。 其逻辑如下:
myData
是一个静态数据数组,格式为包含5列和4行的表。store
是 CQ.Ext.data.Store
使用对象 myData
.store
已加载到内存中:store.load();
gridPanel
是 [CQ.Ext.grid.GridPanel](https://helpx.adobe.com/experience-manager/6-5/sites/developing/using/reference-materials/widgets-api/index.html?class=CQ.Ext.grid.GridPanel)
使用对象 store
:
列宽会始终重新分配:
forceFit: true
一次只能选择一行:
singleSelect:true
安装软件包时, content.jsp
的 网格概述 组件显示基于静态数据的网格。 可以修改该组件以显示具有以下特征的网格:
test
属性,该属性位于由第一列中显示的路径定义的节点下。如前面一节中所述,窗口对象将获取其 [CQ.Ext.grid.GridPanel](https://helpx.adobe.com/experience-manager/6-5/sites/developing/using/reference-materials/widgets-api/index.html?class=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文件:
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](https://helpx.adobe.com/experience-manager/6-5/sites/developing/using/reference-materials/widgets-api/index.html?class=CQ.Ext.grid.GridPanel)
对象,基于从存储库动态检索的数据。 中的逻辑 referencesearch.js
将某些动态数据定义为GridPanel的基础:
reader
是 [CQ.Ext.data.JsonReader](https://helpx.adobe.com/experience-manager/6-5/sites/developing/using/reference-materials/widgets-api/index.html?class=CQ.Ext.data.JsonReader)
对象,读取json格式的servlet响应,共3列。cm
是 [CQ.Ext.grid.ColumnModel](https://helpx.adobe.com/experience-manager/6-5/sites/developing/using/reference-materials/widgets-api/index.html?class=CQ.Ext.grid.ColumnModel)
对象,共3列。editor: new [CQ.Ext.form.TextField](https://helpx.adobe.com/experience-manager/6-5/sites/developing/using/reference-materials/widgets-api/index.html?class=CQ.Ext.form.TextField)({})
cm.defaultSortable = true;
store
是 [CQ.Ext.data.GroupingStore](https://helpx.adobe.com/experience-manager/6-5/sites/developing/using/reference-materials/widgets-api/index.html?class=CQ.Ext.data.GroupingStore)
对象:
/bin/querybuilder.json
''并使用一些参数筛选查询reader
,预先定义gridPanel
是 [CQ.Ext.grid.EditorGridPanel](https://helpx.adobe.com/experience-manager/6-5/sites/developing/using/reference-materials/widgets-api/index.html?class=CQ.Ext.grid.EditorGridPanel)
可以编辑的对象:
它基于预定义的 store
在列模型上 cm
一次只能选择一行:
sm: new [CQ.Ext.grid.RowSelectionModel](https://helpx.adobe.com/experience-manager/6-5/sites/developing/using/reference-materials/widgets-api/index.html?class=CQ.Ext.grid.RowSelectionModel)({singleSelect:true})
此 afteredit
侦听器确保在''中的单元格之后测试“ ”列已编辑:
test
“”定义的路径下节点的“ ”jcr:path“ ”列在存储库中设置单元格值store
对象,否则拒绝该对象