How to Load TouchUI dialog Specific Clientlibs

How to Load TouchUI dialog Specific Clientlibs 

For touch UI dialog we can load specific client libs by using extraClientlibs property to the cq:dialog node. 

see below snippet 

Using  extraClientlibs property

cq: dialog: {

jcr: primaryType: "nt:unstructured",

jcr: title: "Page",

extraClientlibs: ["category1","category2"],

mode: "edit",

sling: resourceType: "cq/gui/components/authoring/dialog"

}

Using Granite Resource

Add node to cq:dialog  with granite component reference (/libs/granite/ui/components/coral/foundation/includeclientlibs)

Use categories property to load both CSS and JS.
Use js property to load only JS
Use CSS property to load only CSS

 {

jcr: primaryType: "nt:unstructured",

categories: ["category1","category2"],

sling: resourceType: "/libs/granite/ui/components/coral/foundation/includeclientlibs"

}

ExtJS /CQ Widget API Tips

ExtJS /CQ Widget API  Tips

How to get the component node path dialog listeners like beforeshow,afterrender ....etc

beforeshow : function(compDialog){

console.log(compDialog.path);//currentNode.getPath();

}

How to do get AJAX call for no cache

var curNodeRes =  CQ.Util.eval( CQ.HTTP.noCaching(compDialog.path+".json") );  // gives json of component node/currentNode

How to get the dialog fields in listeners

1) by using name

selectionchanged : function(el,val,check){

       var dialog = el.findParentByType('dialog');//gives dialog

       var field = dialog.getField('./fieldNameGivenInDialog')

       }

2) by using id -- if item has id

selectionchanged : function(el,val,check){

       var field = CQ.Ext.getCmp('id-given-for-field');

       }