Verwenden und Erweitern von Widgets (klassische Benutzeroberfläche)

Die webbasierte Oberfläche von Adobe Experience Manager nutzt AJAX und andere moderne Browsertechnologien, um WYSIWYG-Bearbeitung und -Formatierung von Inhalten durch Autoren direkt auf der Webseite zu ermöglichen.

Adobe Experience Manager (AEM) verwendet die ExtJS-Widgetbibliothek, die die besonders ausgereiften Benutzeroberflächenelemente bereitstellt, die in allen wichtigen Browsern funktionieren und die Erstellung von Benutzeroberflächen in Desktopqualität ermöglichen.

Diese Widgets sind in AEM enthalten und können nicht nur von AEM, sondern auch von jeder mit AEM erstellten Website verwendet werden.

Eine vollständige Übersicht aller verfügbaren Widgets in AEM finden Sie in der Widget-API-Dokumentation oder der Liste der bestehenden X-Typen. Darüber hinaus zeigen zahlreiche Beispiele auf der Website von Sencha, dem Eigentümer des Frameworks, wie das ExtJS-Framework zu verwenden ist.

Auf dieser Seite erhalten Sie einige Einblicke in die Verwendung und Erweiterung von Widgets. Zuerst wird beschrieben, wie clientseitiger Code in eine Seite eingefügt wird. Dann werden einige Beispielkomponenten beschrieben, die erstellt wurden, um einige grundlegende Anwendungs- und Erweiterungsfälle zu illustrieren. Diese Komponenten stehen als das Paket Using ExtJS Widgets auf Package Share zur Verfügung.

Das Paket enthält Beispiele für:

HINWEIS

Die klassische Benutzeroberfläche von Adobe Experience Manager baut auf ExtJS 3.4.0 auf.

HINWEIS

Diese Seite beschreibt die Verwendung von Widgets in der klassischen Benutzeroberfläche. Adobe empfiehlt, die moderne Touch-optimierte Benutzeroberfläche zu verwenden, die auf Coral-Benutzeroberfläche und Granite-Benutzeroberfläche basiert.

Einbauen von clientseitigem Code in eine Seite

Client-seitiger JavaScript- und Stylesheet-Code sollte in einer Client-Bibliothek platziert werden.

Erstellen Sie eine Client-Bibliothek wie folgt:

  1. Erstellen Sie einen Knoten unter /apps/<project> mit den folgenden Eigenschaften:

        name="clientlib"
        jcr:mixinTypes="[mix:lockable]"
        jcr:primaryType="cq:ClientLibraryFolder"
        sling:resourceType="widgets/clientlib"
        categories="[<category-name>]"
        dependencies="[cq.widgets]"
    
    HINWEIS

    Hinweis: <category-name> ist der Name der benutzerdefinierten Bibliothek (z. B. "cq.extjstraining") und wird verwendet, um die Bibliothek auf der Seite einzuschließen.

  2. Unter clientlib erstellen css und js Ordner (nt:folder).

  3. Unter clientlib erstellen css.txt und js.txt -Dateien (nt:files). Diese TXT-Dateien listen die Dateien auf, die in der Bibliothek enthalten sind.

  4. Bearbeiten js.txt: Sie muss mit ""beginnen. #base=js' gefolgt von der Liste der Dateien, die vom CQ-Client-Bibliotheksdienst aggregiert werden, z. B.:

    #base=js
     components.js
     exercises.js
     CustomWidget.js
     CustomBrowseField.js
     InsertTextPlugin.js
    
  5. Bearbeiten css.txt: Sie muss mit ""beginnen. #base=css' gefolgt von der Liste der Dateien, die vom CQ-Client-Bibliotheksdienst aggregiert werden, z. B.:

    #base=css
     components.css
    
  6. Platzieren Sie die JavaScript-Dateien, die der Bibliothek angehören, unterhalb des Ordners js.

  7. Unter dem css Ordner, platzieren Sie die .css Dateien und die von den CSS-Dateien verwendeten Ressourcen (z. B. my_icon.png).

HINWEIS

Die oben beschriebene Verarbeitung von Stylesheets ist optional.

Fügen Sie die Client-Bibliothek wie folgt in die Seitenkomponenten-JSP ein:

  • um sowohl JavaScript-Code als auch Stylesheets einzuschließen:

    <ui:includeClientLib categories="<category-name1>, <category-name2>, ..."/>

    where <category-nameX> ist der Name der clientseitigen Bibliothek.

  • nur JavaScript-Code einschließen:

    <ui:includeClientLib js="<category-name>"/>

Weitere Informationen finden Sie in der Beschreibung des Tags <ui:includeClientLib>.

In manchen Fällen darf eine Client-Bibliothek nur im Autorenmodus verfügbar sein und muss im Veröffentlichungsmodus ausgeschlossen werden. Dies erreichen Sie wie folgt:

    if (WCMMode.fromRequest(request) != WCMMode.DISABLED) {
        %><ui:includeClientLib categories="cq.collab.blog"/><%
    }

Erste Schritte mit den Beispielen

Um den Tutorials auf dieser Seite zu folgen, installieren Sie das Paket namens Verwenden von ExtJS-Widgets in einer lokalen AEM-Instanz erstellen und eine Beispielseite erstellen, auf der die Komponenten einbezogen werden. Gehen Sie dazu wie folgt vor:

  1. Laden Sie in Ihrer AEM-Instanz das Paket mit dem Namen Verwenden von ExtJS-Widgets (v01) von Package Share aus und installieren Sie das Paket. Es erstellt das Projekt extjstraining below /apps im Repository.

  2. Schließen Sie die Client-Bibliothek, die die Skripte (js) und das Stylesheet (css) enthält, im Head-Tag der Geometrixx-Seiten-JSP ein, da Sie die Beispielkomponenten auf einer neuen Seite des Geometrixx Verzweigung:

    in CRXDE Lite Datei öffnen /apps/geometrixx/components/page/headlibs.jsp und fügen Sie die cq.extjstraining der vorhandenen Kategorie <ui:includeClientLib> Tag wie folgt:

    %><ui:includeClientLib categories="apps.geometrixx-main, cq.extjstraining"/><%

  3. Erstellen Sie eine neue Seite im Geometrixx Verzweigung unten /content/geometrixx/en/products und rufen Sie sie auf Verwenden von ExtJS-Widgets.

  4. Wechseln Sie in den Designmodus und fügen Sie alle Komponenten der Gruppe Using ExtJS Widgets dem Design von Geometrixx hinzu.

  5. Gehen Sie im Bearbeitungsmodus zurück: die Komponenten der Gruppe Verwenden von ExtJS-Widgets sind im Sidekick verfügbar.

HINWEIS

