CQ，文本的自定义小部件，链接，多字段中的复选框
请看下面的图片，这是我正在尝试构建的组件。带有文本，链接和复选框的自定义小部件。
到目前为止，我可以设法让界面派对正确显示，如图所示。
但是，当我点击“确定”时它会给我一个'Uncaught TypeError: undefined is not a function'
如图中的红色下划线所示...显然它不能将任何对象数据传递到JSP层供我以后使用....
所以，基本上，它抱怨这个＆＃39; vt＆＃39;是不确定的....我没有一个clud为什么它发生... 这是我生成小部件的代码
/**
* @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);
基本上，我正在流动由adobe提供的教程 - ＆gt; http://helpx.adobe.com/experience-manager/using/dynamically-updating-aem-custom-xtype.html
任何提示都会有所帮助，谢谢
1 个答案:
答案 0 :(得分：1)
我实际上想通了......
基本上，只需覆盖validateValue: function(value)
这是整个代码示例：
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);
它100％有效......
相关问题
最新问题
- 我写了这段代码，但我无法理解我的错误
- 我无法从一个代码实例的列表中删除 None 值，但我可以在另一个实例中。为什么它适用于一个细分市场而不适用于另一个细分市场？
- 是否有可能使 loadstring 不可能等于打印？卢阿
- java中的random.expovariate()
- Appscript 通过会议在 Google 日历中发送电子邮件和创建活动
- 为什么我的 Onclick 箭头功能在 React 中不起作用？
- 在此代码中是否有使用“this”的替代方法？
- 在 SQL Server 和 PostgreSQL 上查询，我如何从第一个表获得第二个表的可视化
- 每千个数字得到
- 更新了城市边界 KML 文件的来源？