本页介绍了在经典UI中使用构件(AEM 6.4中已弃用)的情况。
Adobe建议您基于Coral UI和Granite UI,利用新式的触屏优化UI。
Adobe Experience Manager的基于Web的界面使用AJAX和其他现代浏览器技术,使作者能够直接在网页上对内容进行WYSIWYG编辑和格式化。
Adobe Experience Manager(AEM)使用ExtJS构件库,它提供高度精致的用户界面元素,这些元素可以跨所有最重要的浏览器工作,并允许创建桌面级UI体验。
这些构件包含在AEM中,除了由AEM本身使用外,还可供使用AEM构建的任何网站使用。
有关AEM中所有可用构件的完整引用,请参阅构件API文档或现有xtypes](/docs/experience-manager-65/sites-developing/xtypes.html?lang=zh-Hans)的[列表。 此外,Sencha站点上还提供了许多说明如何使用ExtJS框架的示例,该站点是框架的所有者。
本页对如何使用和扩展构件提供了一些见解。 它首先描述如何在页面中包含客户端代码。 然后,它描述了为说明一些基本用途和扩展而创建的一些示例组件。 这些组件在包共享上的使用ExtJS构件包中可用。
该包包括以下示例:
Adobe Experience Manager的经典UI基于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"/><%
}
要按照本页中的教程操作,请在本地AEM实例中安装名为使用ExtJS构件的包,并创建一个包含这些组件的示例页面。 为此,请执行以下操作:
/apps
下创建项目extjstraining
。/apps/geometrixx/components/page/headlibs.jsp
并将cq.extjstraining
类别添加到现有的<ui:includeClientLib>
标签中,如下所示:%><ui:includeClientLib categories="apps.geometrixx-main, cq.extjstraining"/><%
/content/geometrixx/en/products
下的Geometrixx分支中创建新页面,并将其命名为使用ExtJS构件。本页中的示例基于Geometrixx示例内容,该内容不再随AEM一起提供,而已被We.Retail替换。 有关如何下载和安装文档,请参见GeometrixxWe.Retail Reference Implementation。
对话框通常用于编辑内容,但也只能显示信息。 视图完整对话框的一种简单方法是访问其json格式的表示形式。 为此,请将浏览器指向:
https://localhost:4502/<path-to-dialog>.-1.json
Sidekick中使用ExtJS构件组的第一个组件称为1。 对话框基础知识,包括四个基本对话框,这些基本对话框是使用现成构件构建的,并且没有自定义的javascript逻辑。 对话框存储在/apps/extjstraining/components/dialogbasics
下。 基本对话框包括:
full
节点):它显示一个包含3个选项卡的窗口,每个选项卡都包含2个文本字段。singlepanel
节点):它显示一个窗口,其中包含1个选项卡,其中包含2个文本字段。multipanel
节点):其显示与“完整”对话框相同,但构建方式不同。design
节点):它显示一个包含2个选项卡的窗口。 第一个选项卡具有文本字段、下拉菜单和可折叠的文本区域。 第二个选项卡具有一个字段集(4个文本字段)和一个可折叠字段集(2个文本字段)。包括1。 示例页面中的对话框基础知识组件:
组件显示如下:
Full对话框显示一个窗口,其中包含三个选项卡,每个选项卡都包含两个文本字段。 它是对话框基础组件的默认对话框。 其特点是:
cq:Dialog
, xtype = [dialog](/docs/experience-manager-65/sites-developing/xtypes.md#dialog)
。cq:Panel
)。cq:Widget
, xtype = [textfield](/docs/experience-manager-65/sites-developing/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/sites-developing/xtypes.md#panel)
)cq:Widget
, xtype = [textfield](/docs/experience-manager-65/sites-developing/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/sites-developing/xtypes.md#tabpanel)
)。cq:Panel
)。cq:Widget
, xtype = [textfield](/docs/experience-manager-65/sites-developing/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/sites-developing/xtypes.md#dialog)
)。cq:Panel
)。 [dialogfieldset](/docs/experience-manager-65/sites-developing/xtypes.md#dialogfieldset)
构件(带有 [textfield](/docs/experience-manager-65/sites-developing/xtypes.md#textfield)
)和 [selection](/docs/experience-manager-65/sites-developing/xtypes.md#selection)
构件(带有3个选项),以及带有 [textarea](/docs/experience-manager-65/sites-developing/xtypes.md#textarea)
构件的可折叠 [dialogfieldset](/docs/experience-manager-65/sites-developing/xtypes.md#dialogfieldset)
。 [textfield](/docs/experience-manager-65/sites-developing/xtypes.md#textfield)
构件的 [dialogfieldset](/docs/experience-manager-65/sites-developing/xtypes.md#dialogfieldset)
构件和带2个 [textfield](/docs/experience-manager-65/sites-developing/xtypes.md#textfield)
构件的可折叠dialogfieldset
。/apps/extjstraining/components/dialogbasics/rich
https://localhost:4502/apps/extjstraining/components/dialogbasics/rich.-1.json
要使用Rich对话框:
Sidekick中使用ExtJS构件组的第二个组件称为2。 动态对话框,包括三个动态对话框,它们使用现成构件构建,使用自定义的javascript逻辑。 对话框存储在/apps/extjstraining/components/dynamicdialogs
下。 动态对话框包括:
switchtabs
节点):它显示一个包含两个选项卡的窗口。 第一个选项卡有一个单选按钮选项,其中包含三个选项:选择某个选项时,将显示与该选项相关的选项卡。 第二个选项卡包含两个文本字段。arbitrary
节点):它显示一个带有一个选项卡的窗口。 该选项卡包含一个用于拖放或上传资产的字段,以及一个用于显示有关包含页面以及资产(如果引用了页面)的某些信息的字段。togglefield
节点):它显示一个带有一个选项卡的窗口。 该选项卡包含复选框:选中后,将显示包含两个文本字段的字段集。包含2。 示例页面上的动态对话框组件:
组件显示如下:
交换机选项卡对话框显示一个包含两个选项卡的窗口。 第一个选项卡有一个单选按钮选项,其中包含三个选项:选择某个选项时,将显示与该选项相关的选项卡。 第二个选项卡包含两个文本字段。
其主要特点是:
cq:Dialog
, xtype = [dialog](/docs/experience-manager-65/sites-developing/xtypes.md#dialog)
)。cq:Panel
):1选项卡,第2个选项卡取决于第1个选项卡(3个选项)中的选择。cq:Panel
),每个选项卡都有2个文本字段(节点类型= cq:Widget
, xtype = [textfield](/docs/experience-manager-65/sites-developing/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
”事件):
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
是包含所有选项卡的tabpanel
index
是可选选项卡的索引
tabPanel.hideTabStripItem(index)
隐藏选项卡
它显示如下:
通常,对话框会显示基础组件中的内容。 此处描述的对话框称为Arbitary对话框,它从其他组件中提取内容。
任意对话框显示一个带有一个选项卡的窗口。 选项卡包含两个字段:一个用于拖放或上传资产,另一个用于显示有关包含页面以及资产(如果某个页面已被引用)的某些信息。
其主要特点是:
cq:Dialog
, xtype = [dialog](/docs/experience-manager-65/sites-developing/xtypes.md#dialog)
)。cq:Widget
, xtype = [tabpanel](/docs/experience-manager-65/sites-developing/xtypes.md#tabpanel)
),带有1个面板(节点类型= cq:Panel
)cq:Widget
, xtype = [smartfile](/docs/experience-manager-65/sites-developing/xtypes.md#smartfile)
)和一个ownerdraw构件(节点类型= cq:Widget
, xtype = [ownerdraw](/docs/experience-manager-65/sites-developing/xtypes.md#ownerdraw)
)arbitrary
节点在以下位置定义:/apps/extjstraining/components/dynamicdialogs/arbitrary
https://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/cn/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/sites-developing/xtypes.md#dialog)
)。cq:Widget
, xtype = [tabpanel](/docs/experience-manager-65/sites-developing/xtypes.md#textpanel)
),其中1个面板(节点类型= cq:Panel
)。cq:Widget
, xtype = [selection](/docs/experience-manager-65/sites-developing/xtypes.md#selection)
,类型= [checkbox](/docs/experience-manager-65/sites-developing/xtypes.md#checkbox)
)和可折叠的对话框字段集构件(节点类型= cq:Widget
, xtype = [dialogfieldset](/docs/experience-manager-65/sites-developing/xtypes.md#dialogfieldset)
),默认情况下隐藏该构件,其中包含2个文本字段构件(节点类型= cq:Widget
, xtype = [textfield](/docs/experience-manager-65/sites-developing/xtypes.md#textfield)
)。togglefields
节点在以下位置定义:/apps/extjstraining/components/dynamicdialogs/togglefields
https://localhost:4502/apps/extjstraining/components/dynamicdialogs/togglefields.-1.json
该逻辑通过事件监听器和javascript代码实现,如下所示:
选择选项卡具有2个监听器:一个显示加载内容时的对话框字段集(" loadcontent
"事件),另一个显示更改选择时的对话框字段集(" 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
显示或不显示对话框字段集
要使用切换字段对话框:
AEM附带的现成构件应涵盖大多数使用案例。 但是,有时可能需要创建自定义构件来满足特定项目的要求。 可通过扩展现有构件来创建自定义构件。 为帮助您开始进行此类自定义,使用ExtJS构件包中包含三个使用三个不同自定义构件的对话框:
multifield
节点)显示一个带有一个选项卡的窗口。 该选项卡具有一个自定义的多字段构件,该构件具有两个字段:包含两个选项的下拉菜单和一个文本字段。 由于它基于现成的multifield
构件(仅具有文本字段),因此它具有multifield
构件的所有功能。treebrowse
节点)显示一个窗口,其中有一个选项卡包含路径浏览构件:单击箭头时,将打开一个窗口,您可以在其中浏览层次结构并选择项目。 项目的路径随后会添加到路径字段,并在关闭对话框时保留。rteplugin
节点),它向富文本编辑器中添加一个自定义按钮,将一些自定义文本插入主文本。 它由richtext
构件(RTE)和通过RTE插件机制添加的自定义功能组成。自定义构件和插件包含在名为3的组件中。使用ExtJS Widgets 包的自定义构件。 要将此组件包含到示例页面,请执行以下操作:
基于自定义多字段构件的对话框显示一个带有一个选项卡的窗口。 该选项卡具有自定义的多字段构件,该构件与具有一个字段的标准构件不同,具有两个字段:包含两个选项的下拉菜单和一个文本字段。
基于自定义多字段构件的对话框:
cq:Dialog
, xtype = [dialog](/docs/experience-manager-65/sites-developing/xtypes.md#dialog)
)。cq:Widget
, xtype = [tabpanel](/docs/experience-manager-65/sites-developing/xtypes.md#tabpanel)
),其中包含一个面板(节点类型= cq:Widget
, xtype = [panel](/docs/experience-manager-65/sites-developing/xtypes.md#panel)
)。multifield
构件(节点类型= cq:Widget
, xtype = [multifield](/docs/experience-manager-65/sites-developing/xtypes.md#multifield)
)。multifield
构件具有基于自定义xtype ' ejstcustom
'的fieldconfig(节点类型= nt:unstructured
, xtype = ejstcustom
, optionsProvider = Ejst.x3.provideOptions
):
“ fieldconfig
”是 [CQ.form.MultiField](https://helpx.adobe.com/cn/experience-manager/6-5/sites/developing/using/reference-materials/widgets-api/index.html?class=CQ.form.MultiField)
对象的配置选项。
“ optionsProvider
”是ejstcustom
构件的配置。 它使用exercises.js
中定义的Ejst.x3.provideOptions
方法进行设置,具体位置为:
/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
的javascript对象。CustomWidget.js
javascript文件中定义:/apps/extjstraining/clientlib/js/CustomWidget.js
[CQ.form.CompositeField](https://helpx.adobe.com/cn/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
是类型为 “select” 的CQ.form.Selectionobject。optionsProvider是Selection对象的配置,它使用对话框中定义的CustomWidget的optionsProvider配置进行实例化otherField
是 CQ.Ext.form. TextFieldobjectsetValue
、getValue
和getRawValue
方法,以设置和检索格式为CustomWidget的值:<allowField value>/<otherField value>, e.g.: 'Bla1/hello'
。ejstcustom
” xtype:CQ.Ext.reg('ejstcustom', Ejst.CustomWidget);
基于自定义多字段构件的对话框显示如下:
基于自定义树状浏览构件的对话框显示一个窗口,其中含有一个包含自定义路径浏览构件的选项卡:单击箭头时,将打开一个窗口,您可以在其中浏览层次结构并选择项目。 项目的路径随后会添加到路径字段,并在关闭对话框时保留。
自定义树浏览对话框:
cq:Dialog
, xtype = [dialog](/docs/experience-manager-65/sites-developing/xtypes.md#dialog)
)。cq:Widget
, xtype = [tabpanel](/docs/experience-manager-65/sites-developing/xtypes.md#tabpanel)
),其中包含一个面板(节点类型= cq:Widget
, xtype = [panel](/docs/experience-manager-65/sites-developing/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
的javascript对象。CustomBrowseField.js
javascript文件中定义:/apps/extjstraining/clientlib/js/CustomBrowseField.js
[CQ.Ext.form.TriggerField](https://helpx.adobe.com/cn/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/cn/experience-manager/6-5/sites/developing/using/reference-materials/widgets-api/index.html?class=CQ.Ext.form.TriggerField)#onTriggerClick
,在单击箭头时显示浏览窗口。/bin/wcm/siteadmin/tree.json
注册的servlet获取其数据。apps/extjstraining
”。window
对象( [CQ.Ext.Window](https://helpx.adobe.com/cn/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);
要使用基于自定义树状浏览构件的对话框:
基于富文本编辑器(RTE)插件的对话框是基于富文本编辑器的对话框,该对话框包含一个自定义按钮,用于在方括号内插入一些自定义文本。 自定义文本可由某些服务器端逻辑分析(本例中未实现),例如添加在给定路径中定义的一些文本:
基于RTE plugin的对话框:
/apps/extjstraining/components/customwidgets/rteplugin
https://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](https://helpx.adobe.com/cn/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/cn/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()
的方法调用,单击OKbutton时 将触发。inserttext
”插件:CQ.form.rte.plugins.PluginRegistry.register("inserttext", Ejst.InsertTextPlugin);
Ejst.InsertTextPlugin.Dialog
对象定义单击插件按钮时打开的对话框。 该对话框由面板、表单、文本字段和2个按钮(OK和Cancel)组成。要使用基于富文本编辑器(RTE)插件的对话框:
基于富文本编辑器(RTE)插件的对话框显示如下:
此示例仅说明如何实现逻辑的客户端部分:占位符([text])随后必须在服务器端显式地进行分析(例如,在组件JSP中)。
现成的 [CQ.Ext.tree.TreePanel](https://helpx.adobe.com/cn/experience-manager/6-5/sites/developing/using/reference-materials/widgets-api/index.html?class=CQ.Ext.tree.TreePanel)
对象提供树结构化数据的树结构化UI表示。 使用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/cn/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/sites-developing/xtypes.md#panel)
)。cq:Widget
, xtype = [sizefield](/docs/experience-manager-65/sites-developing/xtypes.md#sizefield)
)和一个选择构件(节点类型= cq:Widget
, xtype = [selection](/docs/experience-manager-65/sites-developing/xtypes.md#selection)
, type = radio
),其中包含2个选项(true/false)/apps/extjstraining/components/treeoverview/dialog
https://localhost:4502/apps/extjstraining/components/treeoverview/dialog.-1.json
网格面板以行和列的表格格式表示数据。 它由以下几部分组成:
使用ExtJS构件包中包含的“网格概述”组件显示了如何以表格格式显示数据:
要将“网格概述”组件包含到示例页面,请执行以下操作:
组件显示如下:
在其现成版本中,网格概述组件以表格格式显示包含静态数据的窗口。 在此示例中,逻辑以两种方式嵌入到组件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对象的Window对象。
定义于:
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](https://helpx.adobe.com/cn/experience-manager/6-5/sites/developing/using/reference-materials/widgets-api/index.html?class=CQ.Ext.Window)
于预定义的GridPanel的对象,并显示: grid.show();
grid
已存在,则根据从存储库检索到的宽度、高度和坞站属性来显示它。组件jsp中引用的javascript文件(defaultgrid.js
)定义了由嵌入在JSP中的脚本调用的getGridPanel()
方法,并基于静态数据返回 [CQ.Ext.grid.GridPanel](https://helpx.adobe.com/cn/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/cn/experience-manager/6-5/sites/developing/using/reference-materials/widgets-api/index.html?class=CQ.Ext.grid.GridPanel)
耗的对象 store
:
列宽会随时重新比例:
forceFit: true
一次只能选择一行:
singleSelect:true
安装包时,Grid Overview组件的content.jsp
将显示一个基于静态数据的网格。 可以修改组件以显示具有以下特征的网格:
test
属性中。如前面一节所述,窗口对象通过调用defaultgrid.js
文件/apps/extjstraining/components/gridoverview/defaultgrid.js
中定义的getGridPanel()
方法获取其 [CQ.Ext.grid.GridPanel](https://helpx.adobe.com/cn/experience-manager/6-5/sites/developing/using/reference-materials/widgets-api/index.html?class=CQ.Ext.grid.GridPanel)
对象。 网格概述组件为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(referencesearch.js
)中引用的javascript代码定义从组件jsp调用的getGridPanel()
方法,并根据从存储库动态检索的数据返回 [CQ.Ext.grid.GridPanel](https://helpx.adobe.com/cn/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/cn/experience-manager/6-5/sites/developing/using/reference-materials/widgets-api/index.html?class=CQ.Ext.data.JsonReader)
个对象,它以json格式读取3列的servlet响应。cm
是3 [CQ.Ext.grid.ColumnModel](https://helpx.adobe.com/cn/experience-manager/6-5/sites/developing/using/reference-materials/widgets-api/index.html?class=CQ.Ext.grid.ColumnModel)
列的对象。可以编辑“测试”列单元格,因为它们是使用编辑器定义的:editor: new [CQ.Ext.form.TextField](https://helpx.adobe.com/cn/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/cn/experience-manager/6-5/sites/developing/using/reference-materials/widgets-api/index.html?class=CQ.Ext.data.GroupingStore)
象:
/bin/querybuilder.json
”的servlet获取其查询,其中使用一些参数来过滤该数据reader
,预先定义gridPanel
是可 [CQ.Ext.grid.EditorGridPanel](https://helpx.adobe.com/cn/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/cn/experience-manager/6-5/sites/developing/using/reference-materials/widgets-api/index.html?class=CQ.Ext.grid.RowSelectionModel)({singleSelect:true})
afteredit
监听器确保在“Test”列中的单元格被编辑后:
test
”,其值为单元格store
对象,否则它将被拒绝