使用和扩展小组件(经典UI) using-and-extending-widgets-classic-ui

NOTE
本页介绍经典UI中构件的使用,AEM 6.4已弃用该构件。
Adobe建议您使用 触屏优化UI 基于 Coral UIGranite UI.

Adobe Experience Manager (AEM)基于Web的界面使用AJAX和其他现代浏览器技术,支持作者在网页上通过WYSIWYG编辑和格式化内容。

AEM使用 ExtJS widgets库提供了经过高度完善的用户界面元素,这些元素可在所有最重要的浏览器中使用,并允许创建桌面级的UI体验。

这些构件包含在AEM中,除了AEM本身的使用之外,还可以由使用AEM构建的任何网站使用。

有关AEM中所有可用小组件的完整参考,请参见 构件API文档现有xtype的列表. 此外,上提供了许多说明如何使用ExtJS框架的示例 森查 站点的所有者。

本页提供了有关如何使用和扩展构件的某些见解。 它首先介绍如何 在页面中包含客户端代码. 然后,它描述了一些已创建的示例组件,以说明一些基本用法和扩展。 这些组件在以下位置提供: 使用ExtJS小组件 打包 包共享.

此包中包含以下示例:

NOTE
Adobe Experience Manager的经典用户界面构建于 ExtJS 3.4.0.

在页面中包含客户端代码 including-the-client-sided-code-in-a-page

客户端的JavaScript和样式表代码应放置在客户端库中。

要创建客户端库,请执行以下操作:

  1. 在下创建节点 /apps/<project> 具有以下属性:

    • name="clientlib"
    • jcr:mixinTypes="[mix:lockable]"
    • jcr:primaryType="cq:ClientLibraryFolder"
    • sling:resourceType="widgets/clientlib"
    • 类别="[<category-name>]"
    • 依赖项="[cq.widget]"

    Note: <category-name> is the name of the custom library (for example, "cq.extjstraining") and is used to include the library on the page.

  2. 以下 clientlib 创建 cssjs 文件夹(nt:folder)。

  3. 以下 clientlib 创建 css.txtjs.txt 文件(nt:files)。 这些.txt文件列出库中包含的文件。

  4. 编辑 js.txt:必须以'开头 #base=js'后跟CQ客户端库服务聚合的文件列表,例如:

    code language-none
    #base=js
     components.js
     exercises.js
     CustomWidget.js
     CustomBrowseField.js
     InsertTextPlugin.js
    
  5. 编辑 css.txt:必须以'开头 #base=css'后跟CQ客户端库服务聚合的文件列表,例如:

    code language-none
    #base=css
     components.css
    
  6. js 文件夹中,放置属于库的JavaScript文件。

  7. css 文件夹,放置 .css css文件使用的文件和资源(例如, my_icon.png)。

NOTE
之前描述的样式表的处理是可选的。

要在页面组件jsp中包含客户端库,请执行以下操作:

  • 要同时包含JavaScript代码和样式表,请执行以下操作:
    <ui:includeClientLib categories="<category-name1>, <category-name2>, ..."/>
    位置 <category-nameX> 是客户端库的名称。

  • 要仅包含JavaScript代码,请执行以下操作:
    <ui:includeClientLib js="<category-name>"/>

有关详细信息,请参阅标记的说明 <ui:includeClientLib> 。</ui:includeClientLib>

有时,客户端库应仅在创作模式下可用,而在发布模式下应排除。 可以按如下方式实现:

    if (WCMMode.fromRequest(request) != WCMMode.DISABLED) {
        %><ui:includeClientLib categories="cq.collab.blog"/><%
    }

示例快速入门 getting-started-with-the-samples