Die Beispiele auf dieser Seite basieren auf dem Geometrixx-Beispielinhalt, der nicht mehr im Lieferumfang von AEM enthalten ist, da er durch We.Retail ersetzt wurde. Siehe Dokument . We.Retail-Referenzimplementierung für Informationen zum Herunterladen und Installieren von Geometrixx.

Grundlegende Dialogfelder

Dialogfelder werden in der Regel verwendet, um Inhalte zu bearbeiten, aber auch nur zum Anzeigen von Informationen. Eine einfache Möglichkeit zum Anzeigen eines vollständigen Dialogfelds besteht darin, auf seine Darstellung im JSON-Format zuzugreifen. Verweisen Sie dazu Ihren Browser auf:

http://localhost:4502/<path-to-dialog>.-1.json

Die erste Komponente der Gruppe Using ExtJS Widgets im Sidekick wird mit 1. Dialog Basics bezeichnet und umfasst vier grundlegende Dialogfelder, die mit standardmäßigen Widgets und ohne modifizierte JavaScript-Logik erstellt wurden. Die Dialogfelder werden unten gespeichert /apps/extjstraining/components/dialogbasics. Die grundlegenden Dialogfelder sind:

  • das Dialogfeld „“ (Knoten fullfull): Es zeigt ein Fenster mit drei Registerkarten mit jeweils zwei Textfeldern an.

  • das Dialogfeld „Single Panel“ (Knoten singlepanel): Es zeigt ein Fenster mit einer Registerkarte mit zwei Textfeldern an.

  • das Dialogfeld „Multi Panel“ (Knoten multipanel): Es zeigt dasselbe an wie das Dialogfeld „Full“, ist aber anders aufgebaut.

  • das Dialogfeld „“ (Knoten designdesign): Es zeigt ein Fenster mit zwei Registerkarten an. Die erste Registerkarte weist ein Textfeld auf, ein Dropdown-Menü und einen ausblendbaren Textbereich. Die zweite Registerkarte verfügt über einen Feldsatz mit vier Textfeldern und einen ausblendbaren Feldsatz mit zwei Textfeldern.

Fügen Sie die Komponente 1. Dialog Basics der Beispielseite hinzu:

  1. Fügen Sie die 1. Dialoggrundlagen -Komponente auf der Beispielseite aus der Verwenden von ExtJS-Widgets im Sidekick.

  2. Die Komponente zeigt einen Titel, etwas Text und einen Link EIGENSCHAFTEN: Klicken Sie auf den Link, um die Eigenschaften des im Repository gespeicherten Absatzes anzuzeigen. Klicken Sie erneut auf den Link, um die Eigenschaften zu verbergen.

Die Komponente wird wie im Folgenden dargestellt:

chlimage_1-135

Beispiel 1: Dialogfeld „Full“

Das Dialogfeld Full zeigt ein Fenster mit drei Registerkarten mit jeweils zwei Textfeldern. Es ist das Standarddialogfeld der Komponente Dialog Basics. Die Eigenschaften sind:

  • Wird durch einen Knoten definiert: node type = cq:Dialog, xtype = dialog.

  • Zeigt drei Registerkarten an (node type = cq:Panel).

  • Jede Registerkarte verfügt über zwei Textfelder (node type = cq:Widget, xtype = textfield).

  • Wird durch den Knoten definiert:

    /apps/extjstraining/components/dialogbasics/full

  • Wird im JSON-Format gerendert, indem Folgendes angefordert wird:

    http://localhost:4502/apps/extjstraining/components/dialogbasics/full.-1.json

Das Dialogfeld wird wie im Folgenden dargestellt:

screen_shot_2012-01-31at45411pm

Beispiel 2: Dialogfeld „Single Panel“

Das Dialogfeld Single Panel zeigt ein Fenster mit einer Registerkarte und zwei Textfeldern an. Die Eigenschaften sind:

  • Zeigt eine Registerkarte an (node type = cq:Dialog, xtype = panel)

  • Die Registerkarte verfügt über zwei Textfelder (node type = cq:Widget, xtype = textfield)

  • Wird durch den Knoten definiert:

    /apps/extjstraining/components/dialogbasics/singlepanel

  • Wird im JSON-Format gerendert, indem Folgendes angefordert wird:

    http://localhost:4502/apps/extjstraining/components/dialogbasics/singlepanel.-1.json

  • Ein Vorteil gegenüber dem Dialogfeld Full besteht darin, dass weniger Konfiguration erforderlich ist.

  • Empfohlene Verwendung: für einfache Dialogfelder, die Informationen anzeigen oder nur wenige Felder aufweisen.

So verwenden Sie das Dialogfeld „Single Panel“:

  1. Ersetzen Sie das Dialogfeld der Komponente Dialog Basics durch das Dialogfeld Single Panel:

    1. In CRXDE Lite, löschen Sie den Knoten: /apps/extjstraining/components/dialogbasics/dialog
    2. Klicken Sie auf Alle speichern, um die Änderungen zu speichern.
    3. Kopieren Sie den Knoten: /apps/extjstraining/components/dialogbasics/singlepanel
    4. Fügen Sie den kopierten Knoten unter ein: /apps/extjstraining/components/dialogbasics
    5. Wählen Sie den Knoten aus: /apps/extjstraining/components/dialogbasics/Copy of singlepanelund umbenennen dialog.
  2. Bearbeiten Sie die Komponente: Das Dialogfeld wird wie im Folgenden dargestellt:

screen_shot_2012-01-31at45952pm

Beispiel 3: Dialogfeld „Multi Panel“

Das Dialogfeld Multi Panel zeigt dasselbe wie das Dialogfeld Full, ist aber anders aufgebaut. Die Eigenschaften sind:

  • Wird durch einen Knoten definiert (node type = cq:Dialog, xtype = tabpanel).

  • Zeigt drei Registerkarten an (node type = cq:Panel).

  • Jede Registerkarte verfügt über zwei Textfelder (node type = cq:Widget, xtype = textfield).

  • Wird durch den Knoten definiert:

    /apps/extjstraining/components/dialogbasics/multipanel

  • Wird im JSON-Format gerendert, indem Folgendes angefordert wird:

    http://localhost:4502/apps/extjstraining/components/dialogbasics/multipanel.-1.json

  • Ein Vorteil gegenüber dem Dialogfeld Full besteht in der vereinfachten Struktur.

  • Empfohlene Verwendung: für Dialogfelder mit mehreren Registerkarten.

So verwenden Sie das Dialogfeld "Multi Panel":

  1. Ersetzen Sie das Dialogfeld der Dialoggrundlagen -Komponente mit Multi-Panel dialog:

    Führen Sie die Schritte aus, die für die Beispiel 2: Dialogfeld "Single Panel"

  2. Bearbeiten Sie die Komponente: Das Dialogfeld wird wie im Folgenden dargestellt:

screen_shot_2012-01-31at50119pm

Beispiel 4: Dialogfeld „Rich“

Das Dialogfeld Rich zeigt ein Fenster mit zwei Registerkarten an. Die erste Registerkarte weist ein Textfeld auf, ein Dropdown-Menü und einen ausblendbaren Textbereich. Die zweite Registerkarte verfügt über einen Feldsatz mit vier Textfeldern und einen ausblendbaren Feldsatz mit zwei Textfeldern. Die Eigenschaften sind:

  • Wird durch einen Knoten definiert (node type = cq:Dialog, xtype = dialog).

  • Zeigt zwei Registerkarten an (node type = cq:Panel).

  • Die erste Registerkarte verfügt über eine dialogfieldset Widget mit einer textfield und selection Widget mit 3 Optionen und einem ausblendbaren dialogfieldset mit textarea Widget.

  • Die zweite Registerkarte verfügt über eine dialogfieldset Widget mit 4 textfield Widgets und ausblendbare dialogfieldset mit 2 textfield Widgets.

  • Wird durch den Knoten definiert:

    /apps/extjstraining/components/dialogbasics/rich

  • Wird im JSON-Format gerendert, indem Folgendes angefordert wird:

    http://localhost:4502/apps/extjstraining/components/dialogbasics/rich.-1.json

So verwenden Sie das Dialogfeld Rich:

  1. Ersetzen Sie das Dialogfeld der Dialoggrundlagen -Komponente mit Rich dialog:

    Führen Sie die Schritte aus, die für die Beispiel 2: Dialogfeld "Single Panel"

  2. Bearbeiten Sie die Komponente: Das Dialogfeld wird wie im Folgenden dargestellt:

screen_shot_2012-01-31at50429pm screen_shot_2012-01-31at50519pm

Dynamische Dialogfelder

Die zweite Komponente der Gruppe Using ExtJS Widgets im Sidekick heißt 2. Dynamic Dialogs und umfasst drei dynamische Dialogfelder, die mit standardmäßigen Widgets und modifizierter JavaScript-Logik erstellt wurden. Die Dialogfelder werden unten gespeichert /apps/extjstraining/components/dynamicdialogs. Die dynamischen Dialogfelder sind:

  • das Dialogfeld „Switch Tabs“ (Knoten switchtabs): Es zeigt ein Fenster mit zwei Registerkarten. Die erste Registerkarte weist eine Navigationsauswahl mit drei Optionen auf: Wenn eine Option ausgewählt ist, wird eine Registerkarte zu der Option angezeigt. Die zweite Registerkarte weist zwei Textfelder auf.
  • das Dialogfeld „“ (Knoten arbitraryarbitrary): Es zeigt ein Fenster mit einer Registerkarte an. Die Registerkarte verfügt über ein Feld, in das Sie Assets ziehen oder hochladen können, und ein Feld, das Informationen über die Seite, die es umfasst, und das Asset (falls auf eines verwiesen wird) anzeigt.
  • Das Dialogfeld "Felder ein/aus"( togglefield Knoten): Es wird ein Fenster mit einer Registerkarte angezeigt. Die Registerkarte verfügt über ein Kontrollkästchen: Ist es aktiviert, wird ein Feldsatz mit zwei Textfeldern angezeigt.

So schließen Sie die 2. Dynamische Dialogfelder -Komponente auf der Beispielseite:

  1. Fügen Sie die 2. Dynamische Dialogfelder -Komponente auf der Beispielseite aus der Verwenden von ExtJS-Widgets im Sidekick.

  2. Die Komponente zeigt einen Titel, etwas Text und einen Link EIGENSCHAFTEN: Klicken Sie, um die Eigenschaften des im Repository gespeicherten Absatzes anzuzeigen. Klicken Sie erneut, um die Eigenschaften zu verbergen.

Die Komponente wird wie im Folgenden dargestellt:

chlimage_1-136

Beispiel 1: Dialogfeld „Switch Tabs“

Das Dialogfeld Switch Tabs zeigt ein Fenster mit zwei Registerkarten an. Die erste Registerkarte weist eine Navigationsauswahl mit drei Optionen auf: Wenn eine Option ausgewählt ist, wird eine Registerkarte zu der Option angezeigt. Die zweite Registerkarte weist zwei Textfelder auf.

Die wichtigsten Eigenschaften sind:

  • Wird durch einen Knoten definiert (node type = cq:Dialog, xtype = dialog).

  • Zeigt zwei Registerkarten (node type = cq:Panel): eine Auswahlregisterkarte und eine zweite Registerkarte, die von der Auswahl auf der ersten Registerkarte abhängt (drei Optionen).

  • Hat 3 optionale Registerkarten (node type = cq:Panel), jedes hat zwei Textfelder (node type = cq:Widget, xtype = textfield). Es wird jeweils nur eine optionale Registerkarte angezeigt.

  • Wird durch die Variable switchtabs Knoten unter:

    /apps/extjstraining/components/dynamicdialogs/switchtabs

  • Wird im JSON-Format gerendert, indem Folgendes angefordert wird:

    http://localhost:4502/apps/extjstraining/components/dynamicdialogs/switchtabs.-1.json

Die Logik wird wie folgt durch Ereignis-Listener und JavaScript-Code implementiert:

  • Der Dialogfeldknoten hat eine " beforeshow" Listener, der alle optionalen Registerkarten ausblendet, bevor das Dialogfeld angezeigt wird:

    beforeshow="function(dialog){Ejst.x2.manageTabs(dialog.items.get(0));}"

    dialog.items.get(0) Ruft die Registerkarte ab, die das Auswahlfeld und die 3 optionalen Bedienfelder enthält.

  • Die Ejst.x2 -Objekt wird im exercises.js Datei unter:

    /apps/extjstraining/clientlib/js/exercises.js

  • Im Ejst.x2.manageTabs() -Methode als Wert von index -1 ist, sind alle optionalen Registerkarten ausgeblendet (i wechselt von 1 zu 3).

  • Die Auswahlregisterkarte verfügt über zwei Listener: die beim Laden des Dialogfelds die ausgewählte Registerkarte anzeigt (" loadcontent"Ereignis) und eines, das die ausgewählte Registerkarte anzeigt, wenn die Auswahl geändert wird (" selectionchanged" event):

    loadcontent="function(field,rec,path){Ejst.x2.showTab(field);}"

    selectionchanged="function(field,value){Ejst.x2.showTab(field);}"

  • Im Ejst.x2.showTab() -Methode:

    field.findParentByType('tabpanel') Ruft das Registerkartenbedienfeld ab, das alle Registerkarten enthält ( field steht für das Auswahl-Widget)

    field.getValue() Ruft den Wert der Auswahl ab, z. B.: tab2

    Ejst.x2.manageTabs() zeigt die ausgewählte Registerkarte an.

  • Jede optionale Registerkarte verfügt über einen Listener, der die Registerkarte auf " render"-Ereignis:

    render="function(tab){Ejst.x2.hideTab(tab);}"

  • Im Ejst.x2.hideTab() -Methode:

    ist tabPanel das Registerkartenbedienfeld, das alle Registerkarten enthält.

    ist index der Index der optionalen Registerkarte.

    tabPanel.hideTabStripItem(index) blendet die Registerkarte aus

