Problem z komponentem wielopłaszczyznowym

Question

Tworzę komponent multifielda zawierający 2 pola tekstowe. Poniżej znajduje się mój xml okna dialogowego.

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

Jestem w stanie edytować zawartość, a zawartość zostanie zapisana. Mam jednak 2 problemy - 1) Kiedy okno dialogowe się ładuje, jest zawsze puste i nie wyświetla zapisanej zawartości po ponownym otwarciu okna dialogowego. 2) Strzałki w górę i w dół przestają działać. Wszelkie sugestie dotyczące ich rozwiązania są bardzo cenne. Dziękuję Ci bardzo.

Answer 1

Konfiguracja pola wieloznacznego dla xtype zajmuje tylko jeden element (tzn. Można w nim umieścić jedno pole tekstowe, po skonfigurowaniu wielu wartości będą one przechowywane jako wielowartościowa właściwość o nazwie links, a gdy skonfigurowana zostanie tylko jedna wartość, będzie ona przechowywana jako własność o jednej wartości nazywana linkami). Całe dane skonfigurowane w twoim multifield będą przechowywane jako własność links w twoim węźle. Nie będziesz w stanie uzyskać ich jako "jcr: title" i "jcr: url".

Powinieneś utworzyć niestandardowy typ x powiedz "linksXtype", który przechowuje "jcr: title" i "jcr: url" jako pojedynczy ciąg oddzielony przez jakiś wzór powiedz "***" ("jcr: title *** jcr: url ").

można znaleźć szczegółowe informacje o tworzeniu niestandardowych xtype tutaj: link

xtype mogą być tworzone tak:

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); 

Zmiana dialog.xml aby coś takiego

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

Aby pobrać wartości, należy powtórzyć iterację po tablicy ciągów zapisanej jako właściwość links i podzielić każdy ciąg przez "***"

EDIT:

usługi doradcze Adobe pod swoim pakiecie ACS-Commons zapewnia bardziej eleganckie multifieldpanel widget do obsługi tego przypadku użycia. Upraszcza to podejście i eliminuje potrzebę pisania niestandardowego xtype dla każdej kombinacji wymaganych pól. Dane są przechowywane w formacie JSON i dostarczane są z taglibsem do wyodrębniania danych z węzła. Link: http://adobe-consulting-services.github.io/acs-aem-commons/features/widgets.html#multi-field-panel-since-150

Answer 2

Jak mówi Sharath, musisz zdefiniować własny niestandardowy XType, zamiast umieszczać wiele pól w samym multifield.

Jako alternatywę dla konkatenacji pól w obrębie właściwości String[], innym podejściem jest utworzenie węzłów potomnych dla każdego dodanego pola, np. zamiast:

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

Można by skończyć z:

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

można odczytać wartości z powrotem bez konieczności analizowania ich wartości String. Oznacza to również, że takie rzeczy jak rollout, które ścieżki aktualizacji powinny działać w standardzie.

Kod jest za długi, aby można go było tutaj w pełni wydać, ale jest to dobry punkt wyjścia dla tego modelu: Adobe forums here.(Ma informację o prawach autorskich firmy Adobe, ale została opublikowana przez użytkownika - nie jest pewny jego oficjalnego statusu, ale dobra jako implementacja referencyjna; EDYCJA: prawdopodobnie związana z Citytechnic MultiCompositeField on Github, jak zauważył ery).

Powyższy przykład również przyjmuje takie samo podejście jak sam multifield - tzn. Odczytuje z węzła fieldConfig kompozytu & tworzy właściwość dla każdego wpisu w tworzonych węzłach potomnych.

To sprawia, że ​​pole kompozytowe całkowicie wielokrotnego użytku, ponieważ wystarczy tylko jedno kompozytowe xtype bez względu na to jak wiele odmian chcesz utworzyć, czyli to pozwalają przyjąć podejście ty nakreślenia w pytaniu:

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

Pozwala również na użycie bardziej złożonych typów X jako dzieci, np. obrazy, bez dalszej pracy.

Answer 3

Wiem, że problem został rozwiązany do czasu komentowania, ale jest to tylko w celach informacyjnych. 1) Gdy okno dialogowe jest ładowane, jest zawsze puste i nie wyświetla zapisanej zawartości po ponownym otwarciu okna dialogowego. Odpowiedź: Używałem extjs do utworzenia multifielda w moim oknie dialogowym oraz w moim kodzie funkcji extjs set() jakby

setValue: funkcję (wartości) {

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

ale kod powinien być

setValue: funkcję (wartości) {

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

Po prostu korekta tego okna dialogowego będzie wyświetlać zaludnione wartości. Sprawdź także właściwość name w oknie dialogowym. To powinno być poprawne.

2) Strzałki w górę i w dół nie działają.
Ten problem dotyczy głównie pliku js. Co przeżyłem. Gdy kliknięcia nie działają, sprawdź js pod kątem błędów w narzędziach programistycznych w przeglądarce. Przy jednym błędzie składni js przestaje działać i klika też.

Mam nadzieję, że to pomoże komuś :)