Använda och utöka widgetar (Classic UI) using-and-extending-widgets-classic-ui

för att inkludera både javascript-kod och formatmallar:

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

där <category-nameX> är namnet på klientbiblioteket.

att endast inkludera javascript-kod:

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

Dialogrutan Fullständig ( full nod): visas ett fönster med 3 flikar, där varje flik har 2 textfält.

dialogrutan Enstaka panel( singlepanel nod): visas ett fönster med en flik som innehåller 2 textfält.

dialogrutan Flera paneler( multipanel nod): den visas på samma sätt som i den fullständiga dialogrutan, men den har skapats på ett annat sätt.

dialogrutan Design( design nod): visas ett fönster med 2 flikar. Den första fliken har ett textfält, en nedrullningsbar meny och ett komprimerbart textområde. Den andra fliken har ett fält med fyra textfält och ett komprimerbart fält med två textfält.

Definieras av en nod: nodtyp = cq:Dialog, xtype = dialog.

Visar 3 flikar (nodtyp = cq:Panel).

Varje flik har två textfält (nodtyp = cq:Widget, xtype = textfield).

Definieras av noden:

/apps/extjstraining/components/dialogbasics/full

Renderas i JSON-format genom att begära:

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

Visar en flik (nodtyp = cq:Dialog, xtype = panel)

Fliken har två textfält (nodtyp = cq:Widget, xtype = textfield)

Definieras av noden:

/apps/extjstraining/components/dialogbasics/singlepanel

Renderas i json-format genom att begära:

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

En fördel framför Fullständig dialogruta är att mindre konfiguration behövs.

Rekommenderad användning: för enkla dialogrutor som visar information eller bara har ett fåtal fält.

Definieras av en nod (nodtyp = cq:Dialog, xtype = tabpanel).

Visar 3 flikar (nodtyp = cq:Panel).

Varje flik har två textfält (nodtyp = cq:Widget, xtype = textfield).

Definieras av noden:

/apps/extjstraining/components/dialogbasics/multipanel

Renderas i json-format genom att begära:

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

En fördel framför Fullständig dialogruta är att den har en förenklad struktur.

Rekommenderad användning: för dialogrutor med flera flikar.

Definieras av en nod (nodtyp = cq:Dialog, xtype = dialog).

Visar 2 flikar (nodtyp = cq:Panel).

Den första fliken har en dialogfieldset widget med en textfield och selection widget med 3 alternativ och en komprimerbar dialogfieldset med textarea widget.

Den andra fliken har en dialogfieldset widget med 4 textfield och en komprimerbar dialogfieldset med 2 textfield widgetar.

Definieras av noden:

/apps/extjstraining/components/dialogbasics/rich

Renderas i json-format genom att begära:

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

Definieras av en nod (nodtyp = cq:Dialog, xtype = dialog).

Visar 2 flikar (nodtyp = cq:Panel): Den andra fliken beror på vad du har valt på den första fliken (3 alternativ).

Har tre valfria flikar (nodtyp = cq:Panel) har vart och ett två textfält (nodtyp = cq:Widget, xtype = textfield). Endast en valfri flik i taget visas.

Definieras av switchtabs nod vid:

/apps/extjstraining/components/dynamicdialogs/switchtabs

Renderas i json-format genom att begära:

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

Dialognoden har en beforeshow" som döljer alla valfria flikar innan dialogrutan visas:

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

dialog.items.get(0) hämtar den flikpanel som innehåller markeringspanelen och de tre valfria panelerna.

The Ejst.x2 -objektet definieras i exercises.js fil på:

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

I Ejst.x2.manageTabs() metod, som värdet för index är -1 är alla valfria flikar dolda (i går från 1 till 3).

Markeringsfliken har två avlyssnare: som visar den valda fliken när dialogrutan läses in (" loadcontent" -händelse) och en som visar den valda fliken när markeringen ändras (" selectionchanged" event):

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

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

I Ejst.x2.showTab() metod:

field.findParentByType('tabpanel') hämtar flikpanelen som innehåller alla flikar ( field representerar markeringswidgeten)

field.getValue() hämtar värdet för markeringen, t.ex.: tab2

Ejst.x2.manageTabs() visar den valda fliken.

Varje valfri flik har en avlyssnare som döljer fliken på render" event:

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

I Ejst.x2.hideTab() metod:

