CQ, custom widget for text, link, checkbox in multifield - extjs

Question

please see the image below, this is the component i am trying to build. a custom widget with text, link and checkbox.
so far, i can manage to get interface party showing up correctly, as you can see in the image.
but, soon as i click 'ok' it will throw me a 'Uncaught TypeError: undefined is not a function'
as showed in red underline in image...so obviously it wont be able to pass any object data into JSP layer for me to use later....
so, basically, it complaining about that 'vt' is undefined.... i dont have a clud why it is happening...
here is my code for generating the widget
/**
* #class MapLinks.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
*/
CQ.form.KeyValueLinkSelection = CQ.Ext.extend(CQ.form.CompositeField, {
/**
* #private
* #type CQ.Ext.form.TextField
*/
hiddenField: null,
/**
* #private
* #type CQ.Ext.form.Label
*/
textLabel: null,
/**
* #private
* #type CQ.Ext.form.TextField
*/
textField: null,
/**
* #private
* #type CQ.Ext.form.Label
*/
pathLabel: null,
/**
* #private
* #type CQ.form.PathField
*/
pathField: null,
/**
* #private
* #type CQ.Ext.form.Label
*/
checkboxLabel: null,
/**
* #private
* #type CQ.Ext.form.Checkbox
*/
checkbox: null,
constructor: function(config) {
config = config || { };
var defaults = {
"border": false,
"layout": "table",
"columns": 6
};
config = CQ.Util.applyDefaults(config, defaults);
CQ.form.KeyValueLinkSelection.superclass.constructor.call(this, config);
},
// overriding CQ.Ext.Component#initComponent
initComponent: function() {
CQ.form.KeyValueLinkSelection.superclass.initComponent.call(this);
this.hiddenField = new CQ.Ext.form.Hidden({
name: this.name
});
this.add(this.hiddenField);
this.textLabel = new CQ.Ext.form.Label({
cls:"keyvaluelinkselection-1",
text:"Text:",
style:"font-size: 12px; font-family: Arial, Verdana, sans-serif; vertical-align:text-bottom; padding-bottom:0px; padding-right:5px; padding-left:10px;"
});
this.add(this.textLabel);
this.textField = new CQ.Ext.form.TextField({
cls:"keyvaluelinkselection-2",
listeners: {
change: {
scope:this,
fn:this.updateHidden
}
}
});
this.add(this.textField);
this.pathLabel = new CQ.Ext.form.Label({
cls:"keyvaluelinkselection-3",
text:"Link:",
style:"font-size: 12px; font-family: Arial, Verdana, sans-serif; vertical-align:text-bottom; padding-bottom:0px; padding-right:5px; padding-left:15px;"
});
this.add(this.pathLabel);
this.pathField = new CQ.form.PathField({
cls:"keyvaluelinkselection-4",
width:"150",
listeners: {
change: {
scope:this,
fn:this.updateHidden
},
dialogselect: {
scope:this,
fn:this.updateHidden
}
}
});
this.add(this.pathField);
this.checkboxLabel = new CQ.Ext.form.Label({
cls:"keyvaluelinkselection-5",
text:"open in new tab:",
style:"font-size: 12px; font-family: Arial, Verdana, sans-serif; vertical-align:text-bottom; padding-bottom:0px; padding-right:5px; padding-left:20px;"
});
this.add(this.checkboxLabel);
this.checkbox = new CQ.Ext.form.Checkbox({
cls:"keyvaluelinkselection-6",
width:"30",
listeners: {
change: {
scope:this,
fn:this.updateHidden
},
dialogselect: {
scope:this,
fn:this.updateHidden
}
}
});
this.add(this.checkbox);
},
// overriding CQ.form.CompositeField#processPath
processPath: function(path) {
this.textField.processPath(path);
},
// overriding CQ.form.CompositeField#processRecord
processRecord: function(record, path) {
this.textField.processRecord(record, path);
},
// overriding CQ.form.CompositeField#setValue
setValue: function(value) {
var parts = value.split("}={");
this.textField.setValue(parts[0]);
this.pathField.setValue(parts[1]);
this.checkbox.setValue(parts[2]);
this.hiddenField.setValue(value);
},
// overriding CQ.form.CompositeField#getValue
getValue: function() {
return this.getRawValue();
},
// overriding CQ.form.CompositeField#getRawValue
getRawValue: function() {
return this.textField.getValue() + "}={" +
this.pathField.getValue() + "}={" +
this.checkbox.getValue();
},
// private
updateHidden: function() {
this.hiddenField.setValue(this.getValue());
}
});
// register xtype
CQ.Ext.reg('keyvaluelinkselection', CQ.form.KeyValueLinkSelection);
bascially, i was flowing the tutorial giving by adobe -> http://helpx.adobe.com/experience-manager/using/dynamically-updating-aem-custom-xtype.html
any hints will be helpful, thanks

