X-Git-Url: http://git.roojs.org/?a=blobdiff_plain;f=Roo%2Fform%2FComboBoxArray.js;h=52ad0397d770136aa8ea505761acdcd4497dc688;hb=77be9a5476e48e25fb3a50192a2b1baa1323a98d;hp=9cfc2c24be6d3531eb3e4c392416f94d4527a49d;hpb=228de4d08c6f8756c4afd2e6d00b773c6db13f90;p=roojs1 diff --git a/Roo/form/ComboBoxArray.js b/Roo/form/ComboBoxArray.js index 9cfc2c24be..52ad0397d7 100644 --- a/Roo/form/ComboBoxArray.js +++ b/Roo/form/ComboBoxArray.js @@ -7,7 +7,7 @@ /** * @class Roo.form.ComboBoxArray - * @extends Roo.form.ComboBox + * @extends Roo.form.TextField * A facebook style adder... for lists of email / people / countries etc... * pick multiple items from a combo box, and shows each one. * @@ -49,12 +49,9 @@ Roo.form.ComboBoxArray = function(config) } - Roo.extend(Roo.form.Hidden, Roo.form.TextField, { - - -}); -Roo.extend(Roo.form.ComboBoxArray, Roo.form.TextField + +Roo.extend(Roo.form.ComboBoxArray, Roo.form.TextField, { /** * @cfg {Roo.form.Combo} combo The combo box that is wrapped @@ -76,7 +73,7 @@ Roo.extend(Roo.form.ComboBoxArray, Roo.form.TextField */ name : false, /** - * @cfg {String} name The hidden name of the field, often contains an comma seperated list of names + * @cfg {String} hiddenName The hidden name of the field, often contains an comma seperated list of names */ hiddenName : false, @@ -85,8 +82,8 @@ Roo.extend(Roo.form.ComboBoxArray, Roo.form.TextField items : false, // private - the hidden field el. hiddenEl : false, - - boxWidth : 200, // use to set the box around the entry.. + // private - the filed el.. + el : false, //validateValue : function() { return true; }, // all values are ok! //onAddClick: function() { }, @@ -94,26 +91,41 @@ Roo.extend(Roo.form.ComboBoxArray, Roo.form.TextField onRender : function(ct, position) { - // give fake names to child combo; - Roo.form.ComboBoxArray.superclass.onRender.call(this, ct, position); + // create the standard hidden element + //Roo.form.ComboBoxArray.superclass.onRender.call(this, ct, position); + + // give fake names to child combo; this.combo.hiddenName = this.hiddenName ? (this.hiddenName+'-subcombo') : this.hiddenName; this.combo.name = this.name? (this.name+'-subcombo') : this.name; this.combo = Roo.factory(this.combo, Roo.form); this.combo.onRender(ct, position); + if (typeof(this.combo.width) != 'undefined') { + this.combo.onResize(this.combo.width,0); + } + + this.combo.initEvents(); + + // assigned so form know we need to do this.. + this.store = this.combo.store; + this.valueField = this.combo.valueField; + this.displayField = this.combo.displayField ; this.combo.wrap.addClass('x-cbarray-grp'); var cbwrap = this.combo.wrap.createChild( {tag: 'div', cls: 'x-cbarray-cb'}, - this.el.dom + this.combo.el.dom ); this.hiddenEl = this.combo.wrap.createChild({ - tag: 'input', type:'hidden' , name: this.hiddenListName, value : '' + tag: 'input', type:'hidden' , name: this.hiddenName, value : '' + }); + this.el = this.combo.wrap.createChild({ + tag: 'input', type:'hidden' , name: this.name, value : '' }); // this.el.dom.removeAttribute("name"); @@ -121,12 +133,12 @@ Roo.extend(Roo.form.ComboBoxArray, Roo.form.TextField this.outerWrap = this.combo.wrap; this.wrap = cbwrap; - this.outerWrap.setWidth(this.boxWidth); + this.outerWrap.setWidth(this.width); this.outerWrap.dom.removeChild(this.el.dom); this.wrap.dom.appendChild(this.el.dom); - this.outerWrap.dom.removeChild(this.trigger.dom); - this.combo.wrap.dom.appendChild(this.trigger.dom); + this.outerWrap.dom.removeChild(this.combo.trigger.dom); + this.combo.wrap.dom.appendChild(this.combo.trigger.dom); this.combo.trigger.setStyle('position','relative'); this.combo.trigger.setStyle('left', '0px'); @@ -169,28 +181,31 @@ Roo.extend(Roo.form.ComboBoxArray, Roo.form.TextField { // returns hidden if it's set.. if (!this.rendered) {return ''}; - return this.hiddenListName; + return this.hiddenName ? this.hiddenName : this.name; }, onResize: function(w, h){ - Roo.form.ComboBox.superclass.onResize.apply(this, arguments); + + return; + // not sure if this is needed.. + //this.combo.onResize(w,h); if(typeof w != 'number'){ // we do not handle it!?!? return; } - var tw = this.trigger.getWidth(); + var tw = this.combo.trigger.getWidth(); tw += this.addicon ? this.addicon.getWidth() : 0; tw += this.editicon ? this.editicon.getWidth() : 0; var x = w - tw; - this.el.setWidth( this.adjustWidth('input', x)); + this.combo.el.setWidth( this.combo.adjustWidth('input', x)); - this.trigger.setStyle('left', '0px'); + this.combo.trigger.setStyle('left', '0px'); if(this.list && this.listWidth === undefined){ - var lw = Math.max(x + this.trigger.getWidth(), this.minListWidth); + var lw = Math.max(x + this.combo.trigger.getWidth(), this.combo.minListWidth); this.list.setWidth(lw); this.innerList.setWidth(lw - this.list.getFrameWidth('lr')); } @@ -201,7 +216,9 @@ Roo.extend(Roo.form.ComboBoxArray, Roo.form.TextField addItem: function(rec) { - if (this.items.indexOfKey(rec[this.idField]) > -1) { + var valueField = this.combo.valueField; + var displayField = this.combo.displayField; + if (this.items.indexOfKey(rec[valueField]) > -1) { //console.log("GOT " + rec.data.id); return; } @@ -209,12 +226,12 @@ Roo.extend(Roo.form.ComboBoxArray, Roo.form.TextField var x = new Roo.form.ComboBoxArray.Item({ //id : rec[this.idField], data : rec, - nameField : this.nameField, - tipField : this.tipField, + displayField : displayField , + tipField : displayField , cb : this }); // use the - this.items.add(rec[this.idField],x); + this.items.add(rec[valueField],x); // add it before the element.. this.updateHiddenEl(); x.render(this.outerWrap, this.wrap.dom); @@ -228,7 +245,8 @@ Roo.extend(Roo.form.ComboBoxArray, Roo.form.TextField return; } var ar = []; - var idField = this.idField; + var idField = this.combo.valueField; + this.items.each(function(f) { ar.push(f.data[idField]); @@ -239,10 +257,11 @@ Roo.extend(Roo.form.ComboBoxArray, Roo.form.TextField reset : function() { - Roo.form.ComboBoxArray.superclass.reset.call(this); + //Roo.form.ComboBoxArray.superclass.reset.call(this); this.items.each(function(f) { f.remove(); }); + this.el.dom.value = ''; if (this.hiddenEl) { this.hiddenEl.dom.value = ''; } @@ -254,18 +273,133 @@ Roo.extend(Roo.form.ComboBoxArray, Roo.form.TextField }, setValue: function(v) // not a valid action - must use addItems.. { - if (typeof(v) != 'object') { + + this.reset(); + + + + if (this.store.isLocal && (typeof(v) == 'string')) { + // then we can use the store to find the values.. + // comma seperated at present.. this needs to allow JSON based encoding.. + this.hiddenEl.value = v; + var v_ar = []; + Roo.each(v.split(','), function(k) { + Roo.log("CHECK " + this.valueField + ',' + k); + var li = this.store.query(this.valueField, k); + if (!li.length) { + return; + } + var add = {}; + add[this.valueField] = k; + add[this.displayField] = li.item(0).data[this.displayField]; + + this.addItem(add); + }, this) + + } + if (typeof(v) == 'object') { + // then let's assume it's an array of objects.. + Roo.each(v, function(l) { + this.addItem(l); + }, this); + + } + + + }, + setFromData: function(v) + { + // this recieves an object, if setValues is called. + this.reset(); + this.el.dom.value = v[this.displayField]; + this.hiddenEl.dom.value = v[this.valueField]; + if (typeof(v[this.valueField]) != 'string' || !v[this.valueField].length) { return; } - var _this = this; - Roo.each(v, function(l) { - _this.addItem(l); - }); + var kv = v[this.valueField]; + var dv = v[this.displayField]; + kv = typeof(kv) != 'string' ? '' : kv; + dv = typeof(dv) != 'string' ? '' : dv; + + + var keys = kv.split(','); + var display = dv.split(','); + for (var i = 0 ; i < keys.length; i++) { + + add = {}; + add[this.valueField] = keys[i]; + add[this.displayField] = display[i]; + this.addItem(add); + } + }, + + /** + * Validates the combox array value + * @return {Boolean} True if the value is valid, else false + */ + validate : function(){ + if(this.disabled || this.validateValue(this.processValue(this.getValue()))){ + this.clearInvalid(); + return true; + } + return false; + }, + validateValue : function(value){ return Roo.form.ComboBoxArray.superclass.validateValue.call(this, this.getValue()); + }, + + /** + * Mark this combo array as invalid + * @param {String} msg The validation message + */ + markInvalid : function(msg){ + if(!this.rendered || this.preventMark){ // not rendered + return; + } + this.combo.el.addClass(this.invalidClass); + msg = msg || this.invalidText; + switch(this.msgTarget){ + case 'qtip': + this.el.dom.qtip = msg; + this.el.dom.qclass = 'x-form-invalid-tip'; + if(Roo.QuickTips){ // fix for floating editors interacting with DND + Roo.QuickTips.enable(); + } + break; + case 'title': + this.el.dom.title = msg; + break; + case 'under': + if(!this.errorEl){ + var elp = this.el.findParent('.x-form-element', 5, true); + this.errorEl = elp.createChild({cls:'x-form-invalid-msg'}); + this.errorEl.setWidth(elp.getWidth(true)-20); + } + this.errorEl.update(msg); + Roo.form.Field.msgFx[this.msgFx].show(this.errorEl, this); + break; + case 'side': + if(!this.errorIcon){ + var elp = this.el.findParent('.x-form-element', 5, true); + this.errorIcon = elp.createChild({cls:'x-form-invalid-icon'}); + } + this.alignErrorIcon(); + this.errorIcon.dom.qtip = msg; + this.errorIcon.dom.qclass = 'x-form-invalid-tip'; + this.errorIcon.show(); + this.on('resize', this.alignErrorIcon, this); + break; + default: + var t = Roo.getDom(this.msgTarget); + t.innerHTML = msg; + t.style.display = this.msgDisplay; + break; + } + this.fireEvent('invalid', this, msg); } }); @@ -291,25 +425,46 @@ Roo.form.ComboBoxArray.Item = function(config) { Roo.extend(Roo.form.ComboBoxArray.Item, Roo.BoxComponent, { data : {}, cb: false, - defaultAutoCreate : {tag: 'div', cls: 'x-cbarray-item', cn : [ + displayField : false, + tipField : false, + + + defaultAutoCreate : { + tag: 'div', + cls: 'x-cbarray-item', + cn : [ { tag: 'div' }, - { tag: 'img', width:16, height : 16, src : Roo.BLANK_IMAGE_URL , align: 'center' } + { + tag: 'img', + width:16, + height : 16, + src : Roo.BLANK_IMAGE_URL , + align: 'center' + } ] }, - onRender : function(ct, position){ + onRender : function(ct, position) + { Roo.form.Field.superclass.onRender.call(this, ct, position); + if(!this.el){ var cfg = this.getAutoCreate(); this.el = ct.createChild(cfg, position); } + this.el.child('img').dom.setAttribute('src', Roo.BLANK_IMAGE_URL); this.el.child('div').dom.innerHTML = this.cb.renderer ? - this.cb.renderer(this.data) : String.format('{0}',this.data[this.nameField]); - this.el.child('div').dom.setAttribute('qtip', String.format('{0}',this.data[this.tipField])); + this.cb.renderer(this.data) : + String.format('{0}',this.data[this.displayField]); + + + this.el.child('div').dom.setAttribute('qtip', + String.format('{0}',this.data[this.tipField]) + ); this.el.child('img').on('click', this.remove, this); @@ -324,5 +479,4 @@ Roo.extend(Roo.form.ComboBoxArray.Item, Roo.BoxComponent, { this.cb.updateHiddenEl(); } - }); \ No newline at end of file