7 Replies Latest reply on Jan 7, 2013 10:23 PM by Raja_Raju_Learner

    How to Create a multiefield in CQ with custom type?

    karthi557 Level 1

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

        • 1. Re: How to Create a multiefield in CQ with custom type?
          kasq Level 3

          Hi Katrthi,

           

          You need to create a custom widget (xtype) which will extend standard CQ.form.CompositeField class.

           

          Regards,

          kasq

          • 3. Re: How to Create a multiefield in CQ with custom type?
            karthi557 Level 1

            Hi Sham,

            Thank you for your reply.we tried this code ..its creating only the component but not showing the dialog....can u plz xplain in detail...

             

            Thanks

            -------------

            Karthi Vadla

            • 4. Re: How to Create a multiefield in CQ with custom type?
              karthi557 Level 1

              Hi Kasq,

              I am very new to this topic. can you please explain how to create a custom widget and how it will extend standard CQ.form.CompositeField class.

               

              Regards

              ---------------

              Karthi

              • 5. Re: How to Create a multiefield in CQ with custom type?
                kasq Level 3

                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

                • 6. Re: How to Create a multiefield in CQ with custom type?
                  karthi557 Level 1

                  Thank you,

                  can u plz send the detailed document about this..becz  i am trying  this code but i am not getting the correct answr...am kindly xpctng the rply...its some wt little bit urgnt

                  • 7. Re: How to Create a multiefield in CQ with custom type?
                    Raja_Raju_Learner Level 1

                    Hi Karthi,

                     

                    After creating the custom xtype, in your component dialog add a field("QuestionList") with xtype as multifield.

                    Then create a childnode for "QuestionList" with primaryType = cq:Widget and xtype = "questionsblock".

                     

                    After this include your clientlib category("Questions") in your component.jsp. Here Questions is the category attribute value of the clientLibraryFolder.

                     

                       if (WCMMode.fromRequest(request) != WCMMode.DISABLED) {

                        %><cq:includeClientLib categories="Questions"/><%

                       }

                     

                    Note that it will include all your clienbtlib.

                     

                    Hope this helps.

                     

                    Reagrds,

                    Raja R