我有一个复选框和一个下拉列表,我希望当勾选复选框时,下拉列表成为必填字段(因为它不能留空)。
我在tabpanel中有这些小部件,并且在选项卡中我有这个设置。我知道听众,但我不知道如何为我做这项工作。我之前也尝试过使用听众,但这对我没用。
在CQ5中有没有一种简单易行的方法来实现这一目标?
答案 0 :(得分:1)
简短回答:实际上没有很好的和 easy 方法。
长答案:......
我建议创建一个新的xtype,添加这些额外的UI。有很多垃圾片段可以让它在对话框XML中运行,但是我不建议在你的XML中使用JavaScript。我不会为您编写代码,但我将提供技术方法,我希望能够为CQ领域的动态组件做出更好的实践。 这将需要一些中级JavaScript技能并熟悉CQ的ExtJS 3.4变体。
在新的JavaScript文件中编写一个新的xtype,其中包含您的复选框和下拉列表。它的线条类似于以下内容:
var MyCustomXtypeObject = CQ.Ext.extend(CQ.Ext.Panel, { ...
和强>
CQ.Ext.reg('XTYPE_NAME', MyCustomXtypeObject);
将CQ.Ext.form.Checkbox
和CQ.Ext.form.ComboBox
添加到MyCustomXtypeObject
。将配置添加到这些项目时,您可以通过设置id
并使用CQ.Ext.getCmp()
方法让两个小部件相互通信。第一个参数需要一个ID并返回该小部件的实例。将事件侦听器设置为两个窗口小部件,以便您可以编写业务逻辑需求。 ExtJS 3.4文档将在整个过程中成为您的朋友。另请参阅CQ的现有自定义xtypes以获取示例和设置。 (使用CRX DE查找示例或打包/libs
,在文件系统上下载/解压缩并使用IDE的搜索机制)
创建包含JS文件的客户端库。将类别设置为cq.widgets
。这是在CQ JavaScript端实现最简单的实现,但为了组织起见,有更好的实践。
在对话框中,添加xtype,primaryType
为cq:Panel
(因为它是一个Ext.Panel)E.g。:
<myTestCmp jcr:primaryType="cq:Panel" xtype="XTYPE_NAME" />
测试!
我建议您使用CRX DE中的原型并逐步增加原型,因为故障排除会让您放弃不断构建/部署过程。
此外,CQ遵循Ext的3.4表格指南,因此如果您需要持久保存数据,则只需在标签上使用通用name
属性。进入的JSON应该提供数据(如果没有,您可以从包装器组件实例中提取Ext.data.Store
并手动预填充表单元素。)
肯定有很多领域知识需要这种方式实现,但是当你的需求发生变化但是你的XML配置有限时,它会长期保存麻烦。这种方法是单元可测试的,并且比通过有限方法的配置流式传输更具性能。我在使用自定义对话框方面有很多经验,这是实现自定义CQ组件的最佳方式(也与CQ核心开发人员实施管理/基础小组件的方式相同)