Quantcast
Channel: CQ 5
Viewing all articles
Browse latest Browse all 35

[WIDGET] Create dialog with multi tab for widget

$
0
0
Create a dialog with multi tab for widget

var linkDialogCfg = {
         
                    "ok" : okHandler,                  
                    "id" : CQ.Util.createId("cq-linkdialog"),
                    "title" : this.fieldLabel + " detail",
                    "height": 390,
                    "width" : 500,
                    "xtype" : "dialog",
                    "linkfield" : this,
                 
                    "items":{
                    "xtype": "tabpanel",
                    "items": [{
                    "xtype": "panel",
                    "title": "Data",
                    "items": [{
                    "xtype" : "pathfield",
                    "fieldLabel": "Link Icon :",
                    "name": linkIconName,
                    "value": linkIconValue,
                    "rootPath": "/content/dam",
                    "regex": /.*\.(jpg|png|svg)$/,
                    "fieldDescription": "Accept image extension .jpg|.png|.svg",
                    "listeners": {
                    "blur": function() {
                    while (/(.*)\/$/.test(this.getValue())) {
                    this.setValue(this.getValue().replace(/(.*)\/$/, "$1"));
                    }
                    }
                    }
                    },  {
                    "fieldLabel": "Disabled Link :",
                    "xtype": "checkbox",
                    "name": isDisabledName,
                    "checked": (isDisabledValue == "true")
                    }]
                    },{
                    "xtype": "panel",
                    "title": "Event Tracking",
                    "labelWidth": "50",
                    "items": [{
                    "fieldLabel": "Event Tracking :",
                    "xtype": "dialogfieldset",
                    "items": [{
                    "fieldLabel": "Event Alias :",
                    "xtype": "textfield",
                    "name": eventAliasName,
                    "value": eventAliasValue
                    },  {
                    "fieldLabel": "Custom Variable 1 :",
                    "xtype": "textfield",
                    "name": variable1Name,
                    "value": variable1Value
                    },  {
                    "fieldLabel": "Custom Variable 2 :",
                    "xtype": "textfield",
                    "name": variable2Name,
                    "value": variable2Value
                    }]
                    }]
                    }]
                    }
                };

Viewing all articles
Browse latest Browse all 35

Trending Articles