要遵循此页面上的教程,请安装包 使用ExtJS小组件 在本地AEM实例中创建,并创建一个包含组件的示例页面。 为此,请执行以下操作:

  1. 在AEM实例中,下载名为的包 使用ExtJS小组件(v01) 从包共享中,安装包。 它会创建项目 extjstraining 以下 /apps 在存储库中。
  2. 将包含脚本(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"/><%
  3. 在中创建页面 Geometrixx 分支如下 /content/geometrixx/en/products 并称其为 使用ExtJS小组件.
  4. 进入设计模式,添加名为的组的所有组件 使用ExtJS小组件 到Geometrixx的设计
  5. 返回编辑模式:组的组件 使用ExtJS小组件 在Sidekick中可用。
NOTE
此页面上的示例基于Geometrixx示例内容,该内容不再随AEM一起提供,已被We.Retail取代。 请参阅 We.Retail参考实施 了解如何下载和安装Geometrixx。

基本对话框 basic-dialogs

对话框通常用于编辑内容,但也可以显示信息。 查看完整对话框的一个简单方法是以json格式访问其表示形式。 为此,请将浏览器指向:

https://localhost:4502/<path-to-dialog>.-1.json

第一个组件 使用ExtJS小组件 Sidekick中的组名为 1. Dialogue基础 并且包含四个使用现成小组件构建的基本对话框,这些对话框无需自定义JavaScript逻辑。 对话框存储在下方 /apps/extjstraining/components/dialogbasics. 基本对话框包括:

  • 完整对话框( full 节点):显示一个窗口,其中包含三个选项卡,每个选项卡都有两个文本字段。
  • 单面板对话框( singlepanel 节点):显示一个带有两个文本字段的选项卡的窗口。
  • 多面板对话框( multipanel 节点):其显示与“完整”对话框相同,但构建方式不同。
  • “设计”对话框( design 节点):显示一个带有两个选项卡的窗口。 第一个选项卡具有文本字段、下拉菜单和可折叠文本区域。 第二个选项卡有一个包含四个文本字段的字段集和一个包含两个文本字段的可折叠字段集。

包括 1. Dialogue基础 示例页面中的组件:

  1. 添加 1. Dialogue基础 组件到示例页面 使用ExtJS小组件 选项卡 Sidekick.
  2. 组件显示标题、某些文本和 属性 链接。 选择该链接将显示存储在存储库中的段落的属性。 再次选择链接可隐藏属性。

该组件显示如下:

chlimage_1-60

示例1:完整对话框 example-full-dialog

完整 对话框显示一个窗口,其中带有三个制表符,每个制表符都有两个文本字段。 这是 Dialogue基础 组件。 其特点是:

  • 由节点定义:节点类型= cq:Dialog, xtype = [dialog](/docs/experience-manager-65/content/implementing/developing/components/classic-ui-components/xtypes.md#dialog).
  • 显示三个选项卡(节点类型= cq:Panel)。
  • 每个选项卡都有两个文本字段(节点类型= cq:Widget, xtype = [textfield](/docs/experience-manager-65/content/implementing/developing/components/classic-ui-components/xtypes.md#textfield))。
  • 由节点定义:
    /apps/extjstraining/components/dialogbasics/full
  • 通过请求以JSON格式呈现:
    https://localhost:4502/apps/extjstraining/components/dialogbasics/full.-1.json

该对话框显示如下:

screen_shot_2012-01-31at45411pm

示例2:单面板对话框 example-single-panel-dialog

单个面板 对话框显示一个窗口,其中有一个选项卡具有两个文本字段。 其特点是:

  • 显示一个选项卡(节点类型= cq:Dialog, xtype = [panel](/docs/experience-manager-65/content/implementing/developing/components/classic-ui-components/xtypes.md#panel))
  • 选项卡有两个文本字段(节点类型= cq:Widget, xtype = [textfield](/docs/experience-manager-65/content/implementing/developing/components/classic-ui-components/xtypes.md#textfield))
  • 由节点定义:
    /apps/extjstraining/components/dialogbasics/singlepanel
  • 通过请求以json格式呈现:
    https://localhost:4502/apps/extjstraining/components/dialogbasics/singlepanel.-1.json
  • 比以下产品具有一项优势 完整对话框 就是只需要较少的配置。
  • 建议使用:用于显示信息或只有几个字段的简单对话框。

要使用单面板对话框,请执行以下操作:

  1. 替换对话框 Dialogue基础 包含的组件 单个面板 对话框:

    1. CRXDE Lite,删除节点: /apps/extjstraining/components/dialogbasics/dialog
    2. 单击 全部保存 以保存更改。
    3. 复制节点: /apps/extjstraining/components/dialogbasics/singlepanel
    4. 将复制的节点粘贴到下方: /apps/extjstraining/components/dialogbasics
    5. 选择节点: /apps/extjstraining/components/dialogbasics/Copy of singlepanel并为其重命名 dialog.
  2. 编辑组件:对话框显示如下:

screen_shot_2012-01-31at45952pm

示例3:多面板对话框 example-multi-panel-dialog

多面板 对话框的显示方式与 完整 对话框,但构建方式有所不同。 其特点是:

  • 由节点定义(节点类型= cq:Dialog, xtype = [tabpanel](/docs/experience-manager-65/content/implementing/developing/components/classic-ui-components/xtypes.md#tabpanel))。
  • 显示三个选项卡(节点类型 = cq:Panel)。
  • 每个选项卡有两个文本字段(节点类型 = cq:Widget, xtype = [textfield](/docs/experience-manager-65/content/implementing/developing/components/classic-ui-components/xtypes.md#textfield))。
  • 由节点定义:
    /apps/extjstraining/components/dialogbasics/multipanel
  • 通过请求以json格式呈现:
    https://localhost:4502/apps/extjstraining/components/dialogbasics/multipanel.-1.json
  • 比以下产品具有一项优势 完整对话框 就是它有一个简化的结构。
  • 建议使用:用于多选项卡对话框。

要使用“多面板”对话框,请执行以下操作:

  1. 替换对话框 Dialogue基础 包含的组件 多面板 对话框:请按照中所述的步骤进行操作。 示例2:单面板对话框
  2. 编辑组件:对话框显示如下:

screen_shot_2012-01-31at50119pm

示例4:富对话框 example-rich-dialog

富有 对话框显示一个带有两个选项卡的窗口。 第一个选项卡具有文本字段、下拉菜单和可折叠文本区域。 第二个选项卡有一个包含四个文本字段的字段集和一个包含两个文本字段的可折叠字段集。 其特点是:

  • 由节点定义(节点类型= cq:Dialog, xtype = [dialog](/docs/experience-manager-65/content/implementing/developing/components/classic-ui-components/xtypes.md#dialog))。
  • 显示两个选项卡(节点类型= cq:Panel)。
  • 第一个选项卡具有 [dialogfieldset](/docs/experience-manager-65/content/implementing/developing/components/classic-ui-components/xtypes.md#dialogfieldset) 带有构件 [textfield](/docs/experience-manager-65/content/implementing/developing/components/classic-ui-components/xtypes.md#textfield)[selection](/docs/experience-manager-65/content/implementing/developing/components/classic-ui-components/xtypes.md#selection) 包含三个选项和一个可折叠的构件 [dialogfieldset](/docs/experience-manager-65/content/implementing/developing/components/classic-ui-components/xtypes.md#dialogfieldset) 带有 [textarea](/docs/experience-manager-65/content/implementing/developing/components/classic-ui-components/xtypes.md#textarea) 构件。
  • 第二个标签具有 [dialogfieldset](/docs/experience-manager-65/content/implementing/developing/components/classic-ui-components/xtypes.md#dialogfieldset) 包含四个构件 [textfield](/docs/experience-manager-65/content/implementing/developing/components/classic-ui-components/xtypes.md#textfield) 构件和可折叠 dialogfieldset 具有两个 [textfield](/docs/experience-manager-65/content/implementing/developing/components/classic-ui-components/xtypes.md#textfield) 构件。
  • 由节点定义:
    /apps/extjstraining/components/dialogbasics/rich
  • 通过请求以json格式呈现:
    https://localhost:4502/apps/extjstraining/components/dialogbasics/rich.-1.json

要使用 富有 对话框:

  1. 替换对话框 Dialogue基础 包含的组件 富有 对话框:请按照中所述的步骤进行操作。 示例2:单面板对话框
  2. 编辑组件:对话框显示如下:

screen_shot_2012-01-31at50429pm screen_shot_2012-01-31at50519pm

动态对话框 dynamic-dialogs

的第二个组件 使用ExtJS小组件 Sidekick中的组名为 2. 动态对话框 并包含三个使用现成构件和构建的动态对话框 使用自定义的JavaScript逻辑. 对话框存储在下方 /apps/extjstraining/components/dynamicdialogs. 动态对话框包括:

  • “切换选项卡”对话框( switchtabs 节点):显示一个带有两个选项卡的窗口。 第一个选项卡具有一个带有三个选项的单选选项:当选中某个选项时,将显示与该选项相关的选项卡。 第二个选项卡有两个文本字段。
  • “任意”对话框( arbitrary 节点):显示带有一个选项卡的窗口。 选项卡中有一个字段用于放置或上传资产,还有一个字段用于显示有关容器页面以及资产(如果引用)的一些信息。
  • 切换字段对话框( togglefield 节点):显示带有一个选项卡的窗口。 该选项卡具有一个复选框:选中时,将显示一个字段集,其中包含两个文本字段。

要包含 2. 动态对话框 示例页面上的组件:

  1. 添加 2. 动态对话框 组件到示例页面 使用ExtJS小组件 选项卡 Sidekick.
  2. 组件显示标题、某些文本和 属性 链接。 选择该链接将显示存储在存储库中的段落的属性。 再次选择链接可隐藏属性。

该组件显示如下:

chlimage_1-61

示例1:切换选项卡对话框 example-switch-tabs-dialog

切换选项卡 对话框显示一个带有两个选项卡的窗口。 第一个选项卡具有一个带有三个选项的单选选项:当选中某个选项时,将显示与该选项相关的选项卡。 第二个选项卡有两个文本字段。

其主要特点是:

  • 由节点定义(节点类型= cq:Dialog, xtype = [dialog](/docs/experience-manager-65/content/implementing/developing/components/classic-ui-components/xtypes.md#dialog))。
  • 显示两个选项卡(节点类型= cq:Panel):一个选择选项卡,第二个选项卡取决于第一个选项卡中的选择(三个选项)。
  • 有三个可选选项卡(节点类型= cq:Panel),每个字段都有两个文本字段(节点类型= cq:Widget, xtype = [textfield](/docs/experience-manager-65/content/implementing/developing/components/classic-ui-components/xtypes.md#textfield))。 一次只显示一个可选选项卡。
  • 由定义 switchtabs 节点位于:
    /apps/extjstraining/components/dynamicdialogs/switchtabs
  • 通过请求以json格式呈现:
    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) 获取 tabpanel 包含选择面板和三个可选面板。
  • Ejst.x2 对象定义于 exercises.js 文件位于:
    /apps/extjstraining/clientlib/js/exercises.js
  • Ejst.x2.manageTabs() 方法,作为的值 index 为–1,所有可选选项卡都隐藏(i从1到3)。
  • 选择选项卡有两个监听器:其中一个在加载对话框时显示所选选项卡(" 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') 获取 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) 隐藏选项卡

它显示如下:

screen_shot_2012-02-01at114745am

示例2:任意对话框 example-arbitrary-dialog

通常,对话框会显示底层组件的内容。 此处介绍的对话框名为 任意 对话框,从其他组件中提取内容。

任意 对话框显示一个带有一个选项卡的窗口。 选项卡包含两个字段:一个用于放置或上传资源,另一个用于显示有关容器页面的一些信息,另一个用于显示有关资源的信息(如果已引用)。

其主要特点是:

  • 由节点定义(节点类型= cq:Dialog, xtype = [dialog](/docs/experience-manager-65/content/implementing/developing/components/classic-ui-components/xtypes.md#dialog))。
  • 显示一个 tabpanel 构件(节点类型= cq:Widget, xtype = [tabpanel](/docs/experience-manager-65/content/implementing/developing/components/classic-ui-components/xtypes.md#tabpanel))具有一个面板(节点类型= cq:Panel)
  • 面板具有smartfile小组件(节点类型= cq:Widget, xtype = [smartfile](/docs/experience-manager-65/content/implementing/developing/components/classic-ui-components/xtypes.md#smartfile))和ownerdraw小组件(节点类型= cq:Widget, xtype = [ownerdraw](/docs/experience-manager-65/content/implementing/developing/components/classic-ui-components/xtypes.md#ownerdraw))
  • 由定义 arbitrary 节点位于:
    /apps/extjstraining/components/dynamicdialogs/arbitrary
  • 通过请求以json格式呈现:
    https://localhost:4502/apps/extjstraining/components/dynamicdialogs/arbitrary.-1.json

该逻辑通过事件侦听器和JavaScript代码实现,如下所示:

  • ownerdraw 构件具有" 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

要使用 任意 对话框:

  1. 将动态对话框​ 组件 ​的​ 对话框替换为任意 ​对话框:
    按照示例 2: 单面板对话框中描述的步骤进行操作
  2. 编辑组件:对话框显示如下:

screen_shot_2012-02-01at115300am

示例3:切换字段对话框 example-toggle-fields-dialog

切换字段 对话框显示一个带有一个选项卡的窗口。 该选项卡有一个复选框:选中此选项后,将显示包含两个文本字段的字段集。

其主要特点是:

  • 由节点定义(节点类型 = cq:Dialog, xtype = [dialog](/docs/experience-manager-65/content/implementing/developing/components/classic-ui-components/xtypes.md#dialog))。
  • 显示一个 tabpanel 构件(节点类型 = cq:Widget, xtype = [tabpanel](/docs/experience-manager-65/content/implementing/developing/components/classic-ui-components/xtypes.md#textpanel))和一个面板(节点类型 = cq:Panel)。
  • 该面板包含一个选择/复选框小部件(节点类型 = cq:Widget, xtype = [selection](/docs/experience-manager-65/content/implementing/developing/components/classic-ui-components/xtypes.md#selection), 类型 = [checkbox](/docs/experience-manager-65/content/implementing/developing/components/classic-ui-components/xtypes.md#checkbox)) 和一个默认情况下处于隐藏状态的可折叠对话框字段集小部件(节点类型 = cq:Widget, xtype = [dialogfieldset](/docs/experience-manager-65/content/implementing/developing/components/classic-ui-components/xtypes.md#dialogfieldset)),其中包含两个文本字段构件(节点类型 = cq:Widget, xtype = [textfield](/docs/experience-manager-65/content/implementing/developing/components/classic-ui-components/xtypes.md#textfield))。
  • 由定义 togglefields 节点位于:
    /apps/extjstraining/components/dynamicdialogs/togglefields
  • 通过请求以json格式呈现:
    https://localhost:4502/apps/extjstraining/components/dynamicdialogs/togglefields.-1.json

该逻辑通过事件侦听器和JavaScript代码实现,如下所示:

  • “选择”选项卡有两个侦听器:其中一个在加载内容时显示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 是dialogfieldset对象;
    show 是所选内容的值(true或false);基于' show'是否显示dialogfieldset

要使用 切换字段 对话框,请执行以下操作:

  1. 替换对话框 动态对话框 包含的组件 切换字段 对话框:请按照中所述的步骤进行操作。 示例2:单面板对话框
  2. 编辑组件:对话框显示如下:

screen_shot_2012-02-01at115518am

自定义构件 custom-widgets

AEM附带的现成小组件应该涵盖大多数使用案例。 但是,有时可能有必要创建自定义构件以满足项目特定要求。 可通过扩展现有构件来创建自定义构件。 为了帮助您开始进行此类自定义,请使用 Using ExtJS Widgets 包中包含三个使用三个不同自定义小组件的对话框:

  • 多字段对话框( multifield 节点)显示带有一个选项卡的窗口。 选项卡具有一个自定义的多字段构件,该构件包含两个字段:一个是包含两个选项的下拉菜单,另一个是文本字段。 因为它基于开箱即用型 multifield 构件(仅具有文本字段),它具有 multifield 构件。
  • 树浏览对话框( treebrowse 节点)显示一个窗口,其中包含一个包含路径浏览小部件的选项卡:单击箭头时,将打开一个窗口,您可以在其中浏览层次结构并选择项目。 项目的路径随后将添加到路径字段,并在对话框关闭时保留。
  • 基于富文本编辑器插件的对话框( rteplugin 节点)来将自定义按钮添加到富文本编辑器,以将某些自定义文本插入到主文本。 它包含 richtext 以及通过RTE插件机制添加的自定义功能的构件(RTE)。

自定义小部件和插件包含在名为的组件中 3. 使用 ExtJS Widgets 包的​ 自定义 Widget。若要将此组件包含在示例页中,请执行以下操作:

  1. 添加 3. 自定义小部件 ​组件从 Sidekick 中的使用 ExtJS 小部件”选项卡到示例页面。
  2. 该组件会显示一个标题、一些文本,当单击“属性​ ​链接时,还会显示存储在存储库中的段落的属性。再次单击将隐藏属性。
    该组件显示如下:

chlimage_1-62

示例1:自定义多字段构件 example-custom-multifield-widget

自定义多字段 基于构件的对话框会显示一个带有一个选项卡的窗口。 选项卡具有自定义的多字段构件,与具有一个字段的标准构件不同,该构件具有两个字段:一个包含两个选项的下拉菜单和一个文本字段。

自定义多字段 基于构件的对话框:

  • 由节点定义(节点类型= cq:Dialog, xtype = [dialog](/docs/experience-manager-65/content/implementing/developing/components/classic-ui-components/xtypes.md#dialog))。

  • 显示一个 tabpanel 构件(节点类型= cq:Widget, xtype = [tabpanel](/docs/experience-manager-65/content/implementing/developing/components/classic-ui-components/xtypes.md#tabpanel))包含面板(节点类型= cq:Widget, xtype = [panel](/docs/experience-manager-65/content/implementing/developing/components/classic-ui-components/xtypes.md#panel))。

  • 面板具有 multifield 构件(节点类型= cq:Widget, xtype = [multifield](/docs/experience-manager-65/content/implementing/developing/components/classic-ui-components/xtypes.md#multifield))。

  • multifield 构件具有fieldconfig(节点类型= nt:unstructured, xtype = ejstcustom,选项提供程序= Ejst.x3.provideOptions),它基于自定义xtype ``ejstcustom`':

    • fieldconfig'是 [CQ.form.MultiField](https://developer.adobe.com/experience-manager/reference-materials/6-5/widgets-api/index.html?class=CQ.form.MultiField) 对象。

    • optionsProvider'是 ejstcustom 构件。 它通过 Ejst.x3.provideOptions 在中定义的方法 exercises.js 在:

      /apps/extjstraining/clientlib/js/exercises.js
      并返回两个选项。

  • 由定义 multifield 节点位于:
    /apps/extjstraining/components/customwidgets/multifield

  • 通过请求以json格式呈现:
    https://localhost:4502/apps/extjstraining/components/customwidgets/multifield.-1.json

自定义 multifield 构件(xtype = ejstcustom):

  • 是一个名为的JavaScript对象 Ejst.CustomWidget

  • 在中定义 CustomWidget.js JavaScript文件位于:
    /apps/extjstraining/clientlib/js/CustomWidget.js

  • 扩展 [CQ.form.CompositeField](https://developer.adobe.com/experience-manager/reference-materials/6-5/widgets-api/index.html?class=CQ.form.CompositeField) 构件。

  • 有三个字段: hiddenField (文本字段), allowField (ComboBox),和 otherField (文本字段)

  • 覆盖 CQ.Ext.Component#initComponent 添加三个字段:

    • allowFieldCQ.form.Selection 类型为“select”的对象。 optionsProvider是Selection对象的配置,通过对话框中定义的CustomWidget的optionsProvider配置实例化
    • otherFieldCQ.Ext.form.TextField 对象
  • 覆盖 setValueCQ.form.CompositeField🔗 的方法 、 getValuegetRawValue ,以设置和检索 CustomWidget 的值,格式为:
    <allowField value>/<otherField value>, for example: 'Bla1/hello'

  • 将其自身注册为' ejstcustom' xtype:
    CQ.Ext.reg('ejstcustom', Ejst.CustomWidget);

自定义多字段 基于构件的对话框如下所示:

screen_shot_2012-02-01at115840am

示例 2:自定义 Treebrowse 构件 example-custom-treebrowse-widget

基于自定义 Treebrowse 微件的对话框显示一个窗口,其中有一个选项卡包含自定义路径浏览微件。 选择箭头时,将打开一个窗口,您可以在其中浏览层次结构并选择项目。 然后将项目的路径添加到路径字段,并在对话框关闭时保留。

自定义 treebrowse 对话框:

  • 由节点定义(节点类型 = cq:Dialog, xtype = [dialog](/docs/experience-manager-65/content/implementing/developing/components/classic-ui-components/xtypes.md#dialog))。
  • 显示一个 tabpanel 构件(节点类型= cq:Widget, xtype = [tabpanel](/docs/experience-manager-65/content/implementing/developing/components/classic-ui-components/xtypes.md#tabpanel))包含面板(节点类型= cq:Widget, xtype = [panel](/docs/experience-manager-65/content/implementing/developing/components/classic-ui-components/xtypes.md#panel))。
  • 面板具有自定义构件(节点类型= cq:Widget, xtype = ejstbrowse)
  • 由定义 treebrowse 节点位于:
    /apps/extjstraining/components/customwidgets/treebrowse
  • 通过请求以json格式呈现:
    https://localhost:4502/apps/extjstraining/components/customwidgets/treebrowse.-1.json

自定义树状浏览构件(xtype = ejstbrowse):

  • 是一个名为的JavaScript对象 Ejst.CustomWidget

  • 在中定义 CustomBrowseField.js JavaScript文件位于:
    /apps/extjstraining/clientlib/js/CustomBrowseField.js

  • 扩展 [CQ.Ext.form.TriggerField](https://developer.adobe.com/experience-manager/reference-materials/6-5/widgets-api/index.html?class=CQ.Ext.form.TriggerField).

  • 定义一个名为的浏览窗口 browseWindow.

  • 覆盖 [CQ.Ext.form.TriggerField](https://developer.adobe.com/experience-manager/reference-materials/6-5/widgets-api/index.html?class=CQ.Ext.form.TriggerField)#onTriggerClick 在单击箭头时显示浏览窗口。

  • 定义 CQ.Ext.tree.TreePanel 对象:

    • 它通过调用注册于以下位置的servlet获取数据: /bin/wcm/siteadmin/tree.json.
    • 其根为" apps/extjstraining“。
  • 定义 window 对象( [CQ.Ext.Window](https://developer.adobe.com/experience-manager/reference-materials/6-5/widgets-api/index.html?class=CQ.Ext.Window)):

    • 基于预定义面板。
    • 有一个 确定 按钮,用于设置所选路径的值并隐藏面板。
  • 窗户固定于下方 路径 字段。

  • 所选路径将从浏览字段传递到上的窗口。 show 事件。

  • 将其自身注册为' ejstbrowse' xtype:
    CQ.Ext.reg('ejstbrowse', Ejst.CustomBrowseField);

要使用 自定义树浏览 基于构件的对话框:

  1. 替换对话框 自定义构件 包含的组件 自定义树浏览 对话框:请按照中所述的步骤进行操作。 示例2:单面板对话框
  2. 编辑组件:对话框显示如下:

screen_shot_2012-02-01at120104pm

示例 3:富文本编辑器 (RTE) 插件 example-rich-text-editor-rte-plug-in

基于富文本编辑器 (RTE) 插件 ​的对话框是基于富文本编辑器的对话框,其中包含一个自定义按钮,用于在方括号内插入一些自定义文本。自定义文本可以通过某些服务器端逻辑(在本示例中未实现)进行分析,例如,添加在给定路径上定义的一些文本:

基于 RTE 插件的 ​对话框:

  • 由以下位置的rteplugin节点定义:
    /apps/extjstraining/components/customwidgets/rteplugin
  • 通过请求以json格式呈现:
    https://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](https://developer.adobe.com/experience-manager/reference-materials/6-5/widgets-api/index.html?class=CQ.form.rte.plugins.Plugin) 对象。

  • 以下方法定义 [CQ.form.rte.plugins.Plugin](https://developer.adobe.com/experience-manager/reference-materials/6-5/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)插件 基于的对话框:

  1. 替换对话框 自定义构件 包含的组件 富文本编辑器(RTE)插件 基于的对话框:请按照中所述的步骤进行操作。 示例2:单面板对话框
  2. 编辑组件。
  3. 单击右侧的最后一个图标(带有四个箭头的图标)。 输入路径并单击 确定:路径显示在方括号中([ ])。
  4. 单击 确定 因此请关闭富文本编辑器。

基于富文本编辑器 (RTE) 插件 ​的对话框显示如下:

screen_shot_2012-02-01在120254下午

NOTE
此示例仅说明如何实施逻辑的客户端部分:占位符([文本])然后必须在服务器端显式解析(例如,在组件JSP中)。

树概述 tree-overview

开箱即用 [CQ.Ext.tree.TreePanel](https://developer.adobe.com/experience-manager/reference-materials/6-5/widgets-api/index.html?class=CQ.Ext.tree.TreePanel) 对象提供树形结构数据的用户界面表示。 使用 ExtJS Widgets 包中包含的 ​树概述组件显示了如何使用对象在TreePanel给定路径下方显示 JCR 树。窗口本身可以停靠/取消停靠。 在此示例中,窗口逻辑嵌入在组件 jsp 中的标记之间 <script> 。

要将树概述​ 组件 ​包含在示例页面中,请执行以下操作:

  1. 添加 4. 从 Sidekick 中的使用 ExtJS 小部件”选项卡中到示例页面的树概述​ 组件。

  2. 该组件显示:

    • 标题,带一些文本
    • a 属性 链接:单击以显示存储在存储库中的段落的属性。 再次单击可隐藏属性。
    • 带有可展开的存储库树表示的浮动窗口。

该组件显示如下:

screen_shot_2012-02-01at120639pm

树概述组件:

  • 定义于:
    /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](https://developer.adobe.com/experience-manager/reference-materials/6-5/widgets-api/index.html?class=CQ.Ext.Window))的设置基于预定义的 treePanel、和的显示方式:
    tree.show();

  • 如果存在该窗口,则会根据从存储库中检索到的宽度、高度和停靠属性显示该窗口。

组件对话框:

  • 显示一个选项卡,其中有两个字段用于设置树概览窗口的大小(宽度和高度),另一个字段用于固定/取消固定窗口
  • 由节点定义(节点类型= cq:Dialog, xtype = [panel](/docs/experience-manager-65/content/implementing/developing/components/classic-ui-components/xtypes.md#panel))。
  • 面板具有大小字段小组件(节点类型= cq:Widget, xtype = [sizefield](/docs/experience-manager-65/content/implementing/developing/components/classic-ui-components/xtypes.md#sizefield))和选择小组件(节点类型= cq:Widget, xtype = [selection](/docs/experience-manager-65/content/implementing/developing/components/classic-ui-components/xtypes.md#selection),类型= radio),具有两个选项(true/false)
  • 由对话框节点在以下位置定义:
    /apps/extjstraining/components/treeoverview/dialog
  • 通过请求以json格式呈现:
    https://localhost:4502/apps/extjstraining/components/treeoverview/dialog.-1.json
  • 显示如下:

screen_shot_2012-02-01at120745pm

网格概述 grid-overview

网格面板以行和列的表格格式表示数据。 它由以下部分组成:

  • 存储:保存数据记录(行)的模型。
  • 列模型:列的组成。
  • 视图:封装用户界面。
  • 选择模型:选择行为。

网格概述组件包含在 使用ExtJS小组件 包显示如何以表格格式显示数据:

  • 示例1使用静态数据。
  • 示例2使用从存储库中检索的数据。

要在示例页面中包含网格概述组件,请执行以下操作:

  1. 添加 5. 网格概述 组件到示例页面 使用ExtJS小组件 选项卡 Sidekick.

  2. 此时将显示组件:

    • 带有一些文本的标题
    • a 属性 链接:单击以显示存储在存储库中的段落的属性。 再次单击可隐藏属性。
    • 包含表格格式数据的浮动窗口。

该组件显示如下:

screen_shot_2012-02-01at121109pm

示例1:默认网格 example-default-grid

在其现成版本中, 网格概述 组件以表格格式显示一个包含静态数据的窗口。 在此示例中,逻辑以两种方式嵌入到组件 jsp 中:

  • 泛型逻辑在标签之间 <script> 定义
  • 特定逻辑可在单独的.js文件中使用,并在jsp中链接到。 通过此设置,您可以通过注释所需的逻辑在两个逻辑(静态/动态)之间切换 <script> 标记之间。

网格概述组件:

  • 定义如下:
    /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 不存在, CQ.Ext.grid.GridPanel 对象( gridPanel)通过调用 getGridPanel() 方法(见下文)。 此方法的定义位置为 defaultgrid.js.
  • grid[CQ.Ext.Window](https://developer.adobe.com/experience-manager/reference-materials/6-5/widgets-api/index.html?class=CQ.Ext.Window) 对象,它基于预定义的GridPanel并显示: grid.show();
  • 如果 grid 存在,根据从存储库检索到的宽度、高度和停靠属性显示它。

JavaScript文件( defaultgrid.js)组件jsp中引用的 getGridPanel() 方法,该方法由嵌入到JSP中的脚本调用,并返回 [CQ.Ext.grid.GridPanel](https://developer.adobe.com/experience-manager/reference-materials/6-5/widgets-api/index.html?class=CQ.Ext.grid.GridPanel) 对象,基于静态数据。 其逻辑如下:

  • myData 是一个静态数据数组,格式为包含五列和四行的表。

  • storeCQ.Ext.data.Store 使用对象 myData.

  • store 已加载到内存中:
    store.load();

  • gridPanel[CQ.Ext.grid.GridPanel](https://developer.adobe.com/experience-manager/reference-materials/6-5/widgets-api/index.html?class=CQ.Ext.grid.GridPanel) 使用对象 store

    • 列宽始终按比例分配:

      forceFit: true

    • 一次只能选择一行:

      singleSelect:true

示例2:引用搜索网格 example-reference-search-grid

安装包时, content.jsp网格概述 组件显示基于静态数据的网格。 可以修改该组件以显示具有以下特征的网格:

  • 具有三列。
  • 基于通过调用servlet从存储库检索的数据。
  • 可以编辑最后一列的单元格。 该值会保留在 test 属性,该属性位于由第一列中显示的路径定义的节点下。

如上一节中所述,窗口对象将获取其 [CQ.Ext.grid.GridPanel](https://developer.adobe.com/experience-manager/reference-materials/6-5/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文件:

  1. CRXDE Lite,在 content.jsp 文件,注释包含 defaultgrid.js 文件,因此它如下所示:
    <!-- script type="text/javascript" src="/apps/extjstraining/components/gridoverview/defaultgrid.js"></script-->
  2. 从包含 referencesearch.js 文件,因此它如下所示:
    <script type="text/javascript" src="/apps/extjstraining/components/gridoverview/referencesearch.js"></script>
  3. 保存更改。
  4. 刷新示例页面。

该组件显示如下:

screen_shot_2012-02-01at121429pm

组件jsp引用的JavaScript代码( referencesearch.js)定义 getGridPanel() 从组件jsp调用方法并返回 [CQ.Ext.grid.GridPanel](https://developer.adobe.com/experience-manager/reference-materials/6-5/widgets-api/index.html?class=CQ.Ext.grid.GridPanel) 对象,基于从存储库动态检索的数据。 中的逻辑 referencesearch.js 将某些动态数据定义为GridPanel的基础:

  • reader[CQ.Ext.data.JsonReader](https://developer.adobe.com/experience-manager/reference-materials/6-5/widgets-api/index.html?class=CQ.Ext.data.JsonReader)以json格式读取三列servlet响应的对象。

  • cm[CQ.Ext.grid.ColumnModel](https://developer.adobe.com/experience-manager/reference-materials/6-5/widgets-api/index.html?class=CQ.Ext.grid.ColumnModel) 三列的对象。
    可以编辑“测试”列单元格,因为它们是使用编辑器定义的:
    editor: new [CQ.Ext.form.TextField](https://developer.adobe.com/experience-manager/reference-materials/6-5/widgets-api/index.html?class=CQ.Ext.form.TextField)({})

  • 这些列可排序:
    cm.defaultSortable = true;

  • store[CQ.Ext.data.GroupingStore](https://developer.adobe.com/experience-manager/reference-materials/6-5/widgets-api/index.html?class=CQ.Ext.data.GroupingStore) 对象:

    • 它通过调用在“ ”注册的servlet获取数据 /bin/querybuilder.json",并使用一些参数筛选查询
    • 它基于 reader,预先定义
    • 该表将根据‘jcr:path'列升序
  • gridPanel[CQ.Ext.grid.EditorGridPanel](https://developer.adobe.com/experience-manager/reference-materials/6-5/widgets-api/index.html?class=CQ.Ext.grid.EditorGridPanel) 可以编辑的对象:

    • 它基于预定义的 store 在列模型上 cm

    • 一次只能选择一行:

      sm: new [CQ.Ext.grid.RowSelectionModel](https://developer.adobe.com/experience-manager/reference-materials/6-5/widgets-api/index.html?class=CQ.Ext.grid.RowSelectionModel)({singleSelect:true})

    • afteredit 侦听器确保在''中的单元格之后​ 测试 ​已编辑“ ”列:

      • 属性' test“”定义的路径上的节点的“jcr:path“”列在存储库中设置单元格值
      • 如果POST成功,则会将该值添加到 store 对象,否则拒绝它
recommendation-more-help
19ffd973-7af2-44d0-84b5-d547b0dffee2