cq5,根据复选框的值执行验证

时间:2013-07-29 14:27:19

标签: cq5

我有一个复选框和一个下拉列表,我希望当勾选复选框时,下拉列表成为必填字段(因为它不能留空)。

我在tabpanel中有这些小部件,并且在选项卡中我有这个设置。我知道听众,但我不知道如何为我做这项工作。我之前也尝试过使用听众,但这对我没用。

在CQ5中有没有一种简单易行的方法来实现这一目标?

1 个答案:

答案 0 :(得分:1)

简短回答:实际上没有很好的 easy 方法。

长答案:......

我建议创建一个新的xtype,添加这些额外的UI。有很多垃圾片段可以让它在对话框XML中运行,但是我不建议在你的XML中使用JavaScript。我不会为您编写代码,但我将提供技术方法,我希望能够为CQ领域的动态组件做出更好的实践。 这将需要一些中级JavaScript技能并熟悉CQ的ExtJS 3.4变体。

  1. 在新的JavaScript文件中编写一个新的xtype,其中包含您的复选框和下拉列表。它的线条类似于以下内容:

    var MyCustomXtypeObject = CQ.Ext.extend(CQ.Ext.Panel, { ...

    CQ.Ext.reg('XTYPE_NAME', MyCustomXtypeObject);

  2. CQ.Ext.form.CheckboxCQ.Ext.form.ComboBox添加到MyCustomXtypeObject。将配置添加到这些项目时,您可以通过设置id并使用CQ.Ext.getCmp()方法让两个小部件相互通信。第一个参数需要一个ID并返回该小部件的实例。将事件侦听器设置为两个窗口小部件,以便您可以编写业务逻辑需求。 ExtJS 3.4文档将在整个过程中成为您的朋友。另请参阅CQ的现有自定义xtypes以获取示例和设置。 (使用CRX DE查找示例或打包/libs,在文件系统上下载/解压缩并使用IDE的搜索机制)

  3. 创建包含JS文件的客户端库。将类别设置为cq.widgets。这是在CQ JavaScript端实现最简单的实现,但为了组织起见,有更好的实践。

  4. 在对话框中,添加xtype,primaryTypecq:Panel(因为它是一个Ext.Panel)E.g。: <myTestCmp jcr:primaryType="cq:Panel" xtype="XTYPE_NAME" />

  5. 测试!

  6. 我建议您使用CRX DE中的原型并逐步增加原型,因为故障排除会让您放弃不断构建/部署过程。

    此外,CQ遵循Ext的3.4表格指南,因此如果您需要持久保存数据,则只需在标签上使用通用name属性。进入的JSON应该提供数据(如果没有,您可以从包装器组件实例中提取Ext.data.Store并手动预填充表单元素。)

    肯定有很多领域知识需要这种方式实现,但是当你的需求发生变化但是你的XML配置有限时,它会长期保存麻烦。这种方法是单元可测试的,并且比通过有限方法的配置流式传输更具性能。我在使用自定义对话框方面有很多经验,这是实现自定义CQ组件的最佳方式(也与CQ核心开发人员实施管理/基础小组件的方式相同)