roojs-ui.js

roojs-ui-debug.js
Roo/form/ComboBoxArray.js
roojs-debug.js

diff --git a/Roo/form/ComboBoxArray.js b/Roo/form/ComboBoxArray.js
index d6b39a8..eeef951 100644 (file)
--- a/Roo/form/ComboBoxArray.js
+++ b/Roo/form/ComboBoxArray.js
@@ -7,7 +7,7 @@
 
 /**
  * @class Roo.form.ComboBoxArray
 
 /**
  * @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.
  *
  * A facebook style adder... for lists of email / people / countries  etc...
  * pick multiple items from a combo box, and shows each one.
  *

diff --git a/roojs-debug.js b/roojs-debug.js
index ad07bc3..9a90d06 100644 (file)
--- a/roojs-debug.js
+++ b/roojs-debug.js
@@ -38474,7 +38474,22 @@ Roo.extend(Roo.form.ComboBox, Roo.form.TriggerField, {
  * pick multiple items from a combo box, and shows each one.
  *
  *  Fred [x]  Brian [x]  [Pick another |v]
  * 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
  * @constructor
  * Create a new ComboBoxArray.
  * @param {Object} config Configuration options


@@ -38485,81 +38500,112 @@ Roo.form.ComboBoxArray = function(config)
 {
     
     Roo.form.ComboBoxArray.superclass.constructor.call(this, config);
 {
     
     Roo.form.ComboBoxArray.superclass.constructor.call(this, config);

+    

     this.items = new Roo.util.MixedCollection(false);
     this.items = new Roo.util.MixedCollection(false);

-    this.on('select', function(cb, rec, ix) {
-        this.addItem(rec.data);
-        this.setValue('');
-        this.el.dom.value = '';
-        //cb.lastData = rec.data;
-        // add to list
-        
-    });
+    
+    // construct the child combo...
+    
+    
+    
+    
+   

     
 }
     
 }

+

  
  

-Roo.extend(Roo.form.ComboBoxArray, Roo.form.ComboBox,
+Roo.extend(Roo.form.ComboBoxArray, Roo.form.TextField,

 { 
 { 

+    /**
+     * @cfg {Roo.form.Combo} combo The combo box that is wrapped
+     */
+    

     lastData : false,
     lastData : false,

-    items  : 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} nameField The field to take the 'descriptive' display name from
+    /**
+     * @cfg {String} name    The name of the visable items on this form (eg. titles not ids)

      */
      */

-    nameField : 'name',
+    name : false,

     /**
     /**

-     * @cfg {String} idField The field to take the hidden 'id' data from
+     * @cfg {String} name    The hidden name of the field, often contains an comma seperated list of names

      */
      */

-    idField : 'id',
-    
-    tipField : 'email',
+    hiddenName : false,

     
     

-    renderer : false,

     
     

-    hiddenName : false, // set this if you want a , sperated list of values in it for form posting..
-    hiddenListName : false,
+    // private the array of items that are displayed..
+    items  : false,
+    // private - the hidden field el.

     hiddenEl : false,
     hiddenEl : false,

+    // private - the filed el..
+    el : false,

     
     