Dies wird wie folgt angezeigt:

screen_shot_2012-02-01at114745am

Beispiel 2: Dialogfeld „Arbitrary“

Sehr oft zeigt ein Dialogfeld Inhalte aus der zugrunde liegenden Komponente an. Das hier beschriebene Dialogfeld Arbitrary zeigt Inhalte aus einer anderen Komponente an.

Das Dialogfeld Arbitrary zeigt ein Fenster mit einer Registerkarte an. Die Registerkarte verfügt über zwei Felder: eines, in das Sie Assets ziehen oder hochladen können, und eines, das Informationen über die Seite, die es umfasst, und das Asset (falls auf eines verwiesen wird) anzeigt.

Die wichtigsten Eigenschaften sind:

  • Wird durch einen Knoten definiert (node type = cq:Dialog, xtype = dialog).

  • Zeigt ein tabpanel-Widget an (node type = cq:Widget, xtype = tabpanel) mit 1 Bereich (node type = cq:Panel)

  • Das Bedienfeld verfügt über ein smartfile -Widget (node type = cq:Widget, xtype = smartfile) und ein ownerdraw-Widget (node type = cq:Widget, xtype = ownerdraw)

  • Wird durch die Variable arbitrary Knoten unter:

    /apps/extjstraining/components/dynamicdialogs/arbitrary

  • Wird im JSON-Format gerendert, indem Folgendes angefordert wird:

    http://localhost:4502/apps/extjstraining/components/dynamicdialogs/arbitrary.-1.json

Die Logik wird wie folgt durch Ereignis-Listener und JavaScript-Code implementiert:

  • Das ownerdraw-Widget hat eine loadcontent" Listener, der beim Laden des Inhalts Informationen zur Seite anzeigt, die die Komponente enthält, und zum Asset, auf das vom smartfile-Widget verwiesen wird:

    loadcontent="function(field,rec,path){Ejst.x2.showInfo(field,rec,path);}"

    field wird mit dem ownerdraw-Objekt festgelegt

    path wird mit dem Inhalts-Pfad der Komponente festgelegt (z. B.: /content/geometrixx/de/products/triangle/ui-tutorial/jcr:content/par/dynamicdialogs)

  • Die Ejst.x2 -Objekt wird im exercises.js Datei unter:

    /apps/extjstraining/clientlib/js/exercises.js

  • Im Ejst.x2.showInfo() -Methode:

    ist pagePath der Pfad der Seite, die die Komponente enthält.

    stellt pageInfo die Seiteneigenschaften im JSON-Format dar.

    ist reference der Pfad des referenzierten Assets.

    stellt metadata die Metadaten des Assets im JSON-Format dar.

    ownerdraw.getEl().update(html); zeigt den erstellten HTML-Code im Dialogfeld an

So verwenden Sie das Dialogfeld Arbitrary:

  1. Ersetzen Sie das Dialogfeld der Dynamisches Dialogfeld -Komponente mit Arbitrary dialog:

    Führen Sie die Schritte aus, die für die Beispiel 2: Dialogfeld "Single Panel"

  2. Bearbeiten Sie die Komponente: Das Dialogfeld wird wie im Folgenden dargestellt:

screen_shot_2012-02-01at115300am

Beispiel 3: Dialogfeld „Toggle Fields“

Das Dialogfeld Toggle Fields zeigt ein Fenster mit einer Registerkarte an. Die Registerkarte verfügt über ein Kontrollkästchen: Ist es aktiviert, wird ein Feldsatz mit zwei Textfeldern angezeigt.

Die wichtigsten Eigenschaften sind:

  • Wird durch einen Knoten definiert (node type = cq:Dialog, xtype = dialog).

  • Zeigt ein tabpanel-Widget an (node type = cq:Widget, xtype = tabpanel) mit 1 Bereich (node type = cq:Panel).

  • Das Bedienfeld verfügt über ein Auswahl-/Kontrollkästchen-Widget (Knotentyp = cq:Widget, xtype = selection, type = checkbox) und ein ausblendbares dialogfieldset-Widget (node type = cq:Widget, xtype = dialogfieldset), die standardmäßig mit 2 Textfeld-Widgets ausgeblendet ist (Knotentyp = cq:Widget, xtype = textfield).

  • Wird durch die Variable togglefields Knoten unter:

    /apps/extjstraining/components/dynamicdialogs/togglefields

  • Wird im JSON-Format gerendert, indem Folgendes angefordert wird:

    http://localhost:4502/apps/extjstraining/components/dynamicdialogs/togglefields.-1.json

Die Logik wird wie folgt durch Ereignis-Listener und JavaScript-Code implementiert:

  • Die Auswahlregisterkarte verfügt über zwei Listener: eines, das das dialogfieldset anzeigt, wenn der Inhalt geladen wird (" loadcontent"event) und eines, das das dialogfieldset anzeigt, wenn die Auswahl geändert wird (" selectionchanged" event):

    loadcontent="function(field,rec,path){Ejst.x2.toggleFieldSet(field);}"

    selectionchanged="function(field,value){Ejst.x2.toggleFieldSet(field);}"

  • Die Ejst.x2 -Objekt wird im exercises.js Datei unter:

    /apps/extjstraining/clientlib/js/exercises.js

  • Im Ejst.x2.toggleFieldSet() -Methode:

    • box ist das Auswahlobjekt
    • ist panel das Bedienfeld, das das selection- und das dialogfieldset-Widget enthält.
    • fieldSet ist das dialogfieldset -Objekt
    • ist show der Wert der Auswahl („true“ oder „false“).
    • wird das dialogfieldset anhand von „show“ angezeigt oder nicht.

So verwenden Sie die Umschalten zwischen Feldern dialog:

  1. Ersetzen Sie das Dialogfeld der Dynamisches Dialogfeld -Komponente mit Umschalten zwischen Feldern dialog:

    Führen Sie die Schritte aus, die für die Beispiel 2: Dialogfeld "Single Panel"

  2. Bearbeiten Sie die Komponente: Das Dialogfeld wird wie im Folgenden dargestellt:

