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

要同时包含javascript代码和样式表，请执行以下操作：

<ui:includeClientLib categories="<category-name1>, <category-name2>, ..."/>

where <category-nameX> 是客户端库的名称。

要仅包含javascript代码，请执行以下操作：

<ui:includeClientLib js="<category-name>"/>

完整对话框( full 节点):它显示一个窗口，其中包含3个选项卡，每个选项卡都包含2个文本字段。

单个面板对话框( singlepanel 节点):它显示一个窗口，其中带有1个选项卡，其中具有2个文本字段。

多面板对话框( multipanel 节点):其显示方式与“完整”对话框相同，只是构建方式不同。

设计对话框( design 节点):此时将显示一个带有2个选项卡的窗口。 第一个选项卡具有文本字段、下拉菜单和可折叠的文本区域。 第二个选项卡具有一个字段集，其中包含4个文本字段，以及一个可折叠的字段集，其中包含2个文本字段。

由节点定义：节点类型= 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

比 完整对话框 需要的配置较少。

建议使用：用于显示信息或仅具有几个字段的简单对话框。

由节点定义(节点类型= 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

比 完整对话框 就是它的结构简化了。

建议使用：的子菜单。

由节点定义(节点类型= 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

由节点定义(节点类型= 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

对话框节点具有“ 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

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

由节点定义(节点类型= 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

“选择”选项卡有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“对话框字段集是否显示

多字段对话框( multifield 节点)显示一个带有一个选项卡的窗口。 选项卡具有一个自定义的多字段小组件，该小组件具有两个字段：包含两个选项和一个文本字段的下拉菜单。 因为它基于现成的 multifield 小组件（仅具有文本字段），具有 multifield 小组件。

树浏览对话框( treebrowse 节点)显示一个窗口，其中包含一个包含路径浏览小组件的选项卡：单击箭头时，将打开一个窗口，您可以在其中浏览层次结构并选择项目。 项目的路径随后会添加到路径字段，并在对话框关闭时持久保留该路径。

基于富文本编辑器插件的对话框( rteplugin 节点)来向富文本编辑器添加自定义按钮，以向主文本插入一些自定义文本。 它由 richtext 构件(RTE)和自定义功能（通过RTE插件机制添加）的集成。

由节点定义(节点类型= 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

是名为的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

是名为的Javascript对象 Ejst.CustomWidget.

在 CustomBrowseField.js javascript文件：

/apps/extjstraining/clientlib/js/CustomBrowseField.js

扩展 CQ.Ext.form.TriggerField.

定义一个名为 browseWindow.

覆盖 CQ.Ext.form.TriggerField 以在单击箭头时显示浏览窗口。

定义 CQ.Ext.tree.TreePanel 对象：

• 它通过调用在注册的Servlet来获取其数据 /bin/wcm/siteadmin/tree.json.
• 其根为“ apps/extjstraining"

定义 window 对象(CQ.Ext.Window):

• 基于预定义的面板。
• 具有 确定 按钮来隐藏选定路径的值。

窗口在 路径 字段。

所选路径将从浏览字段传递到 show 事件。

将自身注册为“ ejstbrowse' xtype:

CQ.Ext.reg('ejstbrowse', Ejst.CustomBrowseField);

由rtplugin节点在以下位置定义：

/apps/extjstraining/components/customwidgets/rteplugin

通过请求以下项以json格式呈现：

http://localhost:4502/apps/extjstraining/components/customwidgets/rteplugin.-1.json

的 rtePlugins 节点具有子节点 inserttext (节点类型= nt:unstructured)以插件命名。 它有一个名为 features，用于定义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个按钮(确定 和 取消)。

定义于：

/apps/extjstraining/components/treeoverview

其对话框允许设置窗口大小和停靠/取消停靠窗口（请参阅下面的详细信息）。

从存储库中检索宽度、高度和停靠属性。

显示有关树概述数据格式的一些文本。

在javascript标记之间的组件jsp中嵌入窗口逻辑。

定义于：

apps/extjstraining/components/treeoverview/content.jsp

定义 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

显示如下：

定义于：

/apps/extjstraining/components/gridoverview

其对话框用于设置窗口的大小和停靠/取消停靠窗口。

从存储库中检索宽度、高度和停靠属性。

显示一些文本作为网格概述数据格式的简介。

引用定义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

定义 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 已存在，则会根据从存储库检索的宽度、高度和停靠属性来显示。

myData 是静态数据数组，格式为包含5列和4行的表。

store 是 CQ.Ext.data.Store 使用的对象 myData.

store 在内存中加载：

store.load();

gridPanel 是 CQ.Ext.grid.GridPanel 使用的对象 store:

• 列宽随时会进行重新比例：

  forceFit: true

• 一次只能选择一行：

  singleSelect:true

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 对象：

• 它通过调用在“ ”注册的servlet来获取其数据 /bin/querybuilder.json”，其中包含一些用于筛选查询的参数
• 基于 reader，事先定义
• 表按照​ jcr:path“ ”列的升序

gridPanel 是 CQ.Ext.grid.EditorGridPanel 可编辑的对象：

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

• 一次只能选择一行：

  sm: new CQ.Ext.grid.RowSelectionModel({singleSelect:true})

• the afteredit 侦听器确保在“测试“ ”列已编辑：

  • 属性' test“”所定义路径上节点的“ ”jcr:path“ ”列在存储库中设置，其值为单元格
  • 如果POST成功，则会将值添加到 store 对象，否则将被拒绝