AEM 5.5. Service Pack 3
Ask: When user clicks '+' button, the new MultiMultiField.item is inserted to the top of the list vs. the bottom.
I have tried using the reorder method:
item.reorder(item.ownerCnt.items.itemAt(0));
This takes the values from index 1, and item 1 is now last. I would like to retain original order and simply place the new empty item at the top of the list.
See attached screenshot and code:[img]10-12-2014 11-22-42 AM.png[/img]
/** * The <code>CQ.form.ReverseOrderMultiFieldMultiField</code> class represents an editable list * of form fields for editing multi value properties. * * @class CQ.form.ReverseOrderMultiFieldMultiField * @extends CQ.form.CompositeField */ CQ.form.ReverseOrderMultiFieldMultiField = CQ.Ext.extend(CQ.form.CompositeField, { /** * @cfg {Object} fieldConfig * The configuration options for the fields (optional). */ fieldConfig: null, /** * @cfg {Object} globalConfig * The configuration options for the fields, to create a new field for the form. */ globalConfig: null, /** * Creates a new <code>CQ.form.ReverseOrderMultiFieldMultiField</code>. * @constructor * @param {Object} config The config object */ constructor: function(config) { var list = this; if (!config.fieldConfig) { config.fieldConfig = {}; } if (!config.fieldConfig.xtype) { config.fieldConfig.xtype = "textfield"; } config.fieldConfig.name = config.name; this.fieldConfig = config.fieldConfig; var items = new Array(); if(config.readOnly) { //if component is defined as readOnly, apply this to all items config.fieldConfig.readOnly = true; } else { items.push({ "xtype":"button", "cls": "cq-multifield-btn", "text":"+", "handler":function() { list.addItem(); } }); } items.push({ "xtype":"hidden", "name":config.name + CQ.Sling.DELETE_SUFFIX }); config = CQ.Util.applyDefaults(config, { "defaults":{ "xtype":"reverseordermultifieldmultifielditem", "name":config.name, "fieldConfig":config.fieldConfig }, "items":[ { "xtype":"panel", "border":false, "bodyStyle":"padding:4px", "items":items } ] }); CQ.form.ReverseOrderMultiFieldMultiField.superclass.constructor.call(this,config); if (this.defaults.fieldConfig.regex) { // somehow regex get broken in this.defaults, so fix it this.defaults.fieldConfig.regex = config.fieldConfig.regex; } this.addEvents( /** * @event change * Fires when the value is changed. * @param {CQ.form.MultiFieldMultiFieldNodes} this * @param {Mixed} newValue The new value * @param {Mixed} oldValue The original value */ "change" ); this.findParentByType("panel").addListener("show", function() { var tmp = this.findByType("reverseordermultifieldmultifield"); var multifield = null; if ( tmp.length > 0 ) multifield = tmp[0]; if (multifield != null) { multifield.doLayout(); var itemsTmp = multifield.findByType("reverseordermultifieldmultifielditem"); for ( var i = 0; i < itemsTmp.length; i ++ ) { var item = itemsTmp[i]; if(item.fields) { for (var j=0; j<item.fields.length; j++) { if (item.fields[j]) { if (item.fields[j].isXType("trigger")) { if (item.fields[j].getWidth() > 15) { item.fields[j].setWidth(item.fields[j].getWidth()); } else { //arbitrary width value item.fields[j].setWidth(134); } item.fields[j].wrap.setWidth(item.fields[j].getWidth()+"px"); } } } } } } /**/ }); }, /** * Adds a new field to the widget. * @param value The value of the field */ addItem: function(value) { var index = this.items.getCount()-1; var item = this.insert(index, {"nodeIndex": index}); this.findParentByType("form").getForm().add(item); this.doLayout(); var parent = item.ownerCt; if (value) { item.setValue(value); } else {// Do Something here when multimultifield is empty // Move to index 0} }, /** * Returns the data value. * @return {String[]} value The field value */ getValue: function() { var value = new Array(); this.items.each(function(item, index/*, length*/) { if (item instanceof CQ.form.ReverseOrderMultiFieldMultiField.Item) { value[index] = item.getValue(); index++; } }, this); return value; },
