element - CQ5中如何限制multifield中的元素个数？

Question

我用 Day CQ5 开发了这个网站，但遇到了一个问题。我正在创建一个组件，以及它的对话。我在对话框中使用了组件元素“multifield”，其中包含几个元素“pathfield”。如何设置特定数量的元素“pathfield”并删除按钮“+”和“-”？

Answer 1

本周我遇到了这个确切的问题:)

似乎默认情况下您无法限制编辑器可以输入的项目数量。为了解决这个问题，我创建了 Multifield.js 的叠加层，放置在

/apps/cq/ui/widgets/source/widgets/form/MultiField.js

我在多字段下的 fieldConfig 节点上添加了对“限制”属性集的检查。如果存在且不为零，它将使用此作为用户可以添加的最大字段数。

不想通过发布完整的覆盖来涉及版权问题，但我所做的更改如下：

在构造函数中（第 53 行），添加一个检查以从 fieldConfig 节点获取 limit 的值：

if (!config.fieldConfig.limit) {
        config.fieldConfig.limit = "0";
}

在“+”按钮的处理程序（第 71 行）中，将函数更改为以下内容：

if(config.fieldConfig.limit == 0 || list.items.getCount() <= config.fieldConfig.limit) {
    list.addItem();
} else {
    CQ.Ext.Msg.show({
        title: 'Limit reached',
        msg: 'You are only allowed to add ' + config.fieldConfig.limit + 
             ' items to this module',
        icon:CQ.Ext.MessageBox.WARNING,
        buttons: CQ.Ext.Msg.OK
    });
}

我没有删除按钮，而是创建了一个弹出窗口来通知编辑器“N 是允许的最大字段数”。

简单的改变，但做的工作！希望这是有用的。

Answer 2

您还可以将侦听器并行添加到多字段节点。例如

事件：beforeadd

功能：

function(list,component,index) {
    if(this.fieldConfig.limit!=0) {
        if(this.fieldConfig.limit == (list.items.getCount()-1)) { 
            CQ.Ext.Msg.show(
                {title: 'Limit reached',  msg: 'You are only allowed to add '+this.fieldConfig.limit+' items to this module',icon:CQ.Ext.MessageBox.WARNING,buttons: CQ.Ext.Msg.OK}
            );;return false;
        }
    }
}

前提条件：将limit值添加到multifield的fieldConfig中。

Answer 3

我还没有找到这个问题的标准解决方案，但想出了一个小技巧。首先，我通过组件的对话添加所需数量的子元素。然后我将属性“class”添加到元素“multifield”，例如“sliderpanel-dialog-multifield”。然后我在组件中添加 CSS 样式这样的构造：

.sliderpanel-dialog-multifield .x-btn{
  display: none;
}

".x-btn" 是一个使用 CQ5 中的按钮的类。之后，按钮将被隐藏，您无法在多字段中添加或删除元素。我有另一个建议，这个问题可以在监听器和脚本的帮助下解决，但解决起来会更难，我在上面引用过。到目前为止，我一直专注于这个变体，但如果你有其他想法，我很想知道它们。

Answer 4

beforeadd 解决方案似乎存在问题：表单/对话框处于无效状态，告诉我们更正标记的字段......但一切都是正确的。

有没有办法重新初始化表单验证？

Answer 5

请参阅这篇文章，我通过在达到限制后删除“添加项目”按钮来实现该功能。

http://letsaem.blogspot.in/2015/12/add-limit-to-number-of-elements-in.html

但是实现的过程是：

1. 将 limit**(long)** 属性添加到 fieldConfig 节点
2. 将侦听器节点添加到多字段 xtype 并添加以下侦听器。

删除项目：

function(list) {
  var length = list.items.length;
  if (length <= list.fieldConfig.limit) {
    list.items.items[length - 1].show();
  }
}

之前添加：

function(list, component, index) {

    var length = list.items.length;
    var addButton = list.items.items[length - 1];
    if (length == list.fieldConfig.limit) {
        addButton.hide();
    }
}

现在如果你给限制：3

添加 3 个项目后，添加项目按钮将消失

添加项目按钮消失：