When started working with CQ, one of the cool feature was the list component which allow to add new paths with the plus “+” sign. Based on my experience, it is one of the mandatory requirement to provide such flexibility, then setting a fixed number of text fields.
To achieve the same, please refer to the steps below:
Within your app project, define a folder called “clientlib”. Create a text files called “js.txt” and specify the name of the js file which holds the custom xtype definition.
Example:
#base=js
CustomPathField.js
|
Define your js file which extends CQ.form.CompositeField and specify attributes required for the custom type. Here is an example for the same:
/**
* @class MyClientLib.CustomPathFieldWidget
* @extends CQ.form.CompositeField
* This is a custom path field with link text and target
* @param {Object} config the config object
*/
/**
* @class Ejst.CustomWidget
* @extends CQ.form.CompositeField This is a custom widget based on
* {@link CQ.form.CompositeField}.
* @constructor Creates a new CustomWidget.
* @param {Object}
* config The config object
*/
MyClientLib.CustomPathFieldWidget = CQ.Ext.extend(CQ.form.CompositeField, {
/**
* @private
* @type CQ.Ext.form.TextField
*/
hiddenField: null,
/**
* @private
* @type CQ.Ext.form.TextField
*/
linkText: null,
/**
* @private
* @type CQ.Ext.form.TextField
*/
linkURL: null,
/**
* @private
* @type CQ.Ext.form.CheckBox
*/
openInNewWindow: null,
/**
* @private
* @type CQ.Ext.form.FormPanel
*/
formPanel: null,
constructor: function(config) {
config = config || {};
var defaults = {“
border”: true,
“labelWidth”: 75,
“layout”: “form”
// ”columns”:6
};
config = CQ.Util.applyDefaults(config, defaults);
MyClientLib.CustomPathFieldWidget.superclass.constructor.call(this, config);
},
// overriding CQ.Ext.Component#initComponent
initComponent: function() {
MyClientLib.CustomPathFieldWidget.superclass.initComponent.call(this);
// Hidden field
this.hiddenField = new CQ.Ext.form.Hidden({
name: this.name
});
this.add(this.hiddenField);
// Link text
this.add(new CQ.Ext.form.Label({
cls: “customwidget - label”,
text: “Link Text”
}));
this.linkText = new CQ.Ext.form.TextField({
cls: “customwidget - 1″,
fieldLabel: “Link Text: “,
maxLength: 80,
maxLengthText: “A maximum of 80 characters is allowed
for the Link Text.”,
allowBlank: true,
listeners: {
change: {
scope: this,
fn: this.updateHidden
}
}
});
this.add(this.linkText);
// Link URL
this.add(new CQ.Ext.form.Label({
cls: “customwidget - label”,
text: “Link URL”
}));
this.linkURL = new CQ.form.PathField({
cls: “customwidget - 2″,
fieldLabel: “Link URL: “,
allowBlank: false,
width: 225,
listeners: {
change: {
scope: this,
fn: this.updateHidden
},
dialogclose: {
scope: this,
fn: this.updateHidden
}
}
});
this.add(this.linkURL);
// Link openInNewWindow
this.openInNewWindow = new CQ.Ext.form.Checkbox({
cls: “customwidget - 3″,
boxLabel: “New window”,
listeners: {
change: {
scope: this,
fn: this.updateHidden
},
check: {
scope: this,
fn: this.updateHidden
}
}
});
this.add(this.openInNewWindow);
},
processInit: function(path, record) {
this.linkText.processInit(path, record);
this.linkURL.processInit(path, record);
this.openInNewWindow.processInit(path, record);
},
setValue: function(value) {
var link = JSON.parse(value);
this.linkText.setValue(link.text);
this.linkURL.setValue(link.url);
this.openInNewWindow.setValue(link.openInNewWindow);
this.hiddenField.setValue(value);
},
getValue: function() {
return this.getRawValue();
},
getRawValue: function() {
var link = {“
url”: this.linkURL.getValue(),
“text”: this.linkText.getValue(),
“openInNewWindow”: this.openInNewWindow.getValue()
};
return JSON.stringify(link);
},
updateHidden: function() {
this.hiddenField.setValue(this.getValue());
}
});
CQ.Ext.reg(‘mypathfield’, MyClientLib.CustomPathFieldWidget);
|
So, once we have defined that, its time to use in your component Here is snippet from dialog.xml from component:
<linkspanel
jcr:primaryType="cq:Panel"
border="false"
height=""
title="Links"
width="">
<items jcr:primaryType="cq:WidgetCollection">
<links
jcr:primaryType="cq:Widget"
fieldDescription="Press + to add more links"
fieldLabel="Links"
hideLabel="true"
name="./links"
width="1000"
xtype="multifield">
<fieldConfig
jcr:primaryType="cq:Widget"
xtype="mypathfield"/>
<listeners
jcr:primaryType="nt:unstructured" />
</links>
</items>
</linkspanel>
|
And this is how it appear !
Nhận xét
Đăng nhận xét