screen_shot_2012-02-01at115518am

Benutzerdefinierte Widgets

Die direkt einsatzbereiten und im Lieferumfang von AEM enthaltenen Widgets sollten die meisten Anwendungsfälle abdecken. Manchmal kann es jedoch erforderlich sein, ein benutzerdefiniertes Widget zu erstellen, um eine projektspezifische Anforderung abzudecken. Benutzerdefinierte Widgets werden erstellt, indem vorhandene erweitert werden. Das Paket Using ExtJS Widgets enthält drei Dialogfelder, die drei verschiedene benutzerdefinierte Widgets verwenden, um die ersten Schritte mit der Anpassung zu vereinfachen:

  • Das Dialogfeld „Multi Field“ (Knoten multifield) zeigt ein Fenster mit einer Registerkarte. Die Registerkarte verfügt über ein benutzerdefiniertes multifield-Widget mit zwei Feldern: Ein Dropdown-Menü mit zwei Optionen und ein Textfeld. Da es auf dem im Lieferumfang enthaltenen multifield-Widget (mit nur einem Textfeld) basiert, verfügt es über alle Funktionen des multifield-Widgets.

  • Das Dialogfeld „Tree Browse“ (treebrowse-Knoten) zeigt ein Fenster mit einer Registerkarte, die ein Pfadbrowser-Widget enthält: Wenn Sie auf den Pfeil klicken, wird ein Fenster geöffnet, in dem Sie eine Hierarchie durchsuchen und ein Element auswählen können. Der Pfad des Elements wird dann dem Pfadfeld hinzugefügt und wird beibehalten, wenn das Dialogfeld geschlossen wird.

  • Ein Dialogfeld, das auf dem Rich-Text-Editor-Plug-in basiert (Knoten rteplugin) und dem Rich-Text-Editor eine benutzerdefinierte Schaltfläche hinzufügt, mit der benutzerdefinierter Text in den Haupttext eingefügt werden kann. Es besteht aus einem richtext-Widget (RTE) und einer benutzerdefinierten Funktion, die durch den RTE-Plug-in-Mechanismus hinzugefügt wird.

Die benutzerdefinierten Widgets und das Plug-in sind in der Komponente 3. Custom Widgets des Pakets Using ExtJS Widgets enthalten. Fügen Sie diese Komponente wie folgt der Beispielseite hinzu:

  1. Fügen Sie die 3. Benutzerdefinierte Widgets -Komponente auf der Beispielseite aus der Verwenden von ExtJS-Widgets im Sidekick.

  2. Die Komponente zeigt einen Titel, etwas Text und, wenn Sie auf den Link EIGENSCHAFTEN klicken, die Eigenschaften des im Repository gespeicherten Absatzes an. Durch erneutes Klicken werden die Eigenschaften verborgen.

    Die Komponente wird wie im Folgenden dargestellt:

chlimage_1-137

Beispiel 1: Custom Multifield-Widget

Das auf dem Custom Multifield-Widget basierende Dialogfeld zeigt ein Fenster mit einer Registerkarte an. Die Registerkarte verfügt über ein benutzerdefiniertes multifield-Widget mit zwei Feldern (im Gegensatz zur Standardversion mit einem Feld): Ein Dropdown-Menü mit zwei Optionen und ein Textfeld.

Das auf dem Custom Multifield-Widget basierende Dialogfeld:

  • Wird durch einen Knoten definiert (node type = cq:Dialog, xtype = dialog).

  • Zeigt ein tabpanel-Widget an (node type = cq:Widget, xtype = tabpanel), die ein Bedienfeld enthalten (Knotentyp = cq:Widget, xtype = panel).

  • Das Bedienfeld verfügt über eine multifield Widget (node type = cq:Widget, xtype = multifield).

  • Die multifield Widget verfügt über fieldconfig (node type = nt:unstructured, xtype = ejstcustom, optionsProvider = Ejst.x3.provideOptions), der auf dem benutzerdefinierten xtype ' ejstcustom":

    • ' fieldconfig' ist eine Konfigurationsoption der CQ.form.MultiField -Objekt.

    • ' optionsProvider" ist eine Konfiguration der ejstcustom Widget. Sie wird mit dem Ejst.x3.provideOptions -Methode, die in exercises.js unter:

      /apps/extjstraining/clientlib/js/exercises.js

      und gibt 2 Optionen zurück.

  • Wird durch die Variable multifield Knoten unter:

    /apps/extjstraining/components/customwidgets/multifield

  • Wird im JSON-Format gerendert, indem Folgendes angefordert wird:

    http://localhost:4502/apps/extjstraining/components/customwidgets/multifield.-1.json

Das benutzerdefinierte Multifield-Widget (xtype = ejstcustom):

  • Ist ein JavaScript-Objekt namens Ejst.CustomWidget.

  • Wird definiert im CustomWidget.js JavaScript-Datei unter:

    /apps/extjstraining/clientlib/js/CustomWidget.js

  • Erweitert die CQ.form.CompositeField Widget.

  • Hat 3 Felder: hiddenField (Textfeld), allowField (ComboBox) und otherField (Textfeld)

  • Überschreibungen CQ.Ext.Component#initComponent um die drei Felder hinzuzufügen:

    • allowField ist ein CQ.form.Selection-Objekt vom Typ „select“. optionsProvider ist eine Konfiguration des Selection-Objekts, das mit der optionsProvider-Konfiguration des im Dialogfeld definierten CustomWidget instanziiert wird.
    • otherField ist ein CQ.Ext.form.TextField-Objekt.
  • Überschreibt die Methoden setValue, getValue und getRawValue von CQ.form.CompositeField um den Wert von CustomWidget mit dem Format festzulegen und abzurufen:

    <allowField value>/<otherField value>, e.g.: 'Bla1/hello'.

  • Registriert sich selbst als ejstcustom" xtype:

    CQ.Ext.reg('ejstcustom', Ejst.CustomWidget);

Das auf dem Custom Multifield-Widget basierende Dialogfeld wird wie folgt angezeigt:

screen_shot_2012-02-01at115840am

Beispiel 2: Benutzerdefiniertes Treebrowse-Widget

Das auf dem Treebrowse-Widget basierende benutzerdefinierte Dialogfeld zeigt ein Fenster mit einer Registerkarte, die ein benutzerdefiniertes Pfadbrowser-Widget enthält: Wenn Sie auf den Pfeil klicken, wird ein Fenster geöffnet, in dem Sie eine Hierarchie durchsuchen und ein Element auswählen können. Der Pfad des Elements wird dann dem Pfadfeld hinzugefügt und wird beibehalten, wenn das Dialogfeld geschlossen wird.

