Playing with EXTJS

Create X-type Example which consists of a text-field, path field, drop-down, check-box

1) create any cq:Widget node in dialog(eh: mmlinks)
<mmlinks jcr:primaryType="cq:Widget"  fieldDescription="Press + to add more links"  fieldLabel="Enter Values "  name="./mmlinks"  xtype="multifield">
      <fieldConfig cr:primaryType="nt:unstructured"
       optionsProvider="Ejst.provideOptions" xtype="customToolBox"/>
</mmlinks>

2) JS will be
var Ejst= {};
Ejst.CustomWidget = CQ.Ext.extend(CQ.form.CompositeField,{

    hiddenField: null,
    toolsBoxLink: null,
    toolsBoxLinktext: null,
    linkIcons: null,
    toolBoxNewTab: null,

    constructor: function(config) {
          config = config || { };
          var defaults = {"border": true,"labelWidth": 75,"layout": "form"};
          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.toolsBoxLinktext = new CQ.Ext.form.TextField({
fieldLabel: "Link Text", allowBlank: false, width: 200,
            listeners: { change: { scope:this, fn:this.updateHidden }}
        });
this.add(this.toolsBoxLinktext);

         this.toolsBoxLink = new CQ.form.PathField({
fieldLabel: "Link URL",rootPath: "/content/abc", allowBlank: false,width: 200,
            listeners: { dialogselect: { scope:this, fn:this.updateHidden }}
        });
        this.add(this.toolsBoxLink);
     
        this.linkIcons = new CQ.form.Selection({
type:"select", fieldLabel: "Icon Class", allowBlank: false, width: 200,
            options:[{text:'Calendar Icon', value:'icon-calendar'},
                          {text:'Sec Icon', value:'icon-sec'},
                          {text:'Question Icon', value:'icon-question'}],
            listeners: { selectionchanged: {scope:this, fn: this.updateHidden}}
        });
        this.add(this.linkIcons);

this.toolBoxNewTab = new CQ.Ext.form.Checkbox({
fieldLabel: "Open in New Tab ", width: 200,
            listeners: { change: { scope:this, fn:this.updateHidden}},
        });
this.add(this.toolBoxNewTab);
   },// initComponent ends here

    // overriding CQ.form.CompositeField#setValue
    setValue: function(value) {
var values = JSON.parse(value);
                   this.toolsBoxLink.setValue(values.toolsBoxLink);
this.toolsBoxLinktext.setValue(values.toolsBoxLinktext);
this.linkIcons.setValue(values.linkIcons);
this.toolBoxNewTab.setValue(values.toolBoxNewTab);
                   this.hiddenField.setValue(value);    
    },

    // overriding CQ.form.CompositeField#getValue
    getValue: function() {
                    return this.getRawValue();
    },

    // overriding CQ.form.CompositeField#getRawValue
    getRawValue: function() {    
var values = {
                            "toolsBoxLink": this.toolsBoxLink.getValue(),
"toolsBoxLinktext": this.toolsBoxLinktext.getValue(),
"linkIcons": this.linkIcons.getValue(),
"toolBoxNewTab": this.toolBoxNewTab.getValue()
}

return JSON.stringify(values);
 },

    // private
    updateHidden: function() {
        this.hiddenField.setValue(this.getValue());
    }
});

//register xtype
CQ.Ext.reg("customToolBox",Ejst.CustomWidget);

Multifield inside Multifield
Create X-type Example which consists of text field and innermulti
    innermulti contains text,path and checkbox 

create cq:widget node with xtype: multifield
below that create node fieldConfig of type nt:unstructured
add property xtype with some name (eg: xtype:headerLinkBoxfield)
Note : This will contains two xtype js files.

first will be
var Ejst = {};
Ejst.CustomWidget = CQ.Ext.extend(CQ.form.CompositeField, {

    hiddenField: null,
    sectionHeading: null,
    sectionLinks: null,

    constructor: function(config) {
        config = config || { };
        var defaults = {"border": true,"labelWidth": 75,"layout": "form"};
        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.sectionHeading = new CQ.Ext.form.TextField({
fieldLabel: "Section Heading", width: 200,
            listeners: { change: { scope:this, fn:this.updateHidden }}
        });
this.add(this.sectionHeading);

this.sectionLinks = new CQ.form.MultiField({
            fieldLabel: 'Section Links ',
            fieldConfig:{ xtype: "customLinkBox" },
            listeners: { valid: {scope:this,fn:this.updateHidden }
            }
        });
        this.add(this.sectionLinks);
    },

    // overriding CQ.form.CompositeField#setValue
    setValue: function(value) {
var values = JSON.parse(value);
this.sectionHeading.setValue(values.sectionHeading);
this.sectionLinks.setValue(values.sectionLinks);
        this.hiddenField.setValue(value);    
    },

    // overriding CQ.form.CompositeField#getValue
    getValue: function() {
        return this.getRawValue();
    },

    // overriding CQ.form.CompositeField#getRawValue
    getRawValue: function() {    
var values = {
"sectionHeading": this.sectionHeading.getValue(),
"sectionLinks": this.sectionLinks.getValue()
}
return JSON.stringify(values);
    },

    // private
    updateHidden: function() {
        this.hiddenField.setValue(this.getValue());
    }

});

// register xtype
CQ.Ext.reg('headerLinkBoxfield', Ejst.CustomWidget);

Second Will be
var Ejst = {};
Ejst.CustomWidget = CQ.Ext.extend(CQ.form.CompositeField, {

    hiddenField: null,
    linkBoxURL: null,
    linkBoxText: null,
    linkBoxNewTab: null,

    constructor: function(config) {
        config = config || { };
        var defaults = {"border": true,"labelWidth": 75,"layout": "form"};
        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.linkBoxText = new CQ.Ext.form.TextField({
fieldLabel: "Link Text", allowBlank: false, width: 200,
            listeners: { change: { scope:this, fn:this.updateHidden }}
        });
this.add(this.linkBoxText);

        this.linkBoxURL = new CQ.form.PathField({
fieldLabel: "Link URL",allowBlank: false,width: 200,
            listeners: {dialogselect: {scope:this,fn:this.updateHidden}}
        });
        this.add(this.linkBoxURL);

this.linkBoxNewTab = new CQ.Ext.form.Checkbox({
fieldLabel: "Open in New Tab ",width: 200,
            listeners: {change: {scope:this,fn:this.updateHidden}}
        });
this.add(this.linkBoxNewTab);
    },

    // overriding CQ.form.CompositeField#setValue
    setValue: function(value) {
var values = JSON.parse(value);
        this.linkBoxURL.setValue(values.linkBoxURL);
this.linkBoxText.setValue(values.linkBoxText);
this.linkBoxNewTab.setValue(values.linkBoxNewTab);
        this.hiddenField.setValue(value);    
    },

    // overriding CQ.form.CompositeField#getValue
    getValue: function() {
        return this.getRawValue();
    },

    // overriding CQ.form.CompositeField#getRawValue
    getRawValue: function() {    
var values = {
            "linkBoxURL": this.linkBoxURL.getValue(),
"linkBoxText": this.linkBoxText.getValue(),
"linkBoxNewTab": this.linkBoxNewTab.getValue()
}
return JSON.stringify(values);
    },

    // private
    updateHidden: function() {
        this.hiddenField.setValue(this.getValue());
    }
});

// register xtype
CQ.Ext.reg('customLinkBox', Ejst.CustomWidget);