-    /**
-     * @cfg {Number} boxWidth The width of the box that displays the selected element
-     */
-    boxWidth : 200, // use to set the box around the entry..
-    allowBlank: true,
-    disableClear: true,

     //validateValue : function() { return true; }, // all values are ok!
     //onAddClick: function() { },
     
     onRender : function(ct, position) 
     {
     //validateValue : function() { return true; }, // all values are ok!
     //onAddClick: function() { },
     
     onRender : function(ct, position) 
     {

-         
-        Roo.form.ComboBoxArray.superclass.onRender.call(this, ct, position); 
-        this.wrap.addClass('x-cbarray-grp');
-        var cbwrap = this.wrap.createChild(
+        
+        // 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'},
             {tag: 'div', cls: 'x-cbarray-cb'},

-            this.el.dom
-        );  
-        if (this.hiddenListName) {
+            this.combo.el.dom
+        );
+        

              
              

-            this.hiddenEl = this.wrap.createChild({
-                tag: 'input',  type:'hidden' , name: this.hiddenListName, value : ''
-            });
+        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.el.dom.removeAttribute("name");

-        }

         
         

-        this.outerWrap = this.wrap;
+        
+        this.outerWrap = this.combo.wrap;

         this.wrap = cbwrap;
         this.wrap = cbwrap;

-        this.outerWrap.setWidth(this.boxWidth);
+        
+        this.outerWrap.setWidth(this.width);

         this.outerWrap.dom.removeChild(this.el.dom);
         this.outerWrap.dom.removeChild(this.el.dom);

+        

         this.wrap.dom.appendChild(this.el.dom);
         this.wrap.dom.appendChild(this.el.dom);

-        this.outerWrap.dom.removeChild(this.trigger.dom);
-        this.wrap.dom.appendChild(this.trigger.dom);
-         
-        this.trigger.setStyle('position','relative');
-        this.trigger.setStyle('left', '0px');
-        this.trigger.setStyle('top', '2px');
-        this.el.setStyle('vertical-align', 'text-bottom');
+        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.trigger.setStyle('vertical-align', 'top');

+        
+        // this should use the code from combo really... on('add' ....)

         if (this.adder) {
             
         
         if (this.adder) {
             
         


@@ -38573,26 +38619,50 @@ Roo.extend(Roo.form.ComboBoxArray, Roo.form.ComboBox,
         //var _t = this;
         //this.adder.on('click', this.onAddClick, _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){
     },
     
     
     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;
         }
         
         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;
         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){
         
         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'));
         }
             this.list.setWidth(lw);
             this.innerList.setWidth(lw - this.list.getFrameWidth('lr'));
         }


@@ -38603,7 +38673,9 @@ Roo.extend(Roo.form.ComboBoxArray, Roo.form.ComboBox,
     
     addItem: function(rec)
     {
     
     addItem: function(rec)
     {

-        if (this.items.indexOfKey(rec[this.idField]) > -1) {
+        var idField = this.combo.valueField;
+        var displayField = this.combo.displayField;
+        if (this.items.indexOfKey(rec[idField]) > -1) {

             //console.log("GOT " + rec.data.id);
             return;
         }
             //console.log("GOT " + rec.data.id);
             return;
         }


@@ -38611,12 +38683,12 @@ Roo.extend(Roo.form.ComboBoxArray, Roo.form.ComboBox,
         var x = new Roo.form.ComboBoxArray.Item({
             //id : rec[this.idField],
             data : rec,
         var x = new Roo.form.ComboBoxArray.Item({
             //id : rec[this.idField],
             data : rec,

-            nameField : this.nameField,
-            tipField : this.tipField,
+            nameField : displayField ,
+            tipField : displayField ,

             cb : this
         });
         // use the 
             cb : this
         });
         // use the 

-        this.items.add(rec[this.idField],x);
+        this.items.add(rec[idField],x);

         // add it before the element..
         this.updateHiddenEl();
         x.render(this.outerWrap, this.wrap.dom);
         // add it before the element..
         this.updateHiddenEl();
         x.render(this.outerWrap, this.wrap.dom);


@@ -38630,7 +38702,8 @@ Roo.extend(Roo.form.ComboBoxArray, Roo.form.ComboBox,
             return;
         }
         var ar = [];
             return;
         }
         var ar = [];

-        var idField = this.idField;
+        var idField = this.combo.valueField;
+        

         this.items.each(function(f) {
             ar.push(f.data[idField]);
            
         this.items.each(function(f) {
             ar.push(f.data[idField]);
            


@@ -38656,15 +38729,49 @@ Roo.extend(Roo.form.ComboBoxArray, Roo.form.ComboBox,
     },
     setValue: function(v) // not a valid action - must use addItems..
     {
     },
     setValue: function(v) // not a valid action - must use addItems..
     {

-        if (typeof(v) != 'object') {
-            return;
+         
+        
+        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) 
+            
+                
+            

         }
         }

-        var _this = this;
-        Roo.each(v, function(l) {
-            _this.addItem(l);
-        });
+        
+        
+    },
+    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());
         
     validateValue : function(value){
         return Roo.form.ComboBoxArray.superclass.validateValue.call(this, this.getValue());
         


@@ -38693,25 +38800,46 @@ Roo.form.ComboBoxArray.Item = function(config) {
 Roo.extend(Roo.form.ComboBoxArray.Item, Roo.BoxComponent, {
     data : {},
     cb: false,
 Roo.extend(Roo.form.ComboBoxArray.Item, Roo.BoxComponent, {
     data : {},
     cb: false,

-    defaultAutoCreate : {tag: 'div', cls: 'x-cbarray-item', cn : [ 
+    nameField : false,
+    tipField : false,
+    
+    
+    defaultAutoCreate : {
+        tag: 'div',
+        cls: 'x-cbarray-item',
+        cn : [ 

             { tag: 'div' },
             { 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);
         Roo.form.Field.superclass.onRender.call(this, ct, position);

+        

         if(!this.el){
             var cfg = this.getAutoCreate();
             this.el = ct.createChild(cfg, 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.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.nameField]);
+        
+            
+        this.el.child('div').dom.setAttribute('qtip',
+                        String.format('{0}',this.data[this.tipField])
+        );

         
         this.el.child('img').on('click', this.remove, this);
         
         
         this.el.child('img').on('click', this.remove, this);
         

diff --git a/roojs-ui-debug.js b/roojs-ui-debug.js
index ac2775e..5850add 100644 (file)
--- a/roojs-ui-debug.js
+++ b/roojs-ui-debug.js
@@ -23955,7 +23955,22 @@ Roo.extend(Roo.form.ComboBox, Roo.form.TriggerField, {
  * pick multiple items from a combo box, and shows each one.
  *
  *  Fred [x]  Brian [x]  [Pick another |v]
  * 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
  * @constructor
  * Create a new ComboBoxArray.
  * @param {Object} config Configuration options


@@ -23966,96 +23981,112 @@ Roo.form.ComboBoxArray = function(config)
 {
     
     Roo.form.ComboBoxArray.superclass.constructor.call(this, config);
 {
     
     Roo.form.ComboBoxArray.superclass.constructor.call(this, config);

+    

     this.items = new Roo.util.MixedCollection(false);
     this.items = new Roo.util.MixedCollection(false);

-    this.on('select', function(cb, rec, ix) {
-        this.addItem(rec.data);
-        this.setValue('');
-        this.el.dom.value = '';
-        //cb.lastData = rec.data;
-        // add to list
-        
-    });

     
     

-    if (!this.hiddenListName && this.hiddenName) {
-        this.hiddenListName = this.hiddenName + '-list';
-    }
+    // construct the child combo...
+    

     
     
     
     

+    
+   
+    

 }
 }

+

  
  

-Roo.extend(Roo.form.ComboBoxArray, Roo.form.ComboBox,
+Roo.extend(Roo.form.ComboBoxArray, Roo.form.TextField,

 { 
 { 

+    /**
+     * @cfg {Roo.form.Combo} combo The combo box that is wrapped
+     */
+    

     lastData : false,
     lastData : false,

-    items  : 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} nameField The field to take the 'descriptive' display name from
+    
+    /**
+     * @cfg {String} name    The name of the visable items on this form (eg. titles not ids)

      */
      */

-    nameField : 'name',
+    name : false,

     /**
     /**

-     * @cfg {String} idField The field to take the hidden 'id' data from
+     * @cfg {String} name    The hidden name of the field, often contains an comma seperated list of names

      */
      */

-    idField : 'id',
+    hiddenName : false,

     
     

-    tipField : 'email',

     
     

-    renderer : false,
-     
-    //hiddenName : false, // set this if you want a , sperated list of values in it for form posting..
-    /**
-     * @cfg {String} hiddenListName The field to take the array of hidden 'id' data that is selected
-     */
-    hiddenListName : false,
+    // private the array of items that are displayed..
+    items  : false,
+    // private - the hidden field el.

     hiddenEl : false,
     hiddenEl : false,

+    // private - the filed el..
+    el : false,

     
     

-    /**
-     * @cfg {Number} boxWidth The width of the box that displays the selected element
-     */
-    boxWidth : 200, // use to set the box around the entry..
-    allowBlank: true,
-    disableClear: true,

     //validateValue : function() { return true; }, // all values are ok!
     //onAddClick: function() { },
     
     onRender : function(ct, position) 
     {
     //validateValue : function() { return true; }, // all values are ok!
     //onAddClick: function() { },
     
     onRender : function(ct, position) 
     {

-        if (!this.hiddenName) {
-            Roo.log("ERROR - ComboBox used without a hidden Name..");
-            Roo.log(this);
-        }
-        this.hiddenListName = this.hiddenName;
-        //kludge the naming for the wrapped combo..
-        this.hiddenName += '-lastselected';

         
         

-        Roo.form.ComboBoxArray.superclass.onRender.call(this, ct, position); 
-        this.wrap.addClass('x-cbarray-grp');
-        var cbwrap = this.wrap.createChild(
+        // 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'},
             {tag: 'div', cls: 'x-cbarray-cb'},

-            this.el.dom
+            this.combo.el.dom

         );
         
              
         );
         
              

-        this.hiddenEl = this.wrap.createChild({
-            tag: 'input',  type:'hidden' , name: this.hiddenListName, value : ''
+        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.el.dom.removeAttribute("name");
         
         

-        this.outerWrap = this.wrap;
+        this.outerWrap = this.combo.wrap;

         this.wrap = cbwrap;
         this.wrap = cbwrap;

-        this.outerWrap.setWidth(this.boxWidth);
+        
+        this.outerWrap.setWidth(this.width);

         this.outerWrap.dom.removeChild(this.el.dom);
         this.outerWrap.dom.removeChild(this.el.dom);

+        

         this.wrap.dom.appendChild(this.el.dom);
         this.wrap.dom.appendChild(this.el.dom);

-        this.outerWrap.dom.removeChild(this.trigger.dom);
-        this.wrap.dom.appendChild(this.trigger.dom);
-         
-        this.trigger.setStyle('position','relative');
-        this.trigger.setStyle('left', '0px');
-        this.trigger.setStyle('top', '2px');
-        this.el.setStyle('vertical-align', 'text-bottom');
+        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.trigger.setStyle('vertical-align', 'top');

+        
+        // this should use the code from combo really... on('add' ....)

         if (this.adder) {
             
         
         if (this.adder) {
             
         


@@ -24069,6 +24100,18 @@ Roo.extend(Roo.form.ComboBoxArray, Roo.form.ComboBox,
         //var _t = this;
         //this.adder.on('click', this.onAddClick, _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);
+        
+        

     },
     
     
     },
     
     


@@ -24076,28 +24119,31 @@ Roo.extend(Roo.form.ComboBoxArray, Roo.form.ComboBox,
     {
         // returns hidden if it's set..
         if (!this.rendered) {return ''};
     {
         // returns hidden if it's set..
         if (!this.rendered) {return ''};

-        return  this.hiddenListName;
+        return  this.hiddenName ? this.hiddenName : this.name;

         
     },
     
     
     onResize: function(w, h){
         
     },
     
     
     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;
         }
         
         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;
         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){
         
         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'));
         }
             this.list.setWidth(lw);
             this.innerList.setWidth(lw - this.list.getFrameWidth('lr'));
         }


@@ -24108,7 +24154,9 @@ Roo.extend(Roo.form.ComboBoxArray, Roo.form.ComboBox,
     
     addItem: function(rec)
     {
     
     addItem: function(rec)
     {

-        if (this.items.indexOfKey(rec[this.idField]) > -1) {
+        var idField = this.combo.valueField;
+        var displayField = this.combo.displayField;
+        if (this.items.indexOfKey(rec[idField]) > -1) {

             //console.log("GOT " + rec.data.id);
             return;
         }
             //console.log("GOT " + rec.data.id);
             return;
         }


@@ -24116,12 +24164,12 @@ Roo.extend(Roo.form.ComboBoxArray, Roo.form.ComboBox,
         var x = new Roo.form.ComboBoxArray.Item({
             //id : rec[this.idField],
             data : rec,
         var x = new Roo.form.ComboBoxArray.Item({
             //id : rec[this.idField],
             data : rec,

-            nameField : this.nameField,
-            tipField : this.tipField,
+            nameField : displayField ,
+            tipField : displayField ,

             cb : this
         });
         // use the 
             cb : this
         });
         // use the 

-        this.items.add(rec[this.idField],x);
+        this.items.add(rec[idField],x);

         // add it before the element..
         this.updateHiddenEl();
         x.render(this.outerWrap, this.wrap.dom);
         // add it before the element..
         this.updateHiddenEl();
         x.render(this.outerWrap, this.wrap.dom);


@@ -24135,7 +24183,8 @@ Roo.extend(Roo.form.ComboBoxArray, Roo.form.ComboBox,
             return;
         }
         var ar = [];
             return;
         }
         var ar = [];

-        var idField = this.idField;
+        var idField = this.combo.valueField;
+        

         this.items.each(function(f) {
             ar.push(f.data[idField]);
            
         this.items.each(function(f) {
             ar.push(f.data[idField]);
            


@@ -24161,15 +24210,49 @@ Roo.extend(Roo.form.ComboBoxArray, Roo.form.ComboBox,
     },
     setValue: function(v) // not a valid action - must use addItems..
     {
     },
     setValue: function(v) // not a valid action - must use addItems..
     {

-        if (typeof(v) != 'object') {
-            return;
+         
+        
+        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) 
+            
+                
+            

         }
         }

-        var _this = this;
-        Roo.each(v, function(l) {
-            _this.addItem(l);
-        });
+        
+        
+    },
+    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());
         
     validateValue : function(value){
         return Roo.form.ComboBoxArray.superclass.validateValue.call(this, this.getValue());
         


@@ -24198,25 +24281,46 @@ Roo.form.ComboBoxArray.Item = function(config) {
 Roo.extend(Roo.form.ComboBoxArray.Item, Roo.BoxComponent, {
     data : {},
     cb: false,
 Roo.extend(Roo.form.ComboBoxArray.Item, Roo.BoxComponent, {
     data : {},
     cb: false,

-    defaultAutoCreate : {tag: 'div', cls: 'x-cbarray-item', cn : [ 
+    nameField : false,
+    tipField : false,
+    
+    
+    defaultAutoCreate : {
+        tag: 'div',
+        cls: 'x-cbarray-item',
+        cn : [ 

             { tag: 'div' },
             { 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);
         Roo.form.Field.superclass.onRender.call(this, ct, position);

+        

         if(!this.el){
             var cfg = this.getAutoCreate();
             this.el = ct.createChild(cfg, 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.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.nameField]);
+        
+            
+        this.el.child('div').dom.setAttribute('qtip',
+                        String.format('{0}',this.data[this.tipField])
+        );

         
         this.el.child('img').on('click', this.remove, this);
         
         
         this.el.child('img').on('click', this.remove, this);
         

diff --git a/roojs-ui.js b/roojs-ui.js
index 39d25a9..a041bde 100644 (file)
--- a/roojs-ui.js
+++ b/roojs-ui.js
@@ -538,10 +538,11 @@ this.store.each(function(v){if(C){if(C.id==v.id){C=false;}return;}if(v.get(this.
 this.view.select(A);var sn=Roo.get(this.view.getSelectedNodes()[0])
 sn.scrollIntoView(sn.dom.parentNode,false);}});
 //Roo/form/ComboBoxArray.js
 this.view.select(A);var sn=Roo.get(this.view.getSelectedNodes()[0])
 sn.scrollIntoView(sn.dom.parentNode,false);}});
 //Roo/form/ComboBoxArray.js

-Roo.form.ComboBoxArray=function(A){Roo.form.ComboBoxArray.superclass.constructor.call(this,A);this.items=new Roo.util.MixedCollection(false);this.on('select',function(cb,B,ix){this.addItem(B.data);this.setValue('');this.el.dom.value='';});if(!this.hiddenListName&&this.hiddenName){this.hiddenListName=this.hiddenName+'-list';}}
-Roo.extend(Roo.form.ComboBoxArray,Roo.form.ComboBox,{lastData:false,items:false,nameField:'name',idField:'id',tipField:'email',renderer:false,hiddenListName:false,hiddenEl:false,boxWidth:200,allowBlank:true,disableClear:true,onRender:function(ct,A){if(!this.hiddenName){Roo.log("ERROR - ComboBox used without a hidden Name..");Roo.log(this);}
-this.hiddenListName=this.hiddenName;this.hiddenName+='-lastselected';Roo.form.ComboBoxArray.superclass.onRender.call(this,ct,A);this.wrap.addClass('x-cbarray-grp');var B=this.wrap.createChild({tag:'div',cls:'x-cbarray-cb'},this.el.dom);this.hiddenEl=this.wrap.createChild({tag:'input',type:'hidden',name:this.hiddenListName,value:''});this.outerWrap=this.wrap;this.wrap=B;this.outerWrap.setWidth(this.boxWidth);this.outerWrap.dom.removeChild(this.el.dom);this.wrap.dom.appendChild(this.el.dom);this.outerWrap.dom.removeChild(this.trigger.dom);this.wrap.dom.appendChild(this.trigger.dom);this.trigger.setStyle('position','relative');this.trigger.setStyle('left','0px');this.trigger.setStyle('top','2px');this.el.setStyle('vertical-align','text-bottom');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);}},getName:function(){if(!this.rendered){return ''};return this.hiddenListName;},onResize:function(w,h){Roo.form.ComboBox.superclass.onResize.apply(this,arguments);if(typeof w!='number'){return;}var tw=this.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.trigger.setStyle('left','0px');if(this.list&&this.listWidth===undefined){var lw=Math.max(x+this.trigger.getWidth(),this.minListWidth);this.list.setWidth(lw);this.innerList.setWidth(lw-this.list.getFrameWidth('lr'));}},addItem:function(A){if(this.items.indexOfKey(A[this.idField])>-1){return;}var x=new Roo.form.ComboBoxArray.Item({data:A,nameField:this.nameField,tipField:this.tipField,cb:this});this.items.add(A[this.idField],x);this.updateHiddenEl();x.render(this.outerWrap,this.wrap.dom);},updateHiddenEl:function(){this.validate();if(!this.hiddenEl){return;}var ar=[];var A=this.idField;this.items.each(function(f){ar.push(f.data[A]);});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){if(typeof(v)!='object'){return;}var A=this;Roo.each(v,function(l){A.addItem(l);});},validateValue:function(A){return Roo.form.ComboBoxArray.superclass.validateValue.call(this,this.getValue());}});Roo.form.ComboBoxArray.Item=function(A){A.id=Roo.id();Roo.form.ComboBoxArray.Item.superclass.constructor.call(this,A);}
-Roo.extend(Roo.form.ComboBoxArray.Item,Roo.BoxComponent,{data:{},cb: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,A){Roo.form.Field.superclass.onRender.call(this,ct,A);if(!this.el){var B=this.getAutoCreate();this.el=ct.createChild(B,A);}
+Roo.form.ComboBoxArray=function(A){Roo.form.ComboBoxArray.superclass.constructor.call(this,A);this.items=new Roo.util.MixedCollection(false);}
+Roo.extend(Roo.form.ComboBoxArray,Roo.form.TextField,{lastData:false,inputType:'hidden',width:300,name:false,hiddenName:false,items:false,hiddenEl:false,el:false,onRender:function(ct,A){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,A);this.store=this.combo.store;this.valueField=this.combo.valueField;this.displayField=this.combo.displayField;this.combo.wrap.addClass('x-cbarray-grp');var B=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.outerWrap=this.combo.wrap;this.wrap=B;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');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);}
+this.combo.on('select',function(cb,C,ix){this.addItem(C.data);cb.setValue('');cb.el.dom.value='';},this);},getName:function(){if(!this.rendered){return ''};return this.hiddenName?this.hiddenName:this.name;},onResize:function(w,h){return;this.combo.onResize(w,h);if(typeof w!='number'){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(A){var B=this.combo.valueField;var C=this.combo.displayField;if(this.items.indexOfKey(A[B])>-1){return;}var x=new Roo.form.ComboBoxArray.Item({data:A,nameField:C,tipField:C,cb:this});this.items.add(A[B],x);this.updateHiddenEl();x.render(this.outerWrap,this.wrap.dom);},updateHiddenEl:function(){this.validate();if(!this.hiddenEl){return;}var ar=[];var A=this.combo.valueField;this.items.each(function(f){ar.push(f.data[A]);});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){if(this.store.isLocal){this.hiddenEl.value=v;var A=[];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){var A=v[this.valueField].split(',');var B=v[this.displayField].split(',');for(var i=0;i<A.length;i++){add={};add[this.valueField]=A[i];add[this.displayField]=B[i];this.addItem(add);}},validateValue:function(A){return Roo.form.ComboBoxArray.superclass.validateValue.call(this,this.getValue());}});Roo.form.ComboBoxArray.Item=function(A){A.id=Roo.id();Roo.form.ComboBoxArray.Item.superclass.constructor.call(this,A);}
+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,A){Roo.form.Field.superclass.onRender.call(this,ct,A);if(!this.el){var B=this.getAutoCreate();this.el=ct.createChild(B,A);}

 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();}});
 //Roo/form/Checkbox.js
 Roo.form.Checkbox=function(A){Roo.form.Checkbox.superclass.constructor.call(this,A);this.addEvents({check:true});};Roo.extend(Roo.form.Checkbox,Roo.form.Field,{focusClass:undefined,fieldClass:"x-form-field",checked:false,defaultAutoCreate:{tag:"input",type:'hidden',autocomplete:"off"},boxLabel:"",inputValue:'1',valueOff:'0',actionMode:'viewEl',itemCls:'x-menu-check-item x-form-item',groupClass:'x-menu-group-item',inputType:'hidden',inSetChecked:false,inputElement:false,basedOn:false,isFormField:true,onResize:function(){Roo.form.Checkbox.superclass.onResize.apply(this,arguments);if(!this.boxLabel){this.el.alignTo(this.wrap,'c-c');}},initEvents:function(){Roo.form.Checkbox.superclass.initEvents.call(this);this.el.on("click",this.onClick,this);this.el.on("change",this.onClick,this);},getResizeEl:function(){return this.wrap;},getPositionEl:function(){return this.wrap;},onRender:function(ct,A){Roo.form.Checkbox.superclass.onRender.call(this,ct,A);this.wrap=this.el.wrap({cls:'x-menu-check-item '});var B=this.wrap.createChild({tag:'img',cls:'x-menu-item-icon',style:'margin: 0px;',src:Roo.BLANK_IMAGE_URL});this.viewEl=B;this.wrap.on('click',this.onClick,this);this.el.on('DOMAttrModified',this.setFromHidden,this);this.el.on('propertychange',this.setFromHidden,this);if(this.boxLabel){this.wrap.createChild({tag:'label',htmlFor:this.el.id,cls:'x-form-cb-label',html:this.boxLabel});}
 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();}});
 //Roo/form/Checkbox.js
 Roo.form.Checkbox=function(A){Roo.form.Checkbox.superclass.constructor.call(this,A);this.addEvents({check:true});};Roo.extend(Roo.form.Checkbox,Roo.form.Field,{focusClass:undefined,fieldClass:"x-form-field",checked:false,defaultAutoCreate:{tag:"input",type:'hidden',autocomplete:"off"},boxLabel:"",inputValue:'1',valueOff:'0',actionMode:'viewEl',itemCls:'x-menu-check-item x-form-item',groupClass:'x-menu-group-item',inputType:'hidden',inSetChecked:false,inputElement:false,basedOn:false,isFormField:true,onResize:function(){Roo.form.Checkbox.superclass.onResize.apply(this,arguments);if(!this.boxLabel){this.el.alignTo(this.wrap,'c-c');}},initEvents:function(){Roo.form.Checkbox.superclass.initEvents.call(this);this.el.on("click",this.onClick,this);this.el.on("change",this.onClick,this);},getResizeEl:function(){return this.wrap;},getPositionEl:function(){return this.wrap;},onRender:function(ct,A){Roo.form.Checkbox.superclass.onRender.call(this,ct,A);this.wrap=this.el.wrap({cls:'x-menu-check-item '});var B=this.wrap.createChild({tag:'img',cls:'x-menu-item-icon',style:'margin: 0px;',src:Roo.BLANK_IMAGE_URL});this.viewEl=B;this.wrap.on('click',this.onClick,this);this.el.on('DOMAttrModified',this.setFromHidden,this);this.el.on('propertychange',this.setFromHidden,this);if(this.boxLabel){this.wrap.createChild({tag:'label',htmlFor:this.el.id,cls:'x-form-cb-label',html:this.boxLabel});}