Das benutzerdefinierte treebrowse-Dialogfeld:

  • Wird durch einen Knoten definiert (node type = cq:Dialog, xtype = dialog).

  • Zeigt ein tabpanel-Widget an (node type = cq:Widget, xtype = tabpanel), die ein Bedienfeld enthalten (Knotentyp = cq:Widget, xtype = panel).

  • Das Bedienfeld verfügt über ein benutzerdefiniertes Widget (Knotentyp = cq:Widget, xtype = ejstbrowse)

  • Wird durch die Variable treebrowse Knoten unter:

    /apps/extjstraining/components/customwidgets/treebrowse

  • Wird im JSON-Format gerendert, indem Folgendes angefordert wird:

    http://localhost:4502/apps/extjstraining/components/customwidgets/treebrowse.-1.json

Das benutzerdefinierte treebrowse-Widgets (xtype = ejstbrowse):

  • Ist ein JavaScript-Objekt namens Ejst.CustomWidget.

  • Wird definiert im CustomBrowseField.js JavaScript-Datei unter:

    /apps/extjstraining/clientlib/js/CustomBrowseField.js

  • Erweiterungen CQ.Ext.form.TriggerField.

  • Definiert ein Fenster zum Durchsuchen namens browseWindow.

  • Überschreibungen CQ.Ext.form.TriggerField um das Fenster zum Durchsuchen anzuzeigen, wenn auf den Pfeil geklickt wird.

  • Definiert eine CQ.Ext.tree.TreePanel -Objekt:

    • Ruft seine Daten ab, indem es das Servlet aufruft, das registriert ist unter /bin/wcm/siteadmin/tree.json.
    • Der Stamm ist " apps/extjstraining".
  • Definiert eine window Objekt (CQ.Ext.Window):

    • Basierend auf dem vordefinierten Bedienfeld.
    • Weist eine OK-Schaltfläche auf, die den Wert des ausgewählten Pfads festlegt und das Bedienfeld ausblendet.
  • Das Fenster wird unterhalb des Feldes Pfad verankert.

  • Der ausgewählte Pfad wird bei einem show-Ereignis vom Durchsuchfeld an das Fenster weitergegeben.

  • Registriert sich selbst als ejstbrowse" xtype:

    CQ.Ext.reg('ejstbrowse', Ejst.CustomBrowseField);

So verwenden Sie die Custom Treebrowse Widget-basiertes Dialogfeld:

  1. Ersetzen Sie das Dialogfeld der Benutzerdefinierte Widgets -Komponente mit Custom Treebrowse dialog:

    Führen Sie die Schritte aus, die für die Beispiel 2: Dialogfeld "Single Panel"

  2. Bearbeiten Sie die Komponente: Das Dialogfeld wird wie im Folgenden dargestellt:

screen_shot_2012-02-01at120104pm

Beispiel 3: Rich-Text-Editor (RTE)-Plug-in

Das auf dem Rich-Text-Editor (RTE)-Plug-in basierende Dialogfeld ist ein auf dem Rich-Text-Editor basierendes Dialogfeld, das eine benutzerdefinierte Schaltfläche aufweist, mit der benutzerdefinierter Text in eckigen Klammern eingefügt wird. Der benutzerdefinierte Text kann auch anhand einer serverseitigen Logik geparst werden (in diesem Beispiel nicht implementiert), um beispielsweise Text hinzuzufügen, der am jeweiligen Pfad definiert ist:

Das auf dem RTE-Plug-in basierende Dialogfeld:

  • Wird durch den Knoten rteplugin definiert unter:

    /apps/extjstraining/components/customwidgets/rteplugin

  • Wird im JSON-Format gerendert, indem Folgendes angefordert wird:

    http://localhost:4502/apps/extjstraining/components/customwidgets/rteplugin.-1.json

  • Die rtePlugins Knoten hat einen untergeordneten Knoten inserttext (node type = nt:unstructured), die nach dem Plug-in benannt ist. Er weist eine Eigenschaft mit der Bezeichnung features auf, die definiert, welche der Plug-in-Funktionen für den RTE verfügbar sind.

Das RTE-Plug-in:

  • Ist ein JavaScript-Objekt namens Ejst.InsertTextPlugin.

  • Wird definiert im InsertTextPlugin.js JavaScript-Datei unter:

    /apps/extjstraining/clientlib/js/InsertTextPlugin.js

  • Erweitert die CQ.form.rte.plugins.Plugin -Objekt.

  • Die folgenden Methoden definieren das CQ.form.rte.plugins.Plugin-Objekt und werden im implementierenden Plug-in überschrieben:

    • getFeatures() gibt ein Array aller Funktionen zurück, die vom Plug-in bereitgestellt werden.
    • initializeUI() fügt die neue Schaltfläche der RTE-Symbolleiste hinzu.
    • notifyPluginConfig() zeigt Titel und Text an, wenn auf die Schaltfläche gezeigt wird.
    • execute() wird aufgerufen, wenn auf die Schaltfläche geklickt wird, und führt die Plug-in-Aktion durch: Sie zeigt ein Fenster an, in dem Text definiert wird, der eingeschlossen werden soll.
  • insertText() fügt einen Text anhand des entsprechenden Dialogfeldobjekts Ejst.InsertTextPlugin.Dialog ein (siehe unten).

  • executeInsertText() wird von der apply() -Methode des Dialogfelds, die beim OK auf klicken.

  • Registriert sich selbst als inserttext' plugin:

    CQ.form.rte.plugins.PluginRegistry.register("inserttext", Ejst.InsertTextPlugin);

  • Das Ejst.InsertTextPlugin.Dialog-Objekt definiert das Dialogfeld, das geöffnet wird, wenn auf die Plug-in-Schaltfläche geklickt wird. Das Dialogfeld besteht aus einem Bedienfeld, einem Formular, einem Textfeld und zwei Schaltflächen (OK und Abbrechen).

So verwenden Sie das auf dem Rich-Text-Editor (RTE)-Plug-in basierende Dialogfeld:

  1. Ersetzen Sie das Dialogfeld der Benutzerdefinierte Widgets -Komponente mit Rich-Text-Editor (RTE)-Plug-in basiertes Dialogfeld:

    Führen Sie die Schritte aus, die für die Beispiel 2: Dialogfeld "Single Panel"

  2. Bearbeiten Sie die Komponente.

  3. Klicken Sie auf das letzte Symbol rechts (das mit vier Pfeilen). Geben Sie einen Pfad ein und klicken Sie auf OK:

    Der Pfad wird in eckigen Klammern ([]).

  4. Klicken Sie auf OK, um den Rich-Text-Editor zu schließen.

Das auf dem Rich-Text-Editor (RTE)-Plug-in basierende Dialogfeld wird wie folgt angezeigt:

screen_shot_2012-02-01at120254pm

HINWEIS

