How to Create a multiefield in CQ with custom type?

Question

Please can anyone guide me to create a multiefield component with custom xtypes...

Answer 1

Hi Karthi,
Bellow you find some example code for custom multifield
* @class CQ.wcm.QuestionsBlock
* @extends CQ.form.CompositeField
* The filter rule field lets the user select "include" or "exclude" and enter a regexp
* @constructor
* Creates a new QuestionsBlock.
* @param {Object} config The config object
CQ.wcm.QuestionsBlock = CQ.Ext.extend(CQ.form.CompositeField, {
     * @private
     * @type CQ.Ext.form.TextField
    hiddenField: null,
     * @private
     * @type CQ.Ext.form.TextField
    questionsblocktitle: null,
     * @private
     * @type CQ.Ext.form.NumberField
    questionsnumber: null,
    constructor: function(config) {
        var formCfg = {"trackLabels":true,"type":"form"};
        config = config || { };
        var defaults = {
                "border": true,
                "layout":  formCfg,
                "padding": "7px",
                "stateful": false,
                "autoWidth": true,
                "align": "left"
        config = CQ.Util.applyDefaults(config, defaults);
        CQ.wcm.QuestionsBlock.superclass.constructor.call(this, config);
    // overriding CQ.Ext.Component#initComponent
    initComponent: function() {
        CQ.wcm.QuestionsBlock.superclass.initComponent.call(this);
        this.hiddenField = new CQ.Ext.form.Hidden({
            "name": this.name,
            "stateful": false
        this.add(this.hiddenField);
        this.questionsblocktitle= new CQ.Ext.form.TextField({
            "fieldLabel": "Question Block Title",
            "allowBlank":false,
            "stateful": false,
            "mode": 'local',
            "name": 'questionsblocktitle',
            "width": '230px',
            'labelStyle': 'width:120px;'
        this.add(this.questionsblocktitle);
        this.questionsnumber= new CQ.Ext.form.NumberField({
            "fieldLabel": "Question Number",
            "stateful": false,
            "allowBlank":false,
            "mode": 'local',
            "name": 'questionsnumber',
            'labelStyle': 'width:120px;',
            "width": '230px'
        this.add(this.questionsnumber);
    // overriding CQ.form.CompositeField#setValue
    setValue: function(value) {
        var vArray = value.split(";");
        this.questionsblocktitle.setValue(vArray[0]);
        this.questionsnumber.setValue(vArray[1]);
    // overriding CQ.form.CompositeField#getValue
    getValue: function() {
        return this.getRawValue();
    // overriding CQ.form.CompositeField#getRawValue
    getRawValue: function() {
        var questionsblocktitle= this.questionsblocktitle.getValue();
        var questionsnumber= this.questionsnumber.getValue();
        var value = questionsblocktitle+ ";" + questionsnumber;
        this.hiddenField.setValue(value);
        return value;
     * Loads the options of the selection if an optionsProvider is available.
     * This method is usually called solely by {@link CQ.Dialog} after its
     * content has been loaded.
     * @param {String} path content path (optional)
     * @private
    processPath: function(path) {
        var dialogPath = this.findParentByType("dialog").path;
        this.doLayout();
// register xtype
CQ.Ext.reg('questionsblock', CQ.wcm.QuestionsBlock);
Regards,
kasq