Answer 1

i actually figured out myself....
basically, just override validateValue: function(value)
here is the whole code example:
CQ.form.KeyValueLinkSelection = CQ.Ext.extend(CQ.form.CompositeField, {
/**
* #private
* #type CQ.Ext.form.TextField
*/
hiddenField: null,
/**
* #private
* #type CQ.Ext.form.Label
*/
textLabel: null,
/**
* #private
* #type CQ.Ext.form.TextField
*/
textField: null,
/**
* #private
* #type CQ.Ext.form.Label
*/
pathLabel: null,
/**
* #private
* #type CQ.form.PathField
*/
pathField: null,
/**
* #private
* #type CQ.Ext.form.Label
*/
checkboxLabel: null,
/**
* #private
* #type CQ.Ext.form.Checkbox
*/
checkbox: null,
constructor: function(config) {
config = config || { };
var defaults = {
"border": false,
"layout": "table",
"columns": 6
};
config = CQ.Util.applyDefaults(config, defaults);
CQ.form.KeyValueLinkSelection.superclass.constructor.call(this, config);
},
// overriding CQ.Ext.Component#initComponent
initComponent: function() {
CQ.form.KeyValueLinkSelection.superclass.initComponent.call(this);
this.hiddenField = new CQ.Ext.form.Hidden({
name: this.name
});
this.add(this.hiddenField);
this.textLabel = new CQ.Ext.form.Label({
cls:"keyvaluelinkselection-1",
text:"Text:",
style:"font-size: 12px; font-family: Arial, Verdana, sans-serif; vertical-align:text-bottom; padding-bottom:0px; padding-right:5px; padding-left:10px;"
});
this.add(this.textLabel);
this.textField = new CQ.Ext.form.TextField({
cls:"keyvaluelinkselection-2",
allowBlank: false,
listeners: {
change: {
scope:this,
fn:this.updateHidden
}
}
});
this.add(this.textField);
this.pathLabel = new CQ.Ext.form.Label({
cls:"keyvaluelinkselection-3",
text:"Link:",
style:"font-size: 12px; font-family: Arial, Verdana, sans-serif; vertical-align:text-bottom; padding-bottom:0px; padding-right:5px; padding-left:15px;"
});
this.add(this.pathLabel);
this.pathField = new CQ.form.PathField({
cls:"keyvaluelinkselection-4",
width:"150",
allowBlank: false,
listeners: {
change: {
scope:this,
fn:this.updateHidden
},
dialogselect: {
scope:this,
fn:this.updateHidden
}
}
});
this.add(this.pathField);
this.checkboxLabel = new CQ.Ext.form.Label({
cls:"keyvaluelinkselection-5",
text:"open in new tab:",
style:"font-size: 12px; font-family: Arial, Verdana, sans-serif; vertical-align:text-bottom; padding-bottom:0px; padding-right:5px; padding-left:20px;"
});
this.add(this.checkboxLabel);
this.checkbox = new CQ.Ext.form.Checkbox({
cls:"keyvaluelinkselection-6",
width:"30",
listeners: {
change: {
scope:this,
fn:this.updateHidden
},
dialogselect: {
scope:this,
fn:this.updateHidden
}
}
});
this.add(this.checkbox);
},
validateValue: function(value) {
if(value.length < 1){ // if it's blank
if(this.allowBlank){
this.clearInvalid();
return true;
}else{
this.markInvalid(this.blankText);
return false;
}
}
if(this.vtype){
//TO DO, may need this condition checker later on
}
if(typeof this.validator == "function"){
var msg = this.validator(value);
if(msg !== true){
this.markInvalid(msg);
return false;
}
}
if(this.regex && !this.regex.test(value)){
this.markInvalid(this.regexText);
return false;
}
return true;
},
// overriding CQ.form.CompositeField#processPath
processPath: function(path) {
this.textField.processPath(path);
},
// overriding CQ.form.CompositeField#processRecord
processRecord: function(record, path) {
this.textField.processRecord(record, path);
},
// overriding CQ.form.CompositeField#setValue
setValue: function(value) {
var parts = value.split("|");
this.textField.setValue(parts[0]);
this.pathField.setValue(parts[1]);
this.checkbox.setValue(parts[2]);
this.hiddenField.setValue(value);
},
// overriding CQ.form.CompositeField#getValue
getValue: function() {
return this.getRawValue();
},
// overriding CQ.form.CompositeField#getRawValue
getRawValue: function() {
return this.textField.getValue() + "|" +
this.pathField.getValue() + "|" +
this.checkbox.getValue();
},
// private
updateHidden: function() {
this.hiddenField.setValue(this.getValue());
}
});
// register xtype
CQ.Ext.reg('keyvaluelinkselection', CQ.form.KeyValueLinkSelection);
and it 100% works....