Dieses Beispiel zeigt nur, wie der clientseitige Teil der Logik implementiert wird: Platzhalter ([text]) müssen dann explizit serverseitig analysiert werden (z. B. in der Komponenten-JSP).

Tree Overview

Das im Lieferumfang enthaltene CQ.Ext.tree.TreePanel-Objekt bietet eine baumstrukturierte Benutzeroberflächendarstellung baumstrukturierter Daten. Die im Paket Using ExtJS Widgets enthaltene Komponente „Tree Overview“ zeigt die Verwendung des Objekts TreePanel zur Anzeige einer JCR-Baumstruktur unterhalb eines gegebenen Pfads. Das Fenster selbst kann an- bzw. abgedockt werden. In diesem Beispiel wird die Fensterlogik in die Komponenten-JSP zwischen <script></script>-Tags eingebunden.

Fügen Sie die Komponente Tree Overview wie folgt der Beispielseite hinzu:

  1. Fügen Sie die 4. Baumübersicht -Komponente auf der Beispielseite aus der Verwenden von ExtJS-Widgets im Sidekick.

  2. Die Komponente zeigt:

    • einen Titel und etwas Text.
    • einen EIGENSCHAFTEN-Link: Klicken Sie, um die Eigenschaften des im Repository gespeicherten Absatzes anzuzeigen. Klicken Sie erneut, um die Eigenschaften zu verbergen.
    • ein frei bewegliches Fenster mit einer Baumstrukturdarstellung des Repositorys, das erweitert werden kann.

Die Komponente wird wie im Folgenden dargestellt:

screen_shot_2012-02-01at120639pm

Die Komponente „Tree Overview“:

  • Wird definiert unter:

    /apps/extjstraining/components/treeoverview

  • Ihr Dialogfeld ermöglicht das Festlegen der Fenstergröße und das An- bzw.- Abdocken des Fensters (weitere Details unten).

Die Komponenten-JSP:

  • Ruft die Breite, Höhe und angedockten Eigenschaften aus dem Repository ab.

  • Zeigt Text zum Datenformat des Baumstrukturüberblicks an.

  • Bettet die Fensterlogik zwischen JavaScript-Tags in die Komponenten-JSP ein.

  • Wird definiert unter:

    apps/extjstraining/components/treeoverview/content.jsp

Der in die Komponenten-JSP eingebettete JavaScript-Code:

  • Definiert ein tree-Objekt, indem versucht wird, ein Baumstrukturfenster von der Seite abzurufen.

  • Wenn das Fenster, das den Baum anzeigt, nicht vorhanden ist, treePanel (CQ.Ext.tree.TreePanel) erstellt wird:

    • treePanel enthält die Daten, anhand derer das Fenster erstellt wird.

    • Die Daten werden abgerufen, indem das Servlet aufgerufen wird, das registriert ist unter:

      /bin/wcm/siteadmin/tree.json

  • Die beforeload Listener stellt sicher, dass der angeklickte Knoten geladen wird.

  • Die root -Objekt legt den Pfad fest apps/extjstraining als Baumstamm.

  • tree (CQ.Ext.Window) wird basierend auf der vordefinierten treePanelund wird angezeigt mit:

    tree.show();

  • Wenn das Fenster bereits vorhanden ist, wird es anhand der aus dem Repository abgerufenen Breite, Höhe und angedockten Eigenschaften angezeigt.

Das Komponentendialogfeld:

  • Zeigt eine Registerkarte mit zwei Feldern zum Festlegen der Größe (Breite und Höhe) des Fensters des Baumstrukturüberblicks und ein Feld zum An-/Abdocken des Fensters.

  • Wird durch einen Knoten definiert (node type = cq:Dialog, xtype = panel).

  • Das Bedienfeld verfügt über ein Widget "sizefield"(Knotentyp = cq:Widget, xtype = sizefield) und ein Auswahl-Widget (node type = cq:Widget, xtype = selection, type = radio) mit 2 Optionen (true/false)

  • Wird definiert durch den Knoten dialog unter:

    /apps/extjstraining/components/treeoverview/dialog

  • Wird im JSON-Format gerendert, indem Folgendes angefordert wird:

    http://localhost:4502/apps/extjstraining/components/treeoverview/dialog.-1.json

  • Wird wie folgt angezeigt:

screen_shot_2012-02-01at120745pm

Grid Overview

Ein „Grid Panel“ stellt Daten in tabellarischer Form als Zeilen und Spalten dar. Es setzt sich aus Folgendem zusammen:

  • Store: das Modell, das die Datendatensätze enthält (Zeilen)
  • Spaltenmodell: das Spaltendesign
  • Ansicht: fasst die Benutzeroberfläche zusammen
  • Auswahlmodell: das Auswahlverhalten

Die in der Komponente "Grid Overview"enthaltene Komponente Verwenden von ExtJS-Widgets -Paket zeigt, wie Daten im Tabellenformat angezeigt werden:

  • Das Beispiel 1 verwendet statische Daten.
  • Beispiel 2 verwendet Daten, die aus dem Repository abgerufen wurden.

So fügen Sie die Komponente "Grid Overview"zur Beispielseite hinzu:

  1. Fügen Sie die 5. Übersicht über das Raster -Komponente auf der Beispielseite aus der Verwenden von ExtJS-Widgets im Sidekick.

  2. Die Komponente zeigt:

    • einen Titel mit etwas Text
    • einen EIGENSCHAFTEN-Link: Klicken Sie, um die Eigenschaften des im Repository gespeicherten Absatzes anzuzeigen. Klicken Sie erneut, um die Eigenschaften zu verbergen.
    • ein frei bewegbares Fenster, das Daten im Tabellenformat enthält.

Die Komponente wird wie im Folgenden dargestellt:

screen_shot_2012-02-01at121109pm

Beispiel 1: Standardraster

In der von Adobe ausgelieferten Version zeigt die Komponente Grid Overview ein Fenster mit statischen Daten in tabellarischer Form. In diesem Beispiel wird die Logik auf zwei Arten in die Komponenten-JSP eingebunden:

  • Die generische Logik wird zwischen <script></script>-Tags definiert.
  • Die spezifische Logik steht in einer separaten JS-Datei zur Verfügung und ist in der JSP verlinkt. Diese Einrichtung ermöglicht es, einfach zwischen den beiden Logiken (statisch/dynamisch) umzuschalten, indem die gewünschten <script>-Tags kommentiert werden.

Die Komponente „Grid Overview“:

  • Wird definiert unter:

    /apps/extjstraining/components/gridoverview

  • Ihr Dialogfeld ermöglicht das Festlegen der Fenstergröße und das An- bzw.- Abdocken des Fensters.

