Question

我编写了一个自定义多字段，其中包含一些文本字段和一个复选框。问题是，当我选中复选框并在单击确定后关闭对话框并重新打开对话框后，复选框将失去其状态，我必须再次选择它。这是代码：

var MMCCamCar = {};

MMCCamCar.SubdomainCarouselWidget = CQ.Ext.extend(CQ.form.CompositeField, {

    /**
     * @private
     * @type CQ.Ext.form.Hidden
     */
    hiddenField : null,

    headline:null,
    subheadline:null,
    slideImage:null,
    slideAltText:null,
    slideURL:null,
    urlText:null,
    openInNewWindow: null,
    emptyField:null,


    constructor : function(config) {
        config = config || {};
        var defaults = {
            "border" : true
        };
        config = CQ.Util.applyDefaults(config, defaults);
        MMCCamCar.SubdomainCarouselWidget.superclass.constructor.call(this, config);
    },

    // overriding CQ.Ext.Component#initComponent
    initComponent : function() {
        MMCCamCar.SubdomainCarouselWidget.superclass.initComponent.call(this);

        this.hiddenField = new CQ.Ext.form.Hidden({
            name : this.name
        });
        this.add(this.hiddenField);


        this.headline = new CQ.Ext.form.TextField({
            fieldLabel : "Headline",
            labelStyle : 'display:block;width:85px;',
            maxLength : "50",
            width : 400,
            allowBlank : true,
            listeners : {
                change : {
                    scope : this,
                    fn : this.updateHidden
                }
            }
        });
        this.add(this.headline);

        this.subheadline = new CQ.Ext.form.TextField({
            fieldLabel : "Sub headline",
            labelStyle : 'display:block;width:85px;',
            maxLength : "50",
            width : 400,
            allowBlank : true,
            listeners : {
                change : {
                    scope : this,
                    fn : this.updateHidden
                }
            }
        });
        this.add(this.subheadline);

        this.slideImage = new CQ.form.PathField({
            fieldLabel : "Banner Image",
            fieldDescription : "Specify image path of Dim: 965 x 347",
            labelStyle : 'display:block;width:85px;',
            rootPath : "/content/dam/mercer/965x347",
            editable : false,
            width : 400,
            allowBlank : true,
            listeners : {
                dialogselect : {
                    scope : this,
                    fn : this.updateHidden
                },
                change : {
                    scope : this,
                    fn : this.updateHidden
                }
            }
        });
        this.add(this.slideImage);

        this.slideAltText = new CQ.Ext.form.TextField({
            fieldLabel : "Image Alt Text",
            labelStyle : 'display:block;width:92px;',
            maxLength : "40",
            width : 400,
            allowBlank : true,
            listeners : {
                change : {
                    scope : this,
                    fn : this.updateHidden
                }
            }
        });
        this.add(this.slideAltText);

        this.slideURL = new CQ.form.PathField({
            fieldLabel : "Complete URL for the Slide",
            labelStyle : 'display:block;width:85px;',
            rootPath : "/content/mercer",
            editable : true,
            width : 400,
            allowBlank : true,
            listeners : {
                dialogselect : {
                    scope : this,
                    fn : this.updateHidden
                },
                change : {
                    scope : this,
                    fn : this.updateHidden
                }
            }
        });
        this.add(this.slideURL);



        this.urlText = new CQ.Ext.form.TextField({
            fieldLabel : "Link URL text",
            labelStyle : 'display:block;width:85px;',
            maxLength : "50",
            width : 400,
            allowBlank : true,
            listeners : {
                change : {
                    scope : this,
                    fn : this.updateHidden
                }
            }
        });
        this.add(this.urlText);


        this.openInNewWindow =  new CQ.form.Selection({
            type:"checkbox",
            fieldLabel: "Check to open in New window",
             options:displayOptionsAnchorTargetSubdomainCarousel(),
            listeners: {
                selectionchanged: {
                    scope:this,
                    fn: this.updateHidden
                }
            },
            optionsProvider: this.optionsProvider
        });
        this.add(this.openInNewWindow);


        /**
         * Added a dummy Empty field to avoid ArrayIndexOutOfBound Exception in the resultant array
         * Without this hidden field, the empty values will be not be added to the multifield list
         */
        this.emptyField = new CQ.Ext.form.TextField({
            fieldLabel: "Empty Field",
            width:200,
            maxLength: "30",
            defaultValue: "empty",
            hidden:true,
            value:"empty",
        });
        this.add(this.emptyField);

    },

    // overriding CQ.form.CompositeField#setValue
    setValue : function(value) {

        var parts = value.split(/<#-@>/);
        console.log("SubdomainCarouselMultiLinksWidget#parts", parts);
        this.headline.setValue(parts[0]);
        this.subheadline.setValue(parts[1]);
        this.slideImage.setValue(parts[2]);
        this.slideAltText.setValue(parts[3]);
        this.slideURL.setValue(parts[4]);
        this.urlText.setValue(parts[5]);
        this.openInNewWindow.setValue(parts[6]);
        this.emptyField.setValue(parts[7]);


        this.hiddenField.setRawValue(value);

    },

    // overriding CQ.form.CompositeField#getValue
    getValue : function() {
        return this.getRawValue();
    },

    // overriding CQ.form.CompositeField#getRawValue
    getRawValue : function() {
        return this.headline.getValue() + "<#-@>"
                + this.subheadline.getValue() + "<#-@>"
                + this.slideImage.getValue() + "<#-@>"
                + this.slideAltText.getValue() + "<#-@>"
                + this.slideURL.getValue() + "<#-@>"
                + this.urlText.getValue() + "<#-@>"
                + this.slideURL.getValue() + "<#-@>"
                + this.openInNewWindow.getValue() + "<#-@>"
                + this.emptyField.getValue()
    },

    // private
    updateHidden : function() {
        this.hiddenField.setValue(this.getValue());
    }

});

function displayOptionsAnchorTargetSubdomainCarousel()
{
    return [{
        "text":"check to open link in new tab",
        "value":"true"

    }]
}

// register xtype
MMCCamCar.SubdomainCarouselWidget.XTYPE = "subdomainCarousel";
CQ.Ext.reg(MMCCamCar.SubdomainCarouselWidget.XTYPE, MMCCamCar.SubdomainCarouselWidget);

Answer 1

使用stateful标志来处理这种情况：

    this.openInNewWindow =  new CQ.form.Selection({
        type:"checkbox",
        fieldLabel: "Check to open in New window",
         options:displayOptionsAnchorTargetSubdomainCarousel(),
        listeners: {
            selectionchanged: {
                scope:this,
                fn: this.updateHidden
            }
        },
        optionsProvider: this.optionsProvider,
        stateful: true,
        stateid: "mycheckbox",
        stateevent: ["selectionchange"],
        getState: function() { return this.getValue(); },
        applyState: function(state) { this.setValue(state) }
    });

并将复选框添加到getRawValue和setValue。

<强>参考

CQ5 ExtJs复选框状态未维护

1 个答案: