X-Git-Url: http://git.roojs.org/?a=blobdiff_plain;f=roojs-ui-debug.js;h=5850add313068a7382c7592231ddb22ee239366a;hb=57c45680bcec3818d9cbcd3f422abbe69559f6b2;hp=e47908855bc54651e8865fb1a683e78f3cfd875f;hpb=093cf2e0fd7cf458f0fd3428e86fc817eca5b6fb;p=roojs1 diff --git a/roojs-ui-debug.js b/roojs-ui-debug.js index e47908855b..5850add313 100644 --- a/roojs-ui-debug.js +++ b/roojs-ui-debug.js @@ -23941,6 +23941,401 @@ Roo.extend(Roo.form.ComboBox, Roo.form.TriggerField, { * @hide * @method autoSize */ +});/* + * Copyright(c) 2010-2012, Roo J Solutions Limited + * + * Licence LGPL + * + */ + +/** + * @class Roo.form.ComboBoxArray + * @extends Roo.form.ComboBox + * A facebook style adder... for lists of email / people / countries etc... + * pick multiple items from a combo box, and shows each one. + * + * Fred [x] Brian [x] [Pick another |v] + * + * + * For this to work: it needs various extra information + * - normal combo problay has + * name, hiddenName + * + displayField, valueField + * + * For our purpose... + * + * + * If we change from 'extends' to wrapping... + * + * + * + + + * @constructor + * Create a new ComboBoxArray. + * @param {Object} config Configuration options + */ + + +Roo.form.ComboBoxArray = function(config) +{ + + Roo.form.ComboBoxArray.superclass.constructor.call(this, config); + + this.items = new Roo.util.MixedCollection(false); + + // construct the child combo... + + + + + + +} + + +Roo.extend(Roo.form.ComboBoxArray, Roo.form.TextField, +{ + /** + * @cfg {Roo.form.Combo} combo The combo box that is wrapped + */ + + lastData : false, + + // behavies liek a hiddne field + inputType: 'hidden', + /** + * @cfg {Number} width The width of the box that displays the selected element + */ + width: 300, + + + + /** + * @cfg {String} name The name of the visable items on this form (eg. titles not ids) + */ + name : false, + /** + * @cfg {String} name The hidden name of the field, often contains an comma seperated list of names + */ + hiddenName : false, + + + // private the array of items that are displayed.. + items : false, + // private - the hidden field el. + hiddenEl : false, + // private - the filed el.. + el : false, + + //validateValue : function() { return true; }, // all values are ok! + //onAddClick: function() { }, + + onRender : function(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); + + // 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.combo.el.dom + ); + + + this.hiddenEl = this.combo.wrap.createChild({ + 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"); + + + this.outerWrap = this.combo.wrap; + this.wrap = cbwrap; + + this.outerWrap.setWidth(this.width); + this.outerWrap.dom.removeChild(this.el.dom); + + this.wrap.dom.appendChild(this.el.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'); + this.combo.trigger.setStyle('top', '2px'); + + this.combo.el.setStyle('vertical-align', 'text-bottom'); + + //this.trigger.setStyle('vertical-align', 'top'); + + // this should use the code from combo really... on('add' ....) + if (this.adder) { + + + this.adder = this.outerWrap.createChild( + {tag: 'img', src: Roo.BLANK_IMAGE_URL, cls: 'x-form-adder', style: 'margin-left:2px'}); + var _t = this; + this.adder.on('click', function(e) { + _t.fireEvent('adderclick', this, e); + }, _t); + } + //var _t = this; + //this.adder.on('click', this.onAddClick, _t); + + + this.combo.on('select', function(cb, rec, ix) { + this.addItem(rec.data); + + cb.setValue(''); + cb.el.dom.value = ''; + //cb.lastData = rec.data; + // add to list + + }, this); + + + }, + + + getName: function() + { + // returns hidden if it's set.. + if (!this.rendered) {return ''}; + return this.hiddenName ? this.hiddenName : this.name; + + }, + + + onResize: function(w, h){ + + 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.combo.trigger.getWidth(); + tw += this.addicon ? this.addicon.getWidth() : 0; + tw += this.editicon ? this.editicon.getWidth() : 0; + var x = w - tw; + this.combo.el.setWidth( this.combo.adjustWidth('input', x)); + + this.combo.trigger.setStyle('left', '0px'); + + if(this.list && this.listWidth === undefined){ + var lw = Math.max(x + this.combo.trigger.getWidth(), this.combo.minListWidth); + this.list.setWidth(lw); + this.innerList.setWidth(lw - this.list.getFrameWidth('lr')); + } + + + + }, + + addItem: function(rec) + { + var idField = this.combo.valueField; + var displayField = this.combo.displayField; + if (this.items.indexOfKey(rec[idField]) > -1) { + //console.log("GOT " + rec.data.id); + return; + } + + var x = new Roo.form.ComboBoxArray.Item({ + //id : rec[this.idField], + data : rec, + nameField : displayField , + tipField : displayField , + cb : this + }); + // use the + this.items.add(rec[idField],x); + // add it before the element.. + this.updateHiddenEl(); + x.render(this.outerWrap, this.wrap.dom); + // add the image handler.. + }, + + updateHiddenEl : function() + { + this.validate(); + if (!this.hiddenEl) { + return; + } + var ar = []; + var idField = this.combo.valueField; + + this.items.each(function(f) { + ar.push(f.data[idField]); + + }); + this.hiddenEl.dom.value = ar.join(','); + this.validate(); + }, + + reset : function() + { + Roo.form.ComboBoxArray.superclass.reset.call(this); + this.items.each(function(f) { + f.remove(); + }); + if (this.hiddenEl) { + this.hiddenEl.dom.value = ''; + } + + }, + getValue: function() + { + return this.hiddenEl ? this.hiddenEl.dom.value : ''; + }, + setValue: function(v) // not a valid action - must use addItems.. + { + + + if (this.store.isLocal) { + // 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; + } + add = {}; + add[this.valueField] = k; + add[this.displayField] = li.item(0).data[this.displayField]; + + this.addItem(add); + }, this) + + + + } + + + }, + setFromData: function(v) + { + // this recieves an object, if setValues is called. + var keys = v[this.valueField].split(','); + var display = v[this.displayField].split(','); + for (var i = 0 ; i < keys.length; i++) { + + add = {}; + add[this.valueField] = keys[i]; + add[this.displayField] = display[i]; + this.addItem(add); + } + + + }, + + + validateValue : function(value){ + return Roo.form.ComboBoxArray.superclass.validateValue.call(this, this.getValue()); + + } + +}); + + + +/** + * @class Roo.form.ComboBoxArray.Item + * @extends Roo.BoxComponent + * A selected item in the list + * Fred [x] Brian [x] [Pick another |v] + * + * @constructor + * Create a new item. + * @param {Object} config Configuration options + */ + +Roo.form.ComboBoxArray.Item = function(config) { + config.id = Roo.id(); + Roo.form.ComboBoxArray.Item.superclass.constructor.call(this, config); +} + +Roo.extend(Roo.form.ComboBoxArray.Item, Roo.BoxComponent, { + data : {}, + cb: false, + nameField : 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' + } + ] + + }, + + + 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.el.child('img').on('click', this.remove, this); + + }, + + remove : function() + { + + this.cb.items.remove(this); + this.el.child('img').un('click', this.remove, this); + this.el.remove(); + this.cb.updateHiddenEl(); + } + + });/* * Based on: * Ext JS Library 1.1.1 @@ -24398,7 +24793,7 @@ Roo.form.HtmlEditor = Roo.extend(Roo.form.Field, { //' + - ' '; + ' '; }, // private @@ -26388,6 +26783,9 @@ Roo.apply(Roo.form.HtmlEditor.ToolbarContext.prototype, { this.tb.el.show(); this.buildFooter(); this.footer.show(); + editor.on('hide', function( ) { this.footer.hide() }, this); + editor.on('show', function( ) { this.footer.show() }, this); + this.rendered = true; @@ -26473,11 +26871,11 @@ Roo.apply(Roo.form.HtmlEditor.ToolbarContext.prototype, { // update attributes if (this.tb.fields) { this.tb.fields.each(function(e) { - e.setValue(sel.getAttribute(e.name)); + e.setValue(sel.getAttribute(e.attrname)); }); } - var hasStyles + var hasStyles = false; for(var i in this.styles) { hasStyles = true; break; @@ -26597,7 +26995,8 @@ Roo.apply(Roo.form.HtmlEditor.ToolbarContext.prototype, { fields: ['val', 'selected'], data : [] }), - name : 'className', + name : '-roo-edit-className', + attrname : 'className', displayField:'val', typeAhead: false, mode: 'local', @@ -26635,7 +27034,8 @@ Roo.apply(Roo.form.HtmlEditor.ToolbarContext.prototype, { fields: ['val'], data : item.opts }), - name : i, + name : '-roo-edit-' + i, + attrname : i, displayField:'val', typeAhead: false, mode: 'local', @@ -26646,7 +27046,7 @@ Roo.apply(Roo.form.HtmlEditor.ToolbarContext.prototype, { width: item.width ? item.width : 130, listeners : { 'select': function(c, r, i) { - tb.selectedNode.setAttribute(c.name, r.get('val')); + tb.selectedNode.setAttribute(c.attrname, r.get('val')); } } @@ -26664,13 +27064,15 @@ Roo.apply(Roo.form.HtmlEditor.ToolbarContext.prototype, { continue; } tb.addField( new Roo.form.TextField({ - name: i, + name: '-roo-edit-' + i, + attrname : i, + width: item.width, //allowBlank:true, value: '', listeners: { 'change' : function(f, nv, ov) { - tb.selectedNode.setAttribute(f.name, nv); + tb.selectedNode.setAttribute(f.attrname, nv); } } })); @@ -27051,7 +27453,11 @@ clientValidation Boolean Applies to submit only. Pass true to call fo // we have a scenario where updates need confirming. // eg. if a locking scenario exists.. // we look for { errors : { needs_confirm : true }} in the response. - if (typeof(action.result.errors.needs_confirm) != 'undefined') { + if ( + (typeof(action.result) != 'undefined') && + (typeof(action.result.errors) != 'undefined') && + (typeof(action.result.errors.needs_confirm) != 'undefined') + ){ var _t = this; Roo.MessageBox.confirm( "Change requires confirmation", @@ -27076,7 +27482,7 @@ clientValidation Boolean Applies to submit only. Pass true to call fo Roo.MessageBox.alert("Error", (typeof(action.result) != 'undefined' && typeof(action.result.errorMsg) != 'undefined') ? action.result.errorMsg : - "Saving Failed, please check your entries" + "Saving Failed, please check your entries or try again" ); }