0

I have a checkbox and a drop down list, and I wish the drop down list to become mandatory field (as in it cannot be left empty) when the checkbox is ticked.

I have these widgets in a tabpanel, and within the tab I have that setup. I know of listeners, but I don't know how to make that work for me. I've also tried using a listener before submit but that hasn't worked for me.

Is there a nice and easy way to accomplish this in CQ5?

4

1 回答 1

1

简短的回答：实际上并没有一种很好且简单的方法来实现这一点。

长答案：...

我建议创建一个新的 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.Checkbox和CQ.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. 在对话框中，使用primaryTypeas添加 xtype cq:Panel（因为它是 Ext.Panel）例如： <myTestCmp jcr:primaryType="cq:Panel" xtype="XTYPE_NAME" />

  5. 测试！

我建议您在 CRX DE 中进行原型制作并逐步进行原型制作，因为故障排除的愤怒会让您放弃不断的构建/部署过程。

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

肯定有很多领域知识需要以这种方式实现，但从长远来看，当您的需求发生变化但您的 XML 配置受到限制时，它会省去头疼的问题。此方法是可单元测试的，并且比通过有限方法上的配置流式传输它更高效。我有很多使用自定义对话框的经验，这是实现自定义 CQ 组件的最佳方式（也是 CQ 核心开发人员实现管理/基础小部件的相同方式）

于 2013-07-29T19:06:51.090 回答