多字段组件问题

时间：2014-10-10 02:13:17

标签： cq5

我正在创建一个包含2个文本字段的多字段组件。以下是我的对话框xml。

<?xml version="1.0" encoding="UTF-8"?>
<jcr:root xmlns:cq="http://www.day.com/jcr/cq/1.0" xmlns:jcr="http://www.jcp.org/jcr/1.0"
    jcr:primaryType="cq:Dialog"
    title="dialog"
    xtype="dialog">
    <items jcr:primaryType="cq:WidgetCollection">
        <links
            jcr:primaryType="cq:Widget"
            fieldLabel="QuickLinks"
            name="./links"
            xtype="multifield">
            <fieldConfig
                jcr:primaryType="cq:Widget"
                xtype="multifield">
                <items jcr:primaryType="cq:WidgetCollection">
                    <title
                        jcr:primaryType="cq:Widget"
                        fieldLabel="Title"
                        hideLabel="{Boolean}false"
                        name="./jcr:title"
                        xtype="textfield"/>
                    <url
                        jcr:primaryType="cq:Widget"
                        fieldLabel="URL"
                        name="./jcr:url"
                        xtype="textfield"/>
                </items>
            </fieldConfig>
        </links>
    </items>
</jcr:root>

我可以编辑内容，并保存内容。但是我有两个问题 - 1）当对话框加载时，它总是空的，当我重新打开对话框时它不显示保存的内容2）向上和向下箭头不再工作。任何解决这些问题的建议都非常感谢。非常感谢你。

3 个答案:

答案 0 :(得分：5)

multifield xtype的字段配置只占用一个项目（即你可以有一个文本字段。当配置多个值时，它们将被存储为一个名为links的多值属性，当只配置一个值时，它将被存储为称为链接的单值属性。多字段中配置的整个数据将作为链接属性存储在节点中。你将无法将它们作为“jcr：title”和“jcr：url”。

你应该创建一个自定义xtype说“linksXtype”，它将“jcr：title”和“jcr：url”存储为一个单独的字符串，用一些模式分隔“***”（“jcr：title *** jcr” ：URL“）

您可以在此处找到有关创建自定义xtype的详细信息：link

可以像这样创建xtype：

Ejst.CustomWidget = CQ.Ext.extend(CQ.form.CompositeField, {

/**
 * @private
 * @type CQ.Ext.form.TextField
 */
hiddenField: null,

/**
 * @private
 * @type CQ.Ext.form.ComboBox
 */
jcrtitle: null,

/**
 * @private
 * @type CQ.Ext.form.TextField
 */
jcrurl: null,

constructor: function(config) {
    config = config || { };
    var defaults = {
        "border": false,
        "layout": "table",
        "columns":2
    };
    config = CQ.Util.applyDefaults(config, defaults);
    Ejst.CustomWidget.superclass.constructor.call(this, config);
},

// overriding CQ.Ext.Component#initComponent
initComponent: function() {
    Ejst.CustomWidget.superclass.initComponent.call(this);

    this.hiddenField = new CQ.Ext.form.Hidden({
        name: this.name
    });
    this.add(this.hiddenField);

    this.jcrtitle = new CQ.Ext.form.TextField({
        fieldLabel:"Jcr url",
        cls:"ejst-customwidget-1",
        listeners: {
             change: {
                scope:this,
                fn:this.updateHidden
            }
        },
        optionsProvider: this.optionsProvider
    });
    this.add(this.jcrtitle);

    this.jcrurl = new CQ.Ext.form.TextField({
        fieldLabel:"Jcr Title",
        cls:"ejst-customwidget-2",
        listeners: {
            change: {
                scope:this,
                fn:this.updateHidden
            }
        }
    });
    this.add(this.jcrurl);

},


// overriding CQ.form.CompositeField#setValue
setValue: function(value) {
    var parts = value.split("/");
    this.jcrtitle.setValue(parts[0]);
    this.jcrurl.setValue(parts[1]);
    this.hiddenField.setValue(value);
},

// overriding CQ.form.CompositeField#getValue
getValue: function() {
    return this.getRawValue();
},

// overriding CQ.form.CompositeField#getRawValue
getRawValue: function() {

    return this.jcrtitle.getValue() + "***" +
           this.jcrurl.getValue();
},

// private
updateHidden: function() {
    this.hiddenField.setValue(this.getValue());
}
});

