Hi Sham,
I am already doing that. It just that I have posted only image initialization part. I have used following code for xtype creation.
/**
* @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
*/
var Ejst = {};
Ejst.CustomWidget = CQ.Ext.extend(CQ.form.CompositeField, {
/**
* @private
* @type CQ.Ext.form.TextField
*/
hiddenField: null,
/**
* @private
* @type CQ.html5.form.SmartImage
*/
slide: null,
/**
* @private
* @type CQ.Ext.form.TextField
*/
alt: null,
/**
* @private
* @type CQ.Ext.form.TextField
*/
preHeader: 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.slide = new CQ.html5.form.SmartImage({
title:"Image",
ddGroups: ["media"],
ddAccept: ["image/.*"],
border: true,
disableZoom: true,
allowUpload: false,
fileNameParameter:"./fileName",
fileReferenceParameter:"./fileReference",
cropParameter:"./imageCrop",
mapParameter:"./imageMap",
requestSuffix:".img.png",
rotateParameter:"./imageRotate",
uploadUrl:"/tmp/upload/*",
width: 500,
height: 300,
listeners: {
change: {
scope:this,
fn:this.updateHidden
},
afterlayout: function () {
this.updateView();
}
}
});
this.add(this.slide);
this.alt = new CQ.Ext.form.TextField({
fieldLabel: "Alt Text",
width: 500,
listeners: {
change: {
scope:this,
fn:this.updateHidden
}
}
});
this.add(this.alt);
this.preHeader = new CQ.Ext.form.TextField({
fieldLabel: "Pre Header",
width: 500,
listeners: {
change: {
scope:this,
fn:this.updateHidden
}
}
});
this.add(this.preHeader);
},
// overriding CQ.form.CompositeField#processPath
processPath: function(path) {
console.log("CustomWidget#processPath", path);
this.slide.processPath(path);
},
// overriding CQ.form.CompositeField#processRecord
processRecord: function(record, path) {
console.log("CustomWidget#processRecord", path, record);
this.slide.processRecord(record, path);
},
// overriding CQ.form.CompositeField#setValue
setValue: function(value) {
var values = JSON.parse(value);
this.slide.setValue(values.slide);
this.alt.setValue(values.alt);
this.preHeader.setValue(values.preHeader);
},
// overriding CQ.form.CompositeField#getValue
getValue: function() {
return this.getRawValue();
},
// overriding CQ.form.CompositeField#getRawValue
getRawValue: function() {
var values = {
"slide": this.slide.getValue(),
"alt": this.alt.getValue(),
"preHeader": this.preHeader.getValue(),
}
return JSON.stringify(values);
},
// private
updateHidden: function() {
this.hiddenField.setValue(this.getValue());
}
});
// register xtype
CQ.Ext.reg('heroCarousel', Ejst.CustomWidget);
