Question

我目前正在开发一个项目，我需要实现自定义多字段组件。我非常具体地说，当用户指定一个值而不是key，value属性时，我需要创建节点（可以是任何数字）。

我目前添加了一个pathField和一个文本框..它将使用HTTP GET加载，当用户尝试输入一个值时，我会从我的自定义extjs发布HTTP。

enter image description here

如上所示，我希望LHS将输入的值存储在节点而不是RHS中。我创建了以下结构的组件

由于我要进行http调用并且不会插入到jcr：content或任何其他路径我决定删除下面的节点引用“./multishort”？

enter image description here

但是当我这样做时，组件加载但不加载节点属性。任何人都可以建议我如何处理这种加载节点而不是属性？

请参阅下面的示例js文件。注意：它没有详细信息发布但我没有包含，因为我不知道它必须在哪里实例化。

/**
 * @class Ejst.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
 */
Ejst.CustomWidget = CQ.Ext.extend(CQ.form.CompositeField, {

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

    /**
     * @private
     * @type CQ.Ext.form.ComboBox
     */
    allowField: null,

    /**
     * @private
     * @type CQ.Ext.form.ComboBox
     */
    allowField2: null,

    /**
     * @private
     * @type CQ.Ext.form.TextField
     */
    otherField: null,
    /**
     * @private
     * @type CQ.Ext.form.TextField
     */
    shortField: null,
    /**
     * @private
     * @type CQ.Ext.form.TextField
     */
    mediumField: null,
    /**
     * @private
     * @type CQ.Ext.form.TextField
     */
    longField: null,

    /**
    * @private
    * @type CQ.Ext.form.TextField
    */
    linkURL: null,


    context1: null,

    price1: null,



    constructor: function(config) {

        config = config || { };
        var defaults = {
            "border": false,
            "layout": "table",
            "columns":2
        };
        config = CQ.Util.applyDefaults(config, defaults);
        Ejst.CustomWidget.superclass.constructor.call(this, config);
    },

    // overriding CQ.Ext.Component#initComponent
    initComponent: function() {
                alert("initComponent")
        Ejst.CustomWidget.superclass.initComponent.call(this);
           alert("after super initComponent")

        this.hiddenField = new CQ.Ext.form.Hidden({

            name: this.name
        });
        this.add(this.hiddenField);


        this.allowField = new CQ.form.Selection({



            type:"select",
            cls:"ejst-customwidget-1",
            listeners: {
                selectionchanged: {
                    scope:this,
                    fn: this.updateHidden
                }
            },
            optionsProvider: this.optionsProvider
            // optionsProvider:[{text:"en",value:"en"},{text:"fr",value:"fr"}]
        });
        this.add(this.allowField);


        //this is for test pathfield
        this.allowField2 = new CQ.form.PathField({

            type:"select",
            cls:"ejst-customwidget-2",
            listeners: {
                change: {
                    scope:this,
                    fn: this.updateHidden
                }
            },


            optionsProvider: this.optionsProvider
             //optionsProvider:[{text:"en",value:"en"},{text:"fr",value:"fr"}]
        });
        this.add(this.allowField2);


        this.otherField = new CQ.Ext.form.TextField({

            cls:"ejst-customwidget-3",

            listeners: {
                change: {
                    scope:this,
                    fn:this.updateHidden
                }
            }
        });
        this.add(this.otherField);

    },

    // overriding CQ.form.CompositeField#processPath
    processPath: function(path) {
        alert("processPath")
        console.log("CustomWidget#processPath", path);
        this.allowField.processPath(path);
        this.allowField2.processPath(path);
    },

    // overriding CQ.form.CompositeField#processRecord
    processRecord: function(record, path) {
        alert("processRecord")
        console.log("CustomWidget#processRecord", path, record);
        this.allowField.processRecord(record, path);
        this.allowField2.processRecord(record, path);
    },

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

        alert("value ==>> "+value)


        //alert("setValue"+parts[0]+" = "+parts[1]+" = "+parts[2]+ " = "+parts[3]+" = "+parts[4])

var currentPath = window.location.pathname+window.location.search;
            var curl = currentPath.split('.html');
            var suppressForbiddenCheck = true;
                    alert(curl[0])
            CQ.shared.HTTP.get(curl[0]+'/jcr:content/context-price.3.json', 
            function(options, success, response) {
              //  console.log(options); // Request options
                //console.log(success); // true/false
                //console.log(response); // Response obj


                if(response.body != null){
                    console.log("json data ======>> "+response.body)
                    var json = JSON.parse(response.body);

                    var key, val, context, count = 0;
                    var stringified;
                    for(key in json.context){
                      if(json.context.hasOwnProperty(key)) {
                        console.log("key - "+key+" ,value - "+json.context[key])
                         // stringified = JSON.stringify(key);
                            val = json.context[key];
                                //this.context1.set
                             // console.log("stringified -->> "+value+" == "+stringified) 
                              console.log(key + " : " + val)

                                for(context in val){
                                  if(val.hasOwnProperty(context)) {
                                      var temp = context;
                                      if(temp.indexOf("price") != -1) {
                                         // this.price1 = val[context];

                                            this.otherField.setValue(val[context]);
                                           console.log(context+"------------"+this.price1)
                                      }

                                          if(temp.indexOf("context") != -1){
                                           //  this.context1 = val[context];

                                                this.allowField2.setValue(val[context]);
                                             console.log(context+"------------"+this.context1)
                                          }

                                  }
                                }

                          //}

                        count++;
                      }
                    }
               //      console.log("logging-- "+ count)

                }

                if(success) {
                    // eval turns JSON response to JS Obj
                   // var myPage = CQ.shared.HTTP.eval(response);
                    //console.log(myPage['jcr:primaryType'])
                 //   console.log('url success ==>> '+response.body)
                }else{
                   // console.log('falied to get url')
                }
            }, this, suppressForbiddenCheck);
        var parts = value.split("/");
            //this.allowField.setValue(parts[0]);
            //this.allowField2.setValue(parts[1]);
            //this.otherField.setValue(parts[2]);
            this.allowField.setValue("fr");
            //this.allowField2.setValue(parts[0]);
            //this.otherField.setValue(parts[1]);
            this.hiddenField.setValue(value);
    },

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

    // overriding CQ.form.CompositeField#getRawValue
    getRawValue: function() {
        alert("getRawValue")


        if (!this.allowField) {
            return null;
        }

        if (!this.allowField2) {
            return null;
        }

       // return (this.context1 + "/" + this.price1);

    return (this.allowField.getValue() + "/" + 
    this.allowField2.getValue()+ "/" +this.otherField.getValue() + "/" 
    +this.price1 + "/" + this.context1);
        },

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

// register xtype
CQ.Ext.reg('testfield', Ejst.CustomWidget);

提前致谢

Answer 1

如果要删除节点引用“./multishort”，可以在其事件上添加侦听器和代码。

覆盖Adobe CQ中的多值组件

1 个答案: