2014-10-10 63 views
5

我正在創建具有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)上下箭頭不再工作。任何建議來解決這些高度讚賞。非常感謝你。

回答

5

多字段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

+0

謝謝。只是想澄清一下,我能夠讀取我的數據爲「jcr:title」和「jcr:url」。請參閱此處的鏈接[http://pbrd.co/1vT2L4H](http://pbrd.co/1vT2L4H)。我遇到的問題是,當我嘗試編輯時,textfield組件無法讀取這些值並填充到對話框中。 – jpr 2014-10-10 07:51:11

+2

連接這些值的唯一缺點是,您可能在推出活動副本時遇到問題 - 例如,如果您的網站結構具有'es'作爲'en'的實時副本,則通常路徑字段會在展開時自動更新此路徑,但我認爲它在拼接字段方面存在問題,因爲它將整個組合視爲直接文本字段。 – anotherdave 2014-10-10 08:17:43

+1

@jpr這些值可能會被存儲,但我不認爲它會以你想要的方式工作。如果檢出多字段的代碼,它會在字段config節點中添加提及的xtype項。因此,當您打開對話框時,您在多字段中存儲的名稱與您在多字段中提供的名稱一起迭代併爲多字段中的每個項目設置。使用您當前的設置,值不會以multifield的代碼預期的形式存儲。您將不得不創建自定義xtypes AFAIK。 – 2014-10-10 09:17:02

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作爲孩子,例如圖像,沒有任何進一步的工作。

+0

這些子節點的值是否也會自動用對話框的方式自動讀取?或者我們必須明確地閱讀它們並在加載時填充對話框。 – 2014-10-10 09:19:46

+0

@SharathMadappa是的,當對話打開時沒有任何額外的工作,它們會照常讀回。 – anotherdave 2014-10-10 11:03:47

+0

你是怎麼申請的?我無法讓它工作。我需要這個在頁面屬性中,但也測試了一個常見組件的對話框運氣不錯。我甚至無法看到+符號將更多字段添加到自定義xtype。也許缺少一些東西? – 2016-02-05 13:13:14

0

我知道問題已經解決了,這次我評論但這只是供參考。 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停止工作並點擊了。

希望這可以幫助別人:)