tabPanel är den flikpanel som innehåller alla flikar

index är indexvärdet för den valfria fliken

tabPanel.hideTabStripItem(index) döljer fliken

Definieras av en nod (nodtyp = cq:Dialog, xtype = dialog).

Visar en flikpanelswidget (nodtyp = cq:Widget, xtype = tabpanel) med 1 panel (nodtyp = cq:Panel)

Panelen har en smartfile-widget (nodtyp = cq:Widget, xtype = smartfile) och en egen widget (nodtyp = cq:Widget, xtype = ownerdraw)

Definieras av arbitrary nod vid:

/apps/extjstraining/components/dynamicdialogs/arbitrary

Renderas i json-format genom att begära:

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

Widgeten för egen ritning har en loadcontent" avlyssnare som visar information om sidan som innehåller komponenten och resursen som refereras av smartfile-widgeten när innehållet läses in:

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

field anges med objektet ownerdraw

path anges med komponentens innehållssökväg (t.ex.: /content/geometrixx/en/products/triangle/ui-tutorial/jcr:content/par/dynamicdialogs)

The Ejst.x2 -objektet definieras i exercises.js fil på:

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

I Ejst.x2.showInfo() metod:

pagePath är sökvägen till sidan som innehåller komponenten

pageInfo representerar sidegenskaperna i json-format

reference är sökvägen till den refererade resursen

metadata representerar metadata för resursen i json-format

ownerdraw.getEl().update(html); visar den skapade HTML-koden i dialogrutan

Definieras av en nod (nodtyp = cq:Dialog, xtype = dialog).

Visar en flikpanelswidget (nodtyp = cq:Widget, xtype = tabpanel) med 1 panel (nodtyp = cq:Panel).

Panelen har en widget för markering/kryssruta (nodtyp = cq:Widget, xtype = selection, typ = checkbox) och en komprimerbar dialogfältuppsättningswidget (nodtyp = cq:Widget, xtype = dialogfieldset) som är dold som standard, med 2 textfältswidgetar (nodtyp = cq:Widget, xtype = textfield).

Definieras av togglefields nod vid:

/apps/extjstraining/components/dynamicdialogs/togglefields

Renderas i json-format genom att begära:

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

på markeringsfliken finns två avlyssnare: som visar dialogrutorna när innehållet läses in (" loadcontent" event) och en som visar dialogrutans fältuppsättning när markeringen ändras (" selectionchanged" event):

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

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

The Ejst.x2 -objektet definieras i exercises.js fil på:

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

I Ejst.x2.toggleFieldSet() metod:

• box är markeringsobjektet
• panel är den panel som innehåller markeringen och dialogfältuppsättningswidgetar
• fieldSet är dialogfältuppsättningsobjektet
• show är värdet för markeringen (true eller false)
• baserat på show' dialogfältuppsättningen visas eller inte

dialogrutan Flerfält ( multifield nod) visar ett fönster med en flik. Fliken har en anpassad widget för flera fält som har två fält: en nedrullningsbar meny med två alternativ och ett textfält. Baserat på färdiga multifield widgeten (som bara har ett textfält) har den alla funktioner som finns i multifield widget.

dialogrutan Trädbläddring ( treebrowse nod) visar ett fönster med en flik som innehåller en sökvägswidget: När du klickar på pilen öppnas ett fönster där du kan bläddra i en hierarki och markera ett objekt. Sökvägen för objektet läggs sedan till i sökvägsfältet och bevaras när dialogrutan stängs.

en dialogruta baserad på ett plugin-program för RTF-redigering ( rteplugin nod) som lägger till en anpassad knapp i RTF-redigeraren för att infoga anpassad text i huvudtexten. Den består av en richtext widgeten (RTE) och en anpassad funktion som läggs till via plugin-programmet för textredigering.

Definieras av en nod (nodtyp = cq:Dialog, xtype = dialog).

Visar en flikpanelswidget (nodtyp = cq:Widget, xtype = tabpanel) som innehåller en panel (nodtyp = cq:Widget, xtype = panel).

Panelen har en multifield widget (nodtyp = cq:Widget, xtype = multifield).

The multifield widgeten har en fältkonfiguration (nodtyp = nt:unstructured, xtype = ejstcustom, optionsProvider = Ejst.x3.provideOptions) som baseras på den anpassade xtype ' ejstcustom':

• ' fieldconfig' är ett config-alternativ för CQ.form.MultiField -objekt.

• ' optionsProvider' är en konfiguration av ejstcustom widget. Den är inställd med Ejst.x3.provideOptions metod som definieras i exercises.js vid:

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

  och returnerar 2 alternativ.

Definieras av multifield nod vid:

/apps/extjstraining/components/customwidgets/multifield

Renderas i json-format genom att begära:

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

Är ett javascript-objekt anropat Ejst.CustomWidget.

Är definierad i CustomWidget.js javascript-fil på:

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

Utökar CQ.form.CompositeField widget.

Har tre fält: hiddenField (textfält), allowField (ComboBox) och otherField (Textfält)

Åsidosättningar CQ.Ext.Component#initComponent så här lägger du till de tre fälten:

• allowField är en CQ.form.Selection objekt av typen 'select'. optionsProvider är en konfiguration av Selection-objektet som initieras med optionsProvider-konfigurationen för CustomWidget som definierats i dialogrutan
• otherField är en CQ.Ext.form.TextField object

Åsidosätter metoderna setValue, getValue och getRawValue av CQ.form.CompositeField för att ställa in och hämta värdet för CustomWidget med formatet:

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

Registrerar sig själv som ejstcustom' xtype:

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

Definieras av en nod (nodtyp = cq:Dialog, xtype = dialog).

Visar en flikpanelswidget (nodtyp = cq:Widget, xtype = tabpanel) som innehåller en panel (nodtyp = cq:Widget, xtype = panel).

Panelen har en anpassad widget (nodtyp = cq:Widget, xtype = ejstbrowse)

Definieras av treebrowse nod vid:

/apps/extjstraining/components/customwidgets/treebrowse

Renderas i json-format genom att begära:

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

Är ett javascript-objekt anropat Ejst.CustomWidget.

Är definierad i CustomBrowseField.js javascript-fil på:

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

Utökar CQ.Ext.form.TriggerField.

Definierar ett bläddringsfönster med namnet browseWindow.

Åsidosättningar CQ.Ext.form.TriggerField för att visa bläddringsfönstret när någon klickar på pilen.

Definierar en CQ.Ext.tree.TreePanel objekt:

• Den hämtar sina data genom att anropa den server som är registrerad på /bin/wcm/siteadmin/tree.json.
• Dess rot är " apps/extjstraining".

Definierar en window objekt (CQ.Ext.Window):

• Baserat på den fördefinierade panelen.
• Har en OK som anger värdet för den markerade banan och döljer panelen.

Fönstret är förankrat under Bana fält.

Den valda sökvägen skickas från bläddringsfältet till fönstret på show -händelse.

Registrerar sig själv som ejstbrowse' xtype:

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

Definieras av plugin-programnoden på:

/apps/extjstraining/components/customwidgets/rteplugin

Renderas i json-format genom att begära:

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

The rtePlugins noden har en underordnad nod inserttext (nodtyp = nt:unstructured) som namnges efter plugin-programmet. Den har en egenskap som heter features, som definierar vilka av plugin-programfunktionerna som är tillgängliga för RTE.

Är ett javascript-objekt anropat Ejst.InsertTextPlugin.

Är definierad i InsertTextPlugin.js javascript-fil på:

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

Utökar CQ.form.rte.plugins.Plugin -objekt.

Följande metoder definierar CQ.form.rte.plugins.Plugin -objekt och åsidosätts i implementerings-plugin-programmet:

• getFeatures() returnerar en array med alla funktioner som plugin-programmet gör tillgängliga.
• initializeUI() lägger till den nya knappen i verktygsfältet för textredigering.
• notifyPluginConfig() visar rubrik och text när knappen hovras.
• execute() anropas när någon klickar på knappen och utför plug-in-åtgärden: visas ett fönster som används för att definiera texten som ska inkluderas.

insertText() infogar en text med hjälp av motsvarande dialogobjekt Ejst.InsertTextPlugin.Dialog (se efteråt).

executeInsertText() anropas av apply() metod i dialogrutan som aktiveras när OK klickas på knappen.

Registrerar sig själv som inserttext' plugin:

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

den Ejst.InsertTextPlugin.Dialog -objektet definierar den dialogruta som öppnas när plugin-knappen klickas. Dialogrutan består av en panel, ett formulär, ett textfält och två knappar (OK och Avbryt).

Definieras vid:

/apps/extjstraining/components/treeoverview

I dialogrutan kan du ange fönstrets storlek och docka/avdocka fönstret (se informationen nedan).

Hämtar egenskaperna width, height och dockad från databasen.

Visar text om trädöversiktens dataformat.

Bäddar in fönsterlogiken i komponent-jsp mellan javascript-taggar.

Definieras vid:

apps/extjstraining/components/treeoverview/content.jsp

Definierar en tree genom att försöka hämta ett trädfönster från sidan.

Om fönstret som visar trädet inte finns, treePanel (CQ.Ext.tree.TreePanel) skapas:

• treePanel innehåller de data som används för att skapa fönstret.

• Data hämtas genom att anropa servern som är registrerad på:

  /bin/wcm/siteadmin/tree.json

The beforeload avlyssnaren kontrollerar att den klickade noden är inläst.

The root objektet anger sökvägen apps/extjstraining som trädroten.

tree (CQ.Ext.Window) anges baserat på fördefinierade treePaneloch visas med:

tree.show();

Om fönstret redan finns visas det baserat på egenskaperna width, height och dockad som hämtats från databasen.

Visar en flik med två fält som anger storleken (bredd och höjd) för trädöversiktsfönstret och ett fält som dockar/avdockar fönstret

Definieras av en nod (nodtyp = cq:Dialog, xtype = panel).

Panelen har en widget för storleksfält (nodtyp = cq:Widget, xtype = sizefield) och en markeringswidget (nodtyp = cq:Widget, xtype = selection, typ = radio) med 2 alternativ (true/false)

Definieras av dialognoden vid:

/apps/extjstraining/components/treeoverview/dialog

Renderas i json-format genom att begära:

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

Visar följande:

Definieras vid:

/apps/extjstraining/components/gridoverview

I dialogrutan kan du ange fönstrets storlek och docka/avdocka fönstret.

Hämtar egenskaperna width, height och dockad från databasen.

Visar text som introduktion till dataformatet för översiktsrutnät.

References javascript code that defines the GridPanel object:

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

defaultgrid.js

Embeds javascript code between javascript tags that defines the Window object consuming the GridPanel object.

Definieras vid:

apps/extjstraining/components/gridoverview/content.jsp

Definierar grid genom att försöka hämta fönsterkomponenten från sidan:

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

If grid finns inte, CQ.Ext.grid.GridPanel objekt ( gridPanel) definieras genom att anropa getGridPanel() metod (se nedan). Den här metoden definieras i defaultgrid.js.

grid är en CQ.Ext.Window-objekt, baserat på den fördefinierade GridPanel, och visas: grid.show();

If grid finns redan, visas den baserat på bredd, höjd och dockade egenskaper som hämtats från databasen.

myData är en array med statiska data som formaterats som en tabell med 5 kolumner och 4 rader.

store är en CQ.Ext.data.Store objekt som förbrukar myData.

store har lästs in i minnet:

store.load();

gridPanel är en CQ.Ext.grid.GridPanel objekt som förbrukar store:

• kolumnbredderna ändras alltid:

  forceFit: true

• bara en rad åt gången kan markeras:

  singleSelect:true

reader är en CQ.Ext.data.JsonReader objekt som läser serverletssvaret i json-format för 3 kolumner.

cm är en CQ.Ext.grid.ColumnModel -objekt för 3 kolumner.

Kolumncellerna i kolumnen"Testa" kan redigeras så som de definieras med en redigerare:

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

kolumnerna kan sorteras:

cm.defaultSortable = true;

store är en CQ.Ext.data.GroupingStore objekt:

• hämtar data genom att anropa den server som är registrerad på " /bin/querybuilder.json" med några parametrar som används för att filtrera frågan
• baseras på reader, definierad i förväg
• tabellen sorteras enligt 'jcr:sökväg' kolumn i stigande ordning

gridPanel är en CQ.Ext.grid.EditorGridPanel objekt som kan redigeras:

• baseras på den fördefinierade store och i kolumnmodellen cm

• bara en rad åt gången kan markeras:

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

• den afteredit avlyssnaren ser till att efter en cell i Testa kolumnen har redigerats:

  • egenskapen ' test' för noden vid sökvägen som definieras av "jcr:sökväg" -kolumnen ställs in i databasen med cellens värde
  • om POSTEN lyckas läggs värdet till i store objekt, annars avvisas det