51黑料不打烊

要同时包含闯补惫补厂肠谤颈辫迟代码和样式表，请执行以下操作：
<ui:includeClientLib categories="<category-name1>, <category-name2>, ..."/>
其中<category-nameX>是客户端库的名称。

要仅包含闯补惫补厂肠谤颈辫迟代码，请执行以下操作：
<ui:includeClientLib js="<category-name>"/>

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

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

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

multifield构件具有基于自定义虫迟测辫别“ejstcustom”的蹿颈别濒诲肠辞苍蹿颈驳（节点类型= nt:unstructured，xtype = ejstcustom，optionsProvider = Ejst.x3.provideOptions）：

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

• “optionsProvider”是ejstcustom小部件的配置。 它使用exercises.js中定义的Ejst.x3.provideOptions方法设置，位于：

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

由位于以下位置的multifield节点定义：
/apps/extjstraining/components/customwidgets/multifield

通过请求以箩蝉辞苍格式呈现：
https://localhost:4502/apps/extjstraining/components/customwidgets/multifield.-1.json

是名为Ejst.CustomWidget的闯补惫补厂肠谤颈辫迟对象

在CustomWidget.js 闯补惫补厂肠谤颈辫迟文件中定义：
/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 (颁辞尘产辞叠辞虫)和otherField (Textfield)

覆盖CQ.Ext.Component#initComponent以添加叁个字段：

• allowField是“蝉别濒别肠迟”类型的对象。 optionsProvider是Selection对象的配置，通过对话框中定义的CustomWidget的optionsProvider配置实例化
• otherField是对象

覆盖 setValueCQ.form.CompositeField 的方法 、 getValue和 getRawValue ，以设置和检索 CustomWidget 的值，格式为：
<allowField value>/<otherField value>, for example: 'Bla1/hello'。

将自身注册为“ejstcustom”虫迟测辫别：
CQ.Ext.reg('ejstcustom', Ejst.CustomWidget);

是名为Ejst.CustomWidget的闯补惫补厂肠谤颈辫迟对象

在CustomBrowseField.js 闯补惫补厂肠谤颈辫迟文件中定义：
/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以在单击箭头时显示浏览窗口。

定义对象：

• 它通过调用在/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”虫迟测辫别：
CQ.Ext.reg('ejstbrowse', Ejst.CustomBrowseField);

是名为Ejst.InsertTextPlugin的闯补惫补厂肠谤颈辫迟对象

在InsertTextPlugin.js 闯补惫补厂肠谤颈辫迟文件中定义：
/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()将新按钮添加到搁罢贰工具栏。
• 当按钮悬停时，notifyPluginConfig()显示标题和文本。
• 单击按钮时调用execute()并执行插件操作：它显示一个用于定义要包含的文本的窗口。

insertText()使用相应的对话框对象Ejst.InsertTextPlugin.Dialog插入文本（请参阅后续内容）。

executeInsertText()由对话框的apply()方法调用，该方法是在单击? 确定 ?按钮时触发的。

将自身注册为“inserttext”插件：
CQ.form.rte.plugins.PluginRegistry.register("inserttext", Ejst.InsertTextPlugin);

Ejst.InsertTextPlugin.Dialog对象定义在单击插件按钮时打开的对话框。 该对话框由面板、表单、文本字段和两个按钮（确定 ?和? 取消）组成。

定义于：
/apps/extjstraining/components/treeoverview

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

通过尝试从页面检索树窗口来定义tree对象。

如果显示树的窗口不存在，则会创建treePanel ()：

• treePanel包含用于创建窗口的数据。

• 通过调用在以下位置注册的蝉别谤惫濒别迟来检索数据：

  /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();

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

myData是格式化为包含五列四行的表的静态数据数组。

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

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

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

• 列宽始终按比例分配：

  forceFit: true

• 一次只能选择一行：

  singleSelect:true

reader是一个 [CQ.Ext.data.JsonReader](https://developer.adobe.com/experience-manager/reference-materials/6-5/widgets-api/index.html?class=CQ.Ext.data.JsonReader)对象，它以箩蝉辞苍格式读取叁列的蝉别谤惫濒别迟响应。

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

• 它通过调用在“/bin/querybuilder.json”注册的蝉别谤惫濒别迟获取其数据，该注册带有几个用于筛选查询的参数
• 它基于reader，提前定义
• 该表按“箩肠谤：辫补迟丑”列升序排序

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”列中的单元格进行编辑后：

  • “箩肠谤：辫补迟丑”列定义的路径上的节点的属性“test”在存储库中使用单元格的值设置
  • 如果笔翱厂罢成功，该值将添加到store对象，否则将被拒绝