RichText within CompositeField

Question

The custom widget I created is based on the CompositeField widget and contains RichText widgets.
For testing purposes, I am simplifying this to a single RTE within each CompositeField instance.
When the dialog "OK" button is pressed, I am expecting the contents of each RTE to be stored as a
json stringified object in a multivalue String[] like this:
items  String[]
{"question":"<p>What is the question?</p>"}
{"question":"<p>What time is it?</p>"}
This works fine when using Text or TextArea, but, with the RTE, a javascript error is thrown.
Can anyone clue me in on what is wrong?
Thanks,
Rob
The specific javascript error is:
Uncaught TypeError: Cannot set property 'value' of undefined
CQ.form.RichText.CQ.Ext.extend.syncValuewidgets.js:127745
(anonymous function)widgets.js:127373
EXTUTIL.Event.firewidgets.js:4760
EXTUTIL.Observable.fireEventwidgets.js:4401
CQ.Dialog.CQ.Ext.extend.okwidgets.js:103049
handlerwidgets.js:102981
CQ.Ext.Button.CQ.Ext.extend.onClickwidgets.js:54680
hwidgets.js:11643
The specific javascript error is:
Here is my widget code:
CQ.ATestWidget = CQ.Ext.extend(CQ.form.CompositeField, {
    hiddenField: null,
    itemQuestion: null,
    formPanel: null,
    constructor: function (config) {
        config = config || {};
        var defaults = {
            "border": true,
            "autoWidth" :true,
            "layout": "form",
            "padding": 10,
            "collapsible": "true"
        config = CQ.Util.applyDefaults(config, defaults);
        CQ.ATestWidget.superclass.constructor.call(this, config);
    //overriding CQ.Ext.Component#initComponent
    initComponent: function () {
        CQ.ATestWidget.superclass.initComponent.call(this);
        // Hidden field
        this.hiddenField = new CQ.Ext.form.Hidden({
            name: this.name
        this.add(this.hiddenField);
        // Item question
        this.itemQuestion = new CQ.form.RichText({
            fieldLabel: "Question: ",
            allowBlank: false,
            ignoreData: true,
            submitValue: false,
            anchor: '100%',
            height: 75,
            addItemLabel: "Add new question",
            autoWidth :true,
            listeners: {
                change: {
                    scope: this,
                    fn: this.updateHidden
        this.add(this.itemQuestion);
    setValue: function (value) {
        var item = JSON.parse(value);
        this.itemQuestion.setValue(item.question);
        this.hiddenField.setValue(value);
    getValue: function () {
        return this.getRawValue();
    getRawValue: function () {    // read from crx
        var item = {
            "question": this.itemQuestion.getValue(),
        return JSON.stringify(item);
    updateHidden: function () {
        this.hiddenField.setValue(this.getValue());
CQ.Ext.reg('atestrte', CQ.ATestWidget);

Answer 1

KenichiM,
I'm pretty sure this is not a bug. The way I understand it (not to say I'm right, this is just how I understand it), the text needs to be selectable to be clickable (this is how it worked in the old Flash Player TextField class as well).
So, your workaround would be to use a RichEditableText control instead, and just select the Boolean editable property to false (so it is still selectable, just not editable).
<s:RichEditableText editable="false">
    <s:p><s:a href="http://www.google.com" target="_blank" color="#0066cc">Click me</s:a></s:p>
</s:RichEditableText>
Peter