多字段組件問題

Question

我正在創建具有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> 

我可以編輯內容，並保存內容。然而，我有2個問題 - 1）當對話框加載時，它總是空的，並且當我重新打開對話框時它不顯示保存的內容2）上下箭頭不再工作。任何建議來解決這些高度讚賞。非常感謝你。

Answer 1

多字段xtype的字段配置只接受一個項目（也就是說，您可以在其中有一個文本字段，當配置多個值時，它們將被存儲爲稱爲鏈接的多值屬性，並且只有一個值被配置時，它將被存儲作爲稱爲鏈接的單值財產）。在您的多字段中配置的全部數據將作爲鏈接屬性存儲在您的節點中。你將無法將它們作爲「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> 

要獲取值迭代存儲爲鏈接屬性的字符串數組，並將每個字符串拆分爲「***」

編輯：其ACS-共享包下

的Adobe諮詢服務提供了一個更優雅的multifieldpanel小工具來處理這個用例。它簡化了方法，並且無需爲每個必需字段組合編寫自定義xtype。數據以JSON格式存儲，並附帶taglibs以從節點提取數據。鏈接：http://adobe-consulting-services.github.io/acs-aem-commons/features/widgets.html#multi-field-panel-since-150

Answer 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> 

您可以閱讀值恢復，而不需要在將字符串值解析。這也意味着像更新路徑字段這樣的內容應該作爲標準工作。

該代碼太長，無法在此完整生成，但在Adobe forums here之間有一個很好的起點。（它有一個Adobe版權聲明，但由用戶發佈 - 不確定它是否是官方身份，但作爲參考實現很好; 編輯：可能與Citytechnic MultiCompositeField on Github相關，如ery所示）。

上面的示例也採用與多字段本身相同的方法 - 即從複合的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作爲孩子，例如圖像，沒有任何進一步的工作。

Answer 3

我知道問題已經解決了，這次我評論但這只是供參考。 1）當對話框加載時，它總是空的，它不顯示保存的內容時，我重新打開對話框

答：我使用extjs爲我的對話框和我的extjs set（）函數代碼像

的setValue：函數（值）{

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

但代碼應該是

的setValue：函數（值）{

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

只需糾正此問題，您的對話框將顯示填充值。在對話框中檢查你的名字屬性。它應該是正確的。

2）向上和向下箭頭不再工作。
這個問題主要與你的js文件有關。我所經歷的。無論何時點擊無效，請檢查您的js是否在瀏覽器中使用開發人員工具中的錯誤。只有一個語法錯誤，你的js停止工作並點擊了。

希望這可以幫助別人:)