Die Komponenten-JSP:

  • Ruft die Breite, Höhe und angedockten Eigenschaften aus dem Repository ab.

  • Zeigt Text als Einführung zum Datenformat des Rasterüberblicks an.

  • Verweist auf JavaScript-Code, der das GridPanel-Objekt definiert:

    <script type="text/javascript" src="/apps/extjstraining/components/gridoverview/defaultgrid.js"></script>

    defaultgrid.js definiert einige statische Daten als Grundlage für das GridPanel-Objekt.

  • Bettet zwischen JavaScript-Tags JavaScript-Code ein, der das Window-Objekt definiert, das das GridPanel-Objekt verbraucht.

  • Wird definiert unter:

    apps/extjstraining/components/gridoverview/content.jsp

Der in die Komponenten-JSP eingebettete JavaScript-Code:

  • Definiert die grid -Objekt, indem Sie versuchen, die Fensterkomponente von der Seite abzurufen:

    var grid = CQ.Ext.getCmp("<%= node.getName() %>-grid");

  • Wenn grid nicht vorhanden ist, ist ein CQ.Ext.grid.GridPanel Objekt ( gridPanel) definiert wird, indem die getGridPanel() -Methode (siehe unten). Diese Methode wird in defaultgrid.js definiert.

  • grid ist CQ.Ext.Window-Objekt, basierend auf dem vordefinierten GridPanel, und wird angezeigt: grid.show();

  • Wenn grid bereits vorhanden ist, wird sie basierend auf den vom Repository abgerufenen Eigenschaften für Breite, Höhe und angedockte Elemente angezeigt.

Die JavaScript-Datei ( defaultgrid.js), auf die in der Komponenten-JSP verwiesen wird, definiert die getGridPanel() -Methode, die vom in die JSP eingebetteten Skript aufgerufen wird und eine CQ.Ext.grid.GridPanel -Objekt, basierend auf statischen Daten. Die Logik lautet wie folgt:

  • myData ist ein Array statischer Daten, formatiert als Tabelle mit fünf Spalten und vier Zeilen.

  • store ist CQ.Ext.data.Store Objekt, das myData.

  • store wird im Speicher geladen:

    store.load();

  • gridPanel ist CQ.Ext.grid.GridPanel Objekt, das store:

    • Die Spaltenbreiten werden jederzeit neu proportional dargestellt:

      forceFit: true

    • Es kann jeweils nur eine Zeile ausgewählt werden:

      singleSelect:true

Beispiel 2: Verweissuchraster

Wenn Sie das Paket installieren, wird die content.jsp des Rasterübersicht -Komponente zeigt ein Raster an, das auf statischen Daten basiert. Es ist möglich, die Komponente so zu ändern, dass ein Raster mit den folgenden Eigenschaften angezeigt wird:

  • Hat drei Spalten.
  • Basiert auf Daten, die aus dem Repository abgerufen werden, indem ein Servlet aufgerufen wird.
  • Die Zellen der letzten Spalte können bearbeitet werden. Der Wert wird in einer test-Eigenschaft unterhalb des Knotens gespeichert, der anhand des in der ersten Spalte angezeigten Pfades definiert wird.

Wie im vorherigen Abschnitt erläutert, erhält das Fensterobjekt seine CQ.Ext.grid.GridPanel -Objekt durch Aufruf der getGridPanel() -Methode, die in der defaultgrid.js Datei unter /apps/extjstraining/components/gridoverview/defaultgrid.js. Die Rasterübersicht -Komponente bietet eine andere Implementierung für die getGridPanel() -Methode, definiert in der referencesearch.js Datei unter /apps/extjstraining/components/gridoverview/referencesearch.js. Durch Wechseln der JS-Datei, auf die in der Komponenten-JSP verwiesen wird, basiert das Raster auf aus dem Repository abgerufenen Daten.

Wechseln Sie die JS-Datei, auf die in der Komponenten-JSP verwiesen wird:

  1. In CRXDE Lite in der content.jsp -Datei der Komponente kommentieren Sie die Zeile, die die defaultgrid.js -Datei, sodass sie wie folgt aussieht:

    <!-- script type="text/javascript" src="/apps/extjstraining/components/gridoverview/defaultgrid.js"></script-->

  2. Entfernen Sie den Kommentar aus der Zeile, die die referencesearch.js -Datei, sodass sie wie folgt aussieht:

    <script type="text/javascript" src="/apps/extjstraining/components/gridoverview/referencesearch.js"></script>

  3. Speichern Sie die Änderungen.

  4. Aktualisieren Sie die Beispielseite.

Die Komponente wird wie im Folgenden dargestellt:

screen_shot_2012-02-01at121429pm

Der JavaScript-Code, auf den in der Komponenten-JSP (referencesearch.js) definiert die getGridPanel() -Methode, die von der Komponenten-JSP aufgerufen wird, und gibt eine CQ.Ext.grid.GridPanel -Objekt, basierend auf Daten, die dynamisch aus dem Repository abgerufen werden. Die Logik in referencesearch.js definiert dynamische Daten als Basis für das GridPanel:

  • reader ist ein CQ.Ext.data.JsonReader-Objekt, das die Servlet-Antwort im JSON-Format für drei Spalten liest.

  • cm ist CQ.Ext.grid.ColumnModel -Objekt für 3 Spalten.

    Die Zellen der Spalte "Test" können so bearbeitet werden, wie sie mit einem Editor definiert wurden:

    editor: new CQ.Ext.form.TextField({})

  • die Spalten sind sortierbar:

    cm.defaultSortable = true;

  • store ist CQ.Ext.data.GroupingStore -Objekt:

    • Ruft seine Daten ab, indem das Servlet unter " /bin/querybuilder.json" mit einigen Parametern, die zum Filtern der Abfrage verwendet werden
    • Es basiert auf dem vorher definierten reader.
    • Die Tabelle wird anhand der Spalte „jcr:path“ in aufsteigender Reihenfolge definiert.
  • gridPanel ist CQ.Ext.grid.EditorGridPanel -Objekt, das bearbeitet werden kann:

    • Es basiert auf dem vordefinierten store und auf dem Spaltenmodell cm.

    • Es kann jeweils nur eine Zeile ausgewählt werden:

      sm: new CQ.Ext.grid.RowSelectionModel({singleSelect:true})

    • Der afteredit-Listener stellt sicher, dass nach der Bearbeitung einer Zelle in der „Test“-Spalte Folgendes passiert:

      • die Eigenschaft " test' des Knotens an dem Pfad, der durch das jcr:path"-Spalte wird im Repository mit dem Wert der Zelle festgelegt
      • Wenn der POST erfolgreich ist, wird der Wert dem store-Objekt hinzugefügt, andernfalls wird er abgelehnt.

Auf dieser Seite