// register xtype
CQ.Ext.reg('linksXtype', Ejst.CustomWidget);

将dialog.xml更改为类似

的内容 
<?xml version="1.0" encoding="UTF-8"?>
<jcr:root xmlns:cq="http://www.day.com/jcr/cq/1.0" xmlns:jcr="http://www.jcp.org/jcr/1.0"
jcr:primaryType="cq:Dialog"
title="dialog"
xtype="dialog">
<items jcr:primaryType="cq:WidgetCollection">
    <links
        jcr:primaryType="cq:Widget"
        fieldLabel="QuickLinks"
        name="./links"
        xtype="multifield">
        <fieldConfig
            jcr:primaryType="cq:Widget"
            xtype="linksXtype">
        </fieldConfig>
    </links>
</items>
</jcr:root>

获取值迭代存储为links属性的字符串数组，并将每个字符串拆分为“***”

编辑：

其ACS-Commons软件包下的Adobe咨询服务提供了一个更优雅的 multifieldpanel 小部件来处理这个用例。它简化了方法，并且无需为每个必需字段组合编写自定义xtype。数据以JSON格式存储，并附带taglib以从节点中提取数据。链接：http://adobe-consulting-services.github.io/acs-aem-commons/features/widgets.html#multi-field-panel-since-150

答案 1 :(得分：2)

正如Sharath所说，您需要定义自己的自定义XType，而不是在多字段中放置多个字段。

作为在String[]属性中连接字段的替代方法，另一种方法是为添加的每个字段创建子节点，例如而不是：

<links
    link="[Example|http://example.com,Google|http://google.com]"/>

你最终会得到：

<links>
    <link_1
        title="Example"
        url="http://example.com"/>
    <link_2
        title="Google"
        url="http://google.com"/>
<links>

您可以回读值而无需从String值中解析它们。这也意味着像更新路径域的rollout这样的东西应该作为标准工作。

代码太长，无法在此处完整生成，但在 Adobe forums here 上有一个很好的起点。 （它有一个Adobe版权声明，但由用户发布 - 不确定它的官方身份，但作为参考实现很好; 编辑：可能与Citytechnic MultiCompositeField on Github相关，由ery发现。

上面的示例也采用与多字段本身相同的方法 - 即它从复合＆amp;的fieldConfig节点读取。为它创建的子节点上的每个条目创建一个属性。

这使得复合字段完全可重复使用，因为无论您想要创建多少个变体，您只需要一个复合XType，即它可以让您采用您在问题中概述的方法：

<links
    jcr:primaryType="cq:Widget"
    fieldLabel="QuickLinks"
    name="./links"
    xtype="mtmulticompositefield">
        <fieldConfigs jcr:primaryType="cq:WidgetCollection">
            <title
                jcr:primaryType="cq:Widget"
                fieldLabel="Title"
                hideLabel="{Boolean}false"
                name="./jcr:title"
                xtype="textfield"/>
            <url
                jcr:primaryType="cq:Widget"
                fieldLabel="URL"
                name="./jcr:url"
                xtype="textfield"/>
        </fieldConfigs>
    </links>

它还允许您将更复杂的XType用作子项，例如图像，没有任何进一步的工作。

答案 2 :(得分：0)

我知道问题已经通过这次评论解决了，但这仅供参考。 1）当对话框加载时，它总是空的，当我重新打开对话框时它不会显示保存的内容

答案：我正在使用extjs为我的对话框创建多字段，在我的extjs中set（）函数代码就像

setValue：function（value）{

    var link = JSON.parse(value);
    this.websiteName.setValue(link.text);
    this.websiteLinks.setValue(link.text);
    this.hiddenField.setValue(value);
},

但代码应为

setValue：function（value）{

    var link = JSON.parse(value);
    this.websiteName.setValue(link.field1Name);
    this.websiteLinks.setValue(link.field2Name);
    this.hiddenField.setValue(value);
},

只需更正此对话框，即可显示已填充的值。还要在对话框中检查您的名称属性。它应该是正确的。

2）向上和向下箭头不再起作用。
这个问题主要与您的js文件有关。我经历了什么。只要点击不起作用，请在浏览器中检查您的js是否存在开发人员工具中的错误。只有一个语法错误，你的js就会停止工作并点击。

希望这有助于某人：）

相关问题
最新问题