git.roojs.org Git - roojs1/blob - docs/src/Roo_form_ComboBoxArray.js.html

   1 <html><head><title>Roo/form/ComboBoxArray.js</title><link rel="stylesheet" type="text/css" href="../../css/highlight-js.css"/></head><body class="highlightpage"><code class="jsdoc-pretty"><span class="jsdoc-comment">/*
   2  * Copyright(c) 2010-2012, Roo J Solutions Limited
   3  *
   4  * Licence LGPL
   5  *
   6  */
   7
   8 /**
   9  * @class Roo.form.ComboBoxArray
  10  * @extends Roo.form.TextField
  11  * A facebook style adder... for lists of email / people / countries  etc...
  12  * pick multiple items from a combo box, and shows each one.
  13  *
  14  *  Fred [x]  Brian [x]  [Pick another |v]
  15  *
  16  *
  17  *  For this to work: it needs various extra information
  18  *    - normal combo problay has
  19  *      name, hiddenName
  20  *    + displayField, valueField
  21  *
  22  *    For our purpose...
  23  *
  24  *
  25  *   If we change from 'extends' to wrapping...
  26  *
  27  *
  28  *
  29
  30
  31  * @constructor
  32  * Create a new ComboBoxArray.
  33  * @param {Object} config Configuration options
  34  */
  35
  36
  37 </span><span class="jsdoc-var">Roo.form.ComboBoxArray </span><span class="jsdoc-syntax">= </span><span class="jsdoc-keyword">function</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">config</span><span class="jsdoc-syntax">)
  38 {
  39     </span><span class="jsdoc-var">this.addEvents</span><span class="jsdoc-syntax">({
  40         </span><span class="jsdoc-comment">/**
  41          * @event beforeremove
  42          * Fires before remove the value from the list
  43              * @param {Roo.form.ComboBoxArray} _self This combo box array
  44              * @param {Roo.form.ComboBoxArray.Item} item removed item
  45              */
  46         </span><span class="jsdoc-string">'beforeremove' </span><span class="jsdoc-syntax">: </span><span class="jsdoc-keyword">true</span><span class="jsdoc-syntax">,
  47         </span><span class="jsdoc-comment">/**
  48          * @event remove
  49          * Fires when remove the value from the list
  50              * @param {Roo.form.ComboBoxArray} _self This combo box array
  51              * @param {Roo.form.ComboBoxArray.Item} item removed item
  52              */
  53         </span><span class="jsdoc-string">'remove' </span><span class="jsdoc-syntax">: </span><span class="jsdoc-keyword">true
  54
  55
  56     </span><span class="jsdoc-syntax">});
  57
  58     </span><span class="jsdoc-var">Roo.form.ComboBoxArray.superclass.constructor.call</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">this</span><span class="jsdoc-syntax">, </span><span class="jsdoc-var">config</span><span class="jsdoc-syntax">);
  59
  60     </span><span class="jsdoc-var">this.items </span><span class="jsdoc-syntax">= </span><span class="jsdoc-keyword">new </span><span class="jsdoc-var">Roo.util.MixedCollection</span><span class="jsdoc-syntax">(</span><span class="jsdoc-keyword">false</span><span class="jsdoc-syntax">);
  61
  62     </span><span class="jsdoc-comment">// construct the child combo...
  63
  64
  65
  66
  67
  68
  69 </span><span class="jsdoc-syntax">}
  70
  71
  72 </span><span class="jsdoc-var">Roo.extend</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">Roo.form.ComboBoxArray</span><span class="jsdoc-syntax">, </span><span class="jsdoc-var">Roo.form.TextField</span><span class="jsdoc-syntax">,
  73 {
  74     </span><span class="jsdoc-comment">/**
  75      * @cfg {Roo.form.Combo} combo The combo box that is wrapped
  76      */
  77
  78     </span><span class="jsdoc-var">lastData </span><span class="jsdoc-syntax">: </span><span class="jsdoc-keyword">false</span><span class="jsdoc-syntax">,
  79
  80     </span><span class="jsdoc-comment">// behavies liek a hiddne field
  81     </span><span class="jsdoc-var">inputType</span><span class="jsdoc-syntax">:      </span><span class="jsdoc-string">'hidden'</span><span class="jsdoc-syntax">,
  82     </span><span class="jsdoc-comment">/**
  83      * @cfg {Number} width The width of the box that displays the selected element
  84      */
  85     </span><span class="jsdoc-var">width</span><span class="jsdoc-syntax">:          300,
  86
  87
  88
  89     </span><span class="jsdoc-comment">/**
  90      * @cfg {String} name    The name of the visable items on this form (eg. titles not ids)
  91      */
  92     </span><span class="jsdoc-var">name </span><span class="jsdoc-syntax">: </span><span class="jsdoc-keyword">false</span><span class="jsdoc-syntax">,
  93     </span><span class="jsdoc-comment">/**
  94      * @cfg {String} hiddenName    The hidden name of the field, often contains an comma seperated list of names
  95      */
  96     </span><span class="jsdoc-var">hiddenName </span><span class="jsdoc-syntax">: </span><span class="jsdoc-keyword">false</span><span class="jsdoc-syntax">,
  97       </span><span class="jsdoc-comment">/**
  98      * @cfg {String} seperator    The value seperator normally ','
  99      */
 100     </span><span class="jsdoc-var">seperator </span><span class="jsdoc-syntax">: </span><span class="jsdoc-string">','</span><span class="jsdoc-syntax">,
 101
 102     </span><span class="jsdoc-comment">// private the array of items that are displayed..
 103     </span><span class="jsdoc-var">items  </span><span class="jsdoc-syntax">: </span><span class="jsdoc-keyword">false</span><span class="jsdoc-syntax">,
 104     </span><span class="jsdoc-comment">// private - the hidden field el.
 105     </span><span class="jsdoc-var">hiddenEl </span><span class="jsdoc-syntax">: </span><span class="jsdoc-keyword">false</span><span class="jsdoc-syntax">,
 106     </span><span class="jsdoc-comment">// private - the filed el..
 107     </span><span class="jsdoc-var">el </span><span class="jsdoc-syntax">: </span><span class="jsdoc-keyword">false</span><span class="jsdoc-syntax">,
 108
 109     </span><span class="jsdoc-comment">//validateValue : function() { return true; }, // all values are ok!
 110     //onAddClick: function() { },
 111
 112     </span><span class="jsdoc-var">onRender </span><span class="jsdoc-syntax">: </span><span class="jsdoc-keyword">function</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">ct</span><span class="jsdoc-syntax">, </span><span class="jsdoc-var">position</span><span class="jsdoc-syntax">)
 113     {
 114
 115         </span><span class="jsdoc-comment">// create the standard hidden element
 116         //Roo.form.ComboBoxArray.superclass.onRender.call(this, ct, position);
 117
 118
 119         // give fake names to child combo;
 120         </span><span class="jsdoc-var">this.combo.hiddenName </span><span class="jsdoc-syntax">= </span><span class="jsdoc-var">this.hiddenName </span><span class="jsdoc-syntax">? (</span><span class="jsdoc-var">this.hiddenName</span><span class="jsdoc-syntax">+</span><span class="jsdoc-string">'-subcombo'</span><span class="jsdoc-syntax">) : </span><span class="jsdoc-var">this.hiddenName</span><span class="jsdoc-syntax">;
 121         </span><span class="jsdoc-var">this.combo.name </span><span class="jsdoc-syntax">= </span><span class="jsdoc-var">this.name </span><span class="jsdoc-syntax">? (</span><span class="jsdoc-var">this.name</span><span class="jsdoc-syntax">+</span><span class="jsdoc-string">'-subcombo'</span><span class="jsdoc-syntax">) : </span><span class="jsdoc-var">this.name</span><span class="jsdoc-syntax">;
 122
 123         </span><span class="jsdoc-var">this.combo </span><span class="jsdoc-syntax">= </span><span class="jsdoc-var">Roo.factory</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">this.combo</span><span class="jsdoc-syntax">, </span><span class="jsdoc-var">Roo.form</span><span class="jsdoc-syntax">);
 124         </span><span class="jsdoc-var">this.combo.onRender</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">ct</span><span class="jsdoc-syntax">, </span><span class="jsdoc-var">position</span><span class="jsdoc-syntax">);
 125         </span><span class="jsdoc-keyword">if </span><span class="jsdoc-syntax">(</span><span class="jsdoc-keyword">typeof</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">this.combo.width</span><span class="jsdoc-syntax">) != </span><span class="jsdoc-string">'undefined'</span><span class="jsdoc-syntax">) {
 126             </span><span class="jsdoc-var">this.combo.onResize</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">this.combo.width</span><span class="jsdoc-syntax">,0);
 127         }
 128
 129         </span><span class="jsdoc-var">this.combo.initEvents</span><span class="jsdoc-syntax">();
 130
 131         </span><span class="jsdoc-comment">// assigned so form know we need to do this..
 132         </span><span class="jsdoc-var">this.store          </span><span class="jsdoc-syntax">= </span><span class="jsdoc-var">this.combo.store</span><span class="jsdoc-syntax">;
 133         </span><span class="jsdoc-var">this.valueField     </span><span class="jsdoc-syntax">= </span><span class="jsdoc-var">this.combo.valueField</span><span class="jsdoc-syntax">;
 134         </span><span class="jsdoc-var">this.displayField   </span><span class="jsdoc-syntax">= </span><span class="jsdoc-var">this.combo.displayField </span><span class="jsdoc-syntax">;
 135
 136
 137         </span><span class="jsdoc-var">this.combo.wrap.addClass</span><span class="jsdoc-syntax">(</span><span class="jsdoc-string">'x-cbarray-grp'</span><span class="jsdoc-syntax">);
 138
 139         </span><span class="jsdoc-keyword">var </span><span class="jsdoc-var">cbwrap </span><span class="jsdoc-syntax">= </span><span class="jsdoc-var">this.combo.wrap.createChild</span><span class="jsdoc-syntax">(
 140             {</span><span class="jsdoc-var">tag</span><span class="jsdoc-syntax">: </span><span class="jsdoc-string">'div'</span><span class="jsdoc-syntax">, </span><span class="jsdoc-var">cls</span><span class="jsdoc-syntax">: </span><span class="jsdoc-string">'x-cbarray-cb'</span><span class="jsdoc-syntax">},
 141             </span><span class="jsdoc-var">this.combo.el.dom
 142         </span><span class="jsdoc-syntax">);
 143
 144
 145         </span><span class="jsdoc-var">this.hiddenEl </span><span class="jsdoc-syntax">= </span><span class="jsdoc-var">this.combo.wrap.createChild</span><span class="jsdoc-syntax">({
 146             </span><span class="jsdoc-var">tag</span><span class="jsdoc-syntax">: </span><span class="jsdoc-string">'input'</span><span class="jsdoc-syntax">,  </span><span class="jsdoc-var">type</span><span class="jsdoc-syntax">:</span><span class="jsdoc-string">'hidden' </span><span class="jsdoc-syntax">, </span><span class="jsdoc-var">name</span><span class="jsdoc-syntax">: </span><span class="jsdoc-var">this.hiddenName</span><span class="jsdoc-syntax">, </span><span class="jsdoc-var">value </span><span class="jsdoc-syntax">: </span><span class="jsdoc-string">''
 147         </span><span class="jsdoc-syntax">});
 148         </span><span class="jsdoc-var">this.el </span><span class="jsdoc-syntax">= </span><span class="jsdoc-var">this.combo.wrap.createChild</span><span class="jsdoc-syntax">({
 149             </span><span class="jsdoc-var">tag</span><span class="jsdoc-syntax">: </span><span class="jsdoc-string">'input'</span><span class="jsdoc-syntax">,  </span><span class="jsdoc-var">type</span><span class="jsdoc-syntax">:</span><span class="jsdoc-string">'hidden' </span><span class="jsdoc-syntax">, </span><span class="jsdoc-var">name</span><span class="jsdoc-syntax">: </span><span class="jsdoc-var">this.name</span><span class="jsdoc-syntax">, </span><span class="jsdoc-var">value </span><span class="jsdoc-syntax">: </span><span class="jsdoc-string">''
 150         </span><span class="jsdoc-syntax">});
 151          </span><span class="jsdoc-comment">//   this.el.dom.removeAttribute(&quot;name&quot;);
 152
 153
 154         </span><span class="jsdoc-var">this.outerWrap </span><span class="jsdoc-syntax">= </span><span class="jsdoc-var">this.combo.wrap</span><span class="jsdoc-syntax">;
 155         </span><span class="jsdoc-var">this.wrap </span><span class="jsdoc-syntax">= </span><span class="jsdoc-var">cbwrap</span><span class="jsdoc-syntax">;
 156
 157         </span><span class="jsdoc-var">this.outerWrap.setWidth</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">this.width</span><span class="jsdoc-syntax">);
 158         </span><span class="jsdoc-var">this.outerWrap.dom.removeChild</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">this.el.dom</span><span class="jsdoc-syntax">);
 159
 160         </span><span class="jsdoc-var">this.wrap.dom.appendChild</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">this.el.dom</span><span class="jsdoc-syntax">);
 161         </span><span class="jsdoc-var">this.outerWrap.dom.removeChild</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">this.combo.trigger.dom</span><span class="jsdoc-syntax">);
 162         </span><span class="jsdoc-var">this.combo.wrap.dom.appendChild</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">this.combo.trigger.dom</span><span class="jsdoc-syntax">);
 163
 164         </span><span class="jsdoc-var">this.combo.trigger.setStyle</span><span class="jsdoc-syntax">(</span><span class="jsdoc-string">'position'</span><span class="jsdoc-syntax">,</span><span class="jsdoc-string">'relative'</span><span class="jsdoc-syntax">);
 165         </span><span class="jsdoc-var">this.combo.trigger.setStyle</span><span class="jsdoc-syntax">(</span><span class="jsdoc-string">'left'</span><span class="jsdoc-syntax">, </span><span class="jsdoc-string">'0px'</span><span class="jsdoc-syntax">);
 166         </span><span class="jsdoc-var">this.combo.trigger.setStyle</span><span class="jsdoc-syntax">(</span><span class="jsdoc-string">'top'</span><span class="jsdoc-syntax">, </span><span class="jsdoc-string">'2px'</span><span class="jsdoc-syntax">);
 167
 168         </span><span class="jsdoc-var">this.combo.el.setStyle</span><span class="jsdoc-syntax">(</span><span class="jsdoc-string">'vertical-align'</span><span class="jsdoc-syntax">, </span><span class="jsdoc-string">'text-bottom'</span><span class="jsdoc-syntax">);
 169
 170         </span><span class="jsdoc-comment">//this.trigger.setStyle('vertical-align', 'top');
 171
 172         // this should use the code from combo really... on('add' ....)
 173         </span><span class="jsdoc-keyword">if </span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">this.adder</span><span class="jsdoc-syntax">) {
 174
 175
 176             </span><span class="jsdoc-var">this.adder </span><span class="jsdoc-syntax">= </span><span class="jsdoc-var">this.outerWrap.createChild</span><span class="jsdoc-syntax">(
 177                 {</span><span class="jsdoc-var">tag</span><span class="jsdoc-syntax">: </span><span class="jsdoc-string">'img'</span><span class="jsdoc-syntax">, </span><span class="jsdoc-var">src</span><span class="jsdoc-syntax">: </span><span class="jsdoc-var">Roo.BLANK_IMAGE_URL</span><span class="jsdoc-syntax">, </span><span class="jsdoc-var">cls</span><span class="jsdoc-syntax">: </span><span class="jsdoc-string">'x-form-adder'</span><span class="jsdoc-syntax">, </span><span class="jsdoc-var">style</span><span class="jsdoc-syntax">: </span><span class="jsdoc-string">'margin-left:2px'</span><span class="jsdoc-syntax">});
 178             </span><span class="jsdoc-keyword">var </span><span class="jsdoc-var">_t </span><span class="jsdoc-syntax">= </span><span class="jsdoc-var">this</span><span class="jsdoc-syntax">;
 179             </span><span class="jsdoc-var">this.adder.on</span><span class="jsdoc-syntax">(</span><span class="jsdoc-string">'click'</span><span class="jsdoc-syntax">, </span><span class="jsdoc-keyword">function</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">e</span><span class="jsdoc-syntax">) {
 180                 </span><span class="jsdoc-var">_t.fireEvent</span><span class="jsdoc-syntax">(</span><span class="jsdoc-string">'adderclick'</span><span class="jsdoc-syntax">, </span><span class="jsdoc-var">this</span><span class="jsdoc-syntax">, </span><span class="jsdoc-var">e</span><span class="jsdoc-syntax">);
 181             }, </span><span class="jsdoc-var">_t</span><span class="jsdoc-syntax">);
 182         }
 183         </span><span class="jsdoc-comment">//var _t = this;
 184         //this.adder.on('click', this.onAddClick, _t);
 185
 186
 187         </span><span class="jsdoc-var">this.combo.on</span><span class="jsdoc-syntax">(</span><span class="jsdoc-string">'select'</span><span class="jsdoc-syntax">, </span><span class="jsdoc-keyword">function</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">cb</span><span class="jsdoc-syntax">, </span><span class="jsdoc-var">rec</span><span class="jsdoc-syntax">, </span><span class="jsdoc-var">ix</span><span class="jsdoc-syntax">) {
 188             </span><span class="jsdoc-var">this.addItem</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">rec.data</span><span class="jsdoc-syntax">);
 189
 190             </span><span class="jsdoc-var">cb.setValue</span><span class="jsdoc-syntax">(</span><span class="jsdoc-string">''</span><span class="jsdoc-syntax">);
 191             </span><span class="jsdoc-var">cb.el.dom.value </span><span class="jsdoc-syntax">= </span><span class="jsdoc-string">''</span><span class="jsdoc-syntax">;
 192             </span><span class="jsdoc-comment">//cb.lastData = rec.data;
 193             // add to list
 194
 195         </span><span class="jsdoc-syntax">}, </span><span class="jsdoc-var">this</span><span class="jsdoc-syntax">);
 196
 197
 198     },
 199
 200
 201     </span><span class="jsdoc-var">getName</span><span class="jsdoc-syntax">: </span><span class="jsdoc-keyword">function</span><span class="jsdoc-syntax">()
 202     {
 203         </span><span class="jsdoc-comment">// returns hidden if it's set..
 204         </span><span class="jsdoc-keyword">if </span><span class="jsdoc-syntax">(!</span><span class="jsdoc-var">this.rendered</span><span class="jsdoc-syntax">) {</span><span class="jsdoc-keyword">return </span><span class="jsdoc-string">''</span><span class="jsdoc-syntax">};
 205         </span><span class="jsdoc-keyword">return  </span><span class="jsdoc-var">this.hiddenName </span><span class="jsdoc-syntax">? </span><span class="jsdoc-var">this.hiddenName </span><span class="jsdoc-syntax">: </span><span class="jsdoc-var">this.name</span><span class="jsdoc-syntax">;
 206
 207     },
 208
 209
 210     </span><span class="jsdoc-var">onResize</span><span class="jsdoc-syntax">: </span><span class="jsdoc-keyword">function</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">w</span><span class="jsdoc-syntax">, </span><span class="jsdoc-var">h</span><span class="jsdoc-syntax">){
 211
 212         </span><span class="jsdoc-keyword">return</span><span class="jsdoc-syntax">;
 213         </span><span class="jsdoc-comment">// not sure if this is needed..
 214         //this.combo.onResize(w,h);
 215
 216         </span><span class="jsdoc-keyword">if</span><span class="jsdoc-syntax">(</span><span class="jsdoc-keyword">typeof </span><span class="jsdoc-var">w </span><span class="jsdoc-syntax">!= </span><span class="jsdoc-string">'number'</span><span class="jsdoc-syntax">){
 217             </span><span class="jsdoc-comment">// we do not handle it!?!?
 218             </span><span class="jsdoc-keyword">return</span><span class="jsdoc-syntax">;
 219         }
 220         </span><span class="jsdoc-keyword">var </span><span class="jsdoc-var">tw </span><span class="jsdoc-syntax">= </span><span class="jsdoc-var">this.combo.trigger.getWidth</span><span class="jsdoc-syntax">();
 221         </span><span class="jsdoc-var">tw </span><span class="jsdoc-syntax">+= </span><span class="jsdoc-var">this.addicon </span><span class="jsdoc-syntax">? </span><span class="jsdoc-var">this.addicon.getWidth</span><span class="jsdoc-syntax">() : 0;
 222         </span><span class="jsdoc-var">tw </span><span class="jsdoc-syntax">+= </span><span class="jsdoc-var">this.editicon </span><span class="jsdoc-syntax">? </span><span class="jsdoc-var">this.editicon.getWidth</span><span class="jsdoc-syntax">() : 0;
 223         </span><span class="jsdoc-keyword">var </span><span class="jsdoc-var">x </span><span class="jsdoc-syntax">= </span><span class="jsdoc-var">w </span><span class="jsdoc-syntax">- </span><span class="jsdoc-var">tw</span><span class="jsdoc-syntax">;
 224         </span><span class="jsdoc-var">this.combo.el.setWidth</span><span class="jsdoc-syntax">( </span><span class="jsdoc-var">this.combo.adjustWidth</span><span class="jsdoc-syntax">(</span><span class="jsdoc-string">'input'</span><span class="jsdoc-syntax">, </span><span class="jsdoc-var">x</span><span class="jsdoc-syntax">));
 225
 226         </span><span class="jsdoc-var">this.combo.trigger.setStyle</span><span class="jsdoc-syntax">(</span><span class="jsdoc-string">'left'</span><span class="jsdoc-syntax">, </span><span class="jsdoc-string">'0px'</span><span class="jsdoc-syntax">);
 227
 228         </span><span class="jsdoc-keyword">if</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">this.list </span><span class="jsdoc-syntax">&amp;&amp; </span><span class="jsdoc-var">this.listWidth </span><span class="jsdoc-syntax">=== </span><span class="jsdoc-var">undefined</span><span class="jsdoc-syntax">){
 229             </span><span class="jsdoc-keyword">var </span><span class="jsdoc-var">lw </span><span class="jsdoc-syntax">= </span><span class="jsdoc-var">Math.max</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">x </span><span class="jsdoc-syntax">+ </span><span class="jsdoc-var">this.combo.trigger.getWidth</span><span class="jsdoc-syntax">(), </span><span class="jsdoc-var">this.combo.minListWidth</span><span class="jsdoc-syntax">);
 230             </span><span class="jsdoc-var">this.list.setWidth</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">lw</span><span class="jsdoc-syntax">);
 231             </span><span class="jsdoc-var">this.innerList.setWidth</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">lw </span><span class="jsdoc-syntax">- </span><span class="jsdoc-var">this.list.getFrameWidth</span><span class="jsdoc-syntax">(</span><span class="jsdoc-string">'lr'</span><span class="jsdoc-syntax">));
 232         }
 233
 234
 235
 236     },
 237
 238     </span><span class="jsdoc-var">addItem</span><span class="jsdoc-syntax">: </span><span class="jsdoc-keyword">function</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">rec</span><span class="jsdoc-syntax">)
 239     {
 240         </span><span class="jsdoc-keyword">var </span><span class="jsdoc-var">valueField </span><span class="jsdoc-syntax">= </span><span class="jsdoc-var">this.combo.valueField</span><span class="jsdoc-syntax">;
 241         </span><span class="jsdoc-keyword">var </span><span class="jsdoc-var">displayField </span><span class="jsdoc-syntax">= </span><span class="jsdoc-var">this.combo.displayField</span><span class="jsdoc-syntax">;
 242
 243         </span><span class="jsdoc-keyword">if </span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">this.items.indexOfKey</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">rec</span><span class="jsdoc-syntax">[</span><span class="jsdoc-var">valueField</span><span class="jsdoc-syntax">]) &gt; -1) {
 244             </span><span class="jsdoc-comment">//console.log(&quot;GOT &quot; + rec.data.id);
 245             </span><span class="jsdoc-keyword">return</span><span class="jsdoc-syntax">;
 246         }
 247
 248         </span><span class="jsdoc-keyword">var </span><span class="jsdoc-var">x </span><span class="jsdoc-syntax">= </span><span class="jsdoc-keyword">new </span><span class="jsdoc-var">Roo.form.ComboBoxArray.Item</span><span class="jsdoc-syntax">({
 249             </span><span class="jsdoc-comment">//id : rec[this.idField],
 250             </span><span class="jsdoc-var">data </span><span class="jsdoc-syntax">: </span><span class="jsdoc-var">rec</span><span class="jsdoc-syntax">,
 251             </span><span class="jsdoc-var">displayField </span><span class="jsdoc-syntax">: </span><span class="jsdoc-var">displayField </span><span class="jsdoc-syntax">,
 252             </span><span class="jsdoc-var">tipField </span><span class="jsdoc-syntax">: </span><span class="jsdoc-var">displayField </span><span class="jsdoc-syntax">,
 253             </span><span class="jsdoc-var">cb </span><span class="jsdoc-syntax">: </span><span class="jsdoc-var">this
 254         </span><span class="jsdoc-syntax">});
 255         </span><span class="jsdoc-comment">// use the
 256         </span><span class="jsdoc-var">this.items.add</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">rec</span><span class="jsdoc-syntax">[</span><span class="jsdoc-var">valueField</span><span class="jsdoc-syntax">],</span><span class="jsdoc-var">x</span><span class="jsdoc-syntax">);
 257         </span><span class="jsdoc-comment">// add it before the element..
 258         </span><span class="jsdoc-var">this.updateHiddenEl</span><span class="jsdoc-syntax">();
 259         </span><span class="jsdoc-var">x.render</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">this.outerWrap</span><span class="jsdoc-syntax">, </span><span class="jsdoc-var">this.wrap.dom</span><span class="jsdoc-syntax">);
 260         </span><span class="jsdoc-comment">// add the image handler..
 261     </span><span class="jsdoc-syntax">},
 262
 263     </span><span class="jsdoc-var">updateHiddenEl </span><span class="jsdoc-syntax">: </span><span class="jsdoc-keyword">function</span><span class="jsdoc-syntax">()
 264     {
 265         </span><span class="jsdoc-var">this.validate</span><span class="jsdoc-syntax">();
 266         </span><span class="jsdoc-keyword">if </span><span class="jsdoc-syntax">(!</span><span class="jsdoc-var">this.hiddenEl</span><span class="jsdoc-syntax">) {
 267             </span><span class="jsdoc-keyword">return</span><span class="jsdoc-syntax">;
 268         }
 269         </span><span class="jsdoc-keyword">var </span><span class="jsdoc-var">ar </span><span class="jsdoc-syntax">= [];
 270         </span><span class="jsdoc-keyword">var </span><span class="jsdoc-var">idField </span><span class="jsdoc-syntax">= </span><span class="jsdoc-var">this.combo.valueField</span><span class="jsdoc-syntax">;
 271
 272         </span><span class="jsdoc-var">this.items.each</span><span class="jsdoc-syntax">(</span><span class="jsdoc-keyword">function</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">f</span><span class="jsdoc-syntax">) {
 273             </span><span class="jsdoc-var">ar.push</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">f.data</span><span class="jsdoc-syntax">[</span><span class="jsdoc-var">idField</span><span class="jsdoc-syntax">]);
 274         });
 275         </span><span class="jsdoc-var">this.hiddenEl.dom.value </span><span class="jsdoc-syntax">= </span><span class="jsdoc-var">ar.join</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">this.seperator</span><span class="jsdoc-syntax">);
 276         </span><span class="jsdoc-var">this.validate</span><span class="jsdoc-syntax">();
 277     },
 278
 279     </span><span class="jsdoc-var">reset </span><span class="jsdoc-syntax">: </span><span class="jsdoc-keyword">function</span><span class="jsdoc-syntax">()
 280     {
 281         </span><span class="jsdoc-var">this.items.clear</span><span class="jsdoc-syntax">();
 282
 283         </span><span class="jsdoc-var">Roo.each</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">this.outerWrap.select</span><span class="jsdoc-syntax">(</span><span class="jsdoc-string">'.x-cbarray-item'</span><span class="jsdoc-syntax">, </span><span class="jsdoc-keyword">true</span><span class="jsdoc-syntax">)</span><span class="jsdoc-var">.elements</span><span class="jsdoc-syntax">, </span><span class="jsdoc-keyword">function</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">el</span><span class="jsdoc-syntax">){
 284            </span><span class="jsdoc-var">el.remove</span><span class="jsdoc-syntax">();
 285         });
 286
 287         </span><span class="jsdoc-var">this.el.dom.value </span><span class="jsdoc-syntax">= </span><span class="jsdoc-string">''</span><span class="jsdoc-syntax">;
 288         </span><span class="jsdoc-keyword">if </span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">this.hiddenEl</span><span class="jsdoc-syntax">) {
 289             </span><span class="jsdoc-var">this.hiddenEl.dom.value </span><span class="jsdoc-syntax">= </span><span class="jsdoc-string">''</span><span class="jsdoc-syntax">;
 290         }
 291
 292     },
 293     </span><span class="jsdoc-var">getValue</span><span class="jsdoc-syntax">: </span><span class="jsdoc-keyword">function</span><span class="jsdoc-syntax">()
 294     {
 295         </span><span class="jsdoc-keyword">return </span><span class="jsdoc-var">this.hiddenEl </span><span class="jsdoc-syntax">? </span><span class="jsdoc-var">this.hiddenEl.dom.value </span><span class="jsdoc-syntax">: </span><span class="jsdoc-string">''</span><span class="jsdoc-syntax">;
 296     },
 297     </span><span class="jsdoc-var">setValue</span><span class="jsdoc-syntax">: </span><span class="jsdoc-keyword">function</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">v</span><span class="jsdoc-syntax">) </span><span class="jsdoc-comment">// not a valid action - must use addItems..
 298     </span><span class="jsdoc-syntax">{
 299
 300         </span><span class="jsdoc-var">this.reset</span><span class="jsdoc-syntax">();
 301
 302         </span><span class="jsdoc-keyword">if </span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">this.store.isLocal </span><span class="jsdoc-syntax">&amp;&amp; (</span><span class="jsdoc-keyword">typeof</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">v</span><span class="jsdoc-syntax">) == </span><span class="jsdoc-string">'string'</span><span class="jsdoc-syntax">)) {
 303             </span><span class="jsdoc-comment">// then we can use the store to find the values..
 304             // comma seperated at present.. this needs to allow JSON based encoding..
 305             </span><span class="jsdoc-var">this.hiddenEl.value  </span><span class="jsdoc-syntax">= </span><span class="jsdoc-var">v</span><span class="jsdoc-syntax">;
 306             </span><span class="jsdoc-keyword">var </span><span class="jsdoc-var">v_ar </span><span class="jsdoc-syntax">= [];
 307             </span><span class="jsdoc-var">Roo.each</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">v.split</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">this.seperator</span><span class="jsdoc-syntax">), </span><span class="jsdoc-keyword">function</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">k</span><span class="jsdoc-syntax">) {
 308                 </span><span class="jsdoc-var">Roo.log</span><span class="jsdoc-syntax">(</span><span class="jsdoc-string">&quot;CHECK &quot; </span><span class="jsdoc-syntax">+ </span><span class="jsdoc-var">this.valueField </span><span class="jsdoc-syntax">+ </span><span class="jsdoc-string">',' </span><span class="jsdoc-syntax">+ </span><span class="jsdoc-var">k</span><span class="jsdoc-syntax">);
 309                 </span><span class="jsdoc-keyword">var </span><span class="jsdoc-var">li </span><span class="jsdoc-syntax">= </span><span class="jsdoc-var">this.store.query</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">this.valueField</span><span class="jsdoc-syntax">, </span><span class="jsdoc-var">k</span><span class="jsdoc-syntax">);
 310                 </span><span class="jsdoc-keyword">if </span><span class="jsdoc-syntax">(!</span><span class="jsdoc-var">li.length</span><span class="jsdoc-syntax">) {
 311                     </span><span class="jsdoc-keyword">return</span><span class="jsdoc-syntax">;
 312                 }
 313                 </span><span class="jsdoc-keyword">var </span><span class="jsdoc-var">add </span><span class="jsdoc-syntax">= {};
 314                 </span><span class="jsdoc-var">add</span><span class="jsdoc-syntax">[</span><span class="jsdoc-var">this.valueField</span><span class="jsdoc-syntax">] = </span><span class="jsdoc-var">k</span><span class="jsdoc-syntax">;
 315                 </span><span class="jsdoc-var">add</span><span class="jsdoc-syntax">[</span><span class="jsdoc-var">this.displayField</span><span class="jsdoc-syntax">] = </span><span class="jsdoc-var">li.item</span><span class="jsdoc-syntax">(0)</span><span class="jsdoc-var">.data</span><span class="jsdoc-syntax">[</span><span class="jsdoc-var">this.displayField</span><span class="jsdoc-syntax">];
 316
 317                 </span><span class="jsdoc-var">this.addItem</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">add</span><span class="jsdoc-syntax">);
 318             }, </span><span class="jsdoc-var">this</span><span class="jsdoc-syntax">)
 319
 320         }
 321         </span><span class="jsdoc-keyword">if </span><span class="jsdoc-syntax">(</span><span class="jsdoc-keyword">typeof</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">v</span><span class="jsdoc-syntax">) == </span><span class="jsdoc-string">'object' </span><span class="jsdoc-syntax">) {
 322             </span><span class="jsdoc-comment">// then let's assume it's an array of objects..
 323             </span><span class="jsdoc-var">Roo.each</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">v</span><span class="jsdoc-syntax">, </span><span class="jsdoc-keyword">function</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">l</span><span class="jsdoc-syntax">) {
 324                 </span><span class="jsdoc-keyword">var </span><span class="jsdoc-var">add </span><span class="jsdoc-syntax">= </span><span class="jsdoc-var">l</span><span class="jsdoc-syntax">;
 325                 </span><span class="jsdoc-keyword">if </span><span class="jsdoc-syntax">(</span><span class="jsdoc-keyword">typeof</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">l</span><span class="jsdoc-syntax">) == </span><span class="jsdoc-string">'string'</span><span class="jsdoc-syntax">) {
 326                     </span><span class="jsdoc-var">add </span><span class="jsdoc-syntax">= {};
 327                     </span><span class="jsdoc-var">add</span><span class="jsdoc-syntax">[</span><span class="jsdoc-var">this.valueField</span><span class="jsdoc-syntax">] = </span><span class="jsdoc-var">l</span><span class="jsdoc-syntax">;
 328                     </span><span class="jsdoc-var">add</span><span class="jsdoc-syntax">[</span><span class="jsdoc-var">this.displayField</span><span class="jsdoc-syntax">] = </span><span class="jsdoc-var">l
 329                 </span><span class="jsdoc-syntax">}
 330                 </span><span class="jsdoc-var">this.addItem</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">add</span><span class="jsdoc-syntax">);
 331             }, </span><span class="jsdoc-var">this</span><span class="jsdoc-syntax">);
 332
 333         }
 334
 335
 336     },
 337     </span><span class="jsdoc-var">setFromData</span><span class="jsdoc-syntax">: </span><span class="jsdoc-keyword">function</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">v</span><span class="jsdoc-syntax">)
 338     {
 339         </span><span class="jsdoc-comment">// this recieves an object, if setValues is called.
 340         </span><span class="jsdoc-var">this.reset</span><span class="jsdoc-syntax">();
 341         </span><span class="jsdoc-var">this.el.dom.value </span><span class="jsdoc-syntax">= </span><span class="jsdoc-var">v</span><span class="jsdoc-syntax">[</span><span class="jsdoc-var">this.displayField</span><span class="jsdoc-syntax">];
 342         </span><span class="jsdoc-var">this.hiddenEl.dom.value </span><span class="jsdoc-syntax">= </span><span class="jsdoc-var">v</span><span class="jsdoc-syntax">[</span><span class="jsdoc-var">this.valueField</span><span class="jsdoc-syntax">];
 343         </span><span class="jsdoc-keyword">if </span><span class="jsdoc-syntax">(</span><span class="jsdoc-keyword">typeof</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">v</span><span class="jsdoc-syntax">[</span><span class="jsdoc-var">this.valueField</span><span class="jsdoc-syntax">]) != </span><span class="jsdoc-string">'string' </span><span class="jsdoc-syntax">|| !</span><span class="jsdoc-var">v</span><span class="jsdoc-syntax">[</span><span class="jsdoc-var">this.valueField</span><span class="jsdoc-syntax">]</span><span class="jsdoc-var">.length</span><span class="jsdoc-syntax">) {
 344             </span><span class="jsdoc-keyword">return</span><span class="jsdoc-syntax">;
 345         }
 346         </span><span class="jsdoc-keyword">var </span><span class="jsdoc-var">kv </span><span class="jsdoc-syntax">= </span><span class="jsdoc-var">v</span><span class="jsdoc-syntax">[</span><span class="jsdoc-var">this.valueField</span><span class="jsdoc-syntax">];
 347         </span><span class="jsdoc-keyword">var </span><span class="jsdoc-var">dv </span><span class="jsdoc-syntax">= </span><span class="jsdoc-var">v</span><span class="jsdoc-syntax">[</span><span class="jsdoc-var">this.displayField</span><span class="jsdoc-syntax">];
 348         </span><span class="jsdoc-var">kv </span><span class="jsdoc-syntax">= </span><span class="jsdoc-keyword">typeof</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">kv</span><span class="jsdoc-syntax">) != </span><span class="jsdoc-string">'string' </span><span class="jsdoc-syntax">? </span><span class="jsdoc-string">'' </span><span class="jsdoc-syntax">: </span><span class="jsdoc-var">kv</span><span class="jsdoc-syntax">;
 349         </span><span class="jsdoc-var">dv </span><span class="jsdoc-syntax">= </span><span class="jsdoc-keyword">typeof</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">dv</span><span class="jsdoc-syntax">) != </span><span class="jsdoc-string">'string' </span><span class="jsdoc-syntax">? </span><span class="jsdoc-string">'' </span><span class="jsdoc-syntax">: </span><span class="jsdoc-var">dv</span><span class="jsdoc-syntax">;
 350
 351
 352         </span><span class="jsdoc-keyword">var </span><span class="jsdoc-var">keys </span><span class="jsdoc-syntax">= </span><span class="jsdoc-var">kv.split</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">this.seperator</span><span class="jsdoc-syntax">);
 353         </span><span class="jsdoc-keyword">var </span><span class="jsdoc-var">display </span><span class="jsdoc-syntax">= </span><span class="jsdoc-var">dv.split</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">this.seperator</span><span class="jsdoc-syntax">);
 354         </span><span class="jsdoc-keyword">for </span><span class="jsdoc-syntax">(</span><span class="jsdoc-keyword">var </span><span class="jsdoc-var">i </span><span class="jsdoc-syntax">= 0 ; </span><span class="jsdoc-var">i </span><span class="jsdoc-syntax">&lt; </span><span class="jsdoc-var">keys.length</span><span class="jsdoc-syntax">; </span><span class="jsdoc-var">i</span><span class="jsdoc-syntax">++) {
 355             </span><span class="jsdoc-var">add </span><span class="jsdoc-syntax">= {};
 356             </span><span class="jsdoc-var">add</span><span class="jsdoc-syntax">[</span><span class="jsdoc-var">this.valueField</span><span class="jsdoc-syntax">] = </span><span class="jsdoc-var">keys</span><span class="jsdoc-syntax">[</span><span class="jsdoc-var">i</span><span class="jsdoc-syntax">];
 357             </span><span class="jsdoc-var">add</span><span class="jsdoc-syntax">[</span><span class="jsdoc-var">this.displayField</span><span class="jsdoc-syntax">] = </span><span class="jsdoc-var">display</span><span class="jsdoc-syntax">[</span><span class="jsdoc-var">i</span><span class="jsdoc-syntax">];
 358             </span><span class="jsdoc-var">this.addItem</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">add</span><span class="jsdoc-syntax">);
 359         }
 360
 361
 362     },
 363
 364     </span><span class="jsdoc-comment">/**
 365      * Validates the combox array value
 366      * @return {Boolean} True if the value is valid, else false
 367      */
 368     </span><span class="jsdoc-var">validate </span><span class="jsdoc-syntax">: </span><span class="jsdoc-keyword">function</span><span class="jsdoc-syntax">(){
 369         </span><span class="jsdoc-keyword">if</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">this.disabled </span><span class="jsdoc-syntax">|| </span><span class="jsdoc-var">this.validateValue</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">this.processValue</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">this.getValue</span><span class="jsdoc-syntax">()))){
 370             </span><span class="jsdoc-var">this.clearInvalid</span><span class="jsdoc-syntax">();
 371             </span><span class="jsdoc-keyword">return true</span><span class="jsdoc-syntax">;
 372         }
 373         </span><span class="jsdoc-keyword">return false</span><span class="jsdoc-syntax">;
 374     },
 375
 376     </span><span class="jsdoc-var">validateValue </span><span class="jsdoc-syntax">: </span><span class="jsdoc-keyword">function</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">value</span><span class="jsdoc-syntax">){
 377         </span><span class="jsdoc-keyword">return </span><span class="jsdoc-var">Roo.form.ComboBoxArray.superclass.validateValue.call</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">this</span><span class="jsdoc-syntax">, </span><span class="jsdoc-var">this.getValue</span><span class="jsdoc-syntax">());
 378
 379     },
 380
 381     </span><span class="jsdoc-comment">/*@
 382      * overide
 383      *
 384      */
 385     </span><span class="jsdoc-var">isDirty </span><span class="jsdoc-syntax">: </span><span class="jsdoc-keyword">function</span><span class="jsdoc-syntax">() {
 386         </span><span class="jsdoc-keyword">if</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">this.disabled</span><span class="jsdoc-syntax">) {
 387             </span><span class="jsdoc-keyword">return false</span><span class="jsdoc-syntax">;
 388         }
 389
 390         </span><span class="jsdoc-keyword">try </span><span class="jsdoc-syntax">{
 391             </span><span class="jsdoc-keyword">var </span><span class="jsdoc-var">d </span><span class="jsdoc-syntax">= </span><span class="jsdoc-var">Roo.decode</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">String</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">this.originalValue</span><span class="jsdoc-syntax">));
 392         } </span><span class="jsdoc-keyword">catch </span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">e</span><span class="jsdoc-syntax">) {
 393             </span><span class="jsdoc-keyword">return </span><span class="jsdoc-var">String</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">this.getValue</span><span class="jsdoc-syntax">()) !== </span><span class="jsdoc-var">String</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">this.originalValue</span><span class="jsdoc-syntax">);
 394         }
 395
 396         </span><span class="jsdoc-keyword">var </span><span class="jsdoc-var">originalValue </span><span class="jsdoc-syntax">= [];
 397
 398         </span><span class="jsdoc-keyword">for </span><span class="jsdoc-syntax">(</span><span class="jsdoc-keyword">var </span><span class="jsdoc-var">i </span><span class="jsdoc-syntax">= 0; </span><span class="jsdoc-var">i </span><span class="jsdoc-syntax">&lt; </span><span class="jsdoc-var">d.length</span><span class="jsdoc-syntax">; </span><span class="jsdoc-var">i</span><span class="jsdoc-syntax">++){
 399             </span><span class="jsdoc-var">originalValue.push</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">d</span><span class="jsdoc-syntax">[</span><span class="jsdoc-var">i</span><span class="jsdoc-syntax">][</span><span class="jsdoc-var">this.valueField</span><span class="jsdoc-syntax">]);
 400         }
 401
 402         </span><span class="jsdoc-keyword">return </span><span class="jsdoc-var">String</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">this.getValue</span><span class="jsdoc-syntax">()) !== </span><span class="jsdoc-var">String</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">originalValue.join</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">this.seperator</span><span class="jsdoc-syntax">));
 403
 404     }
 405
 406 });
 407
 408
 409
 410 </span><span class="jsdoc-comment">/**
 411  * @class Roo.form.ComboBoxArray.Item
 412  * @extends Roo.BoxComponent
 413  * A selected item in the list
 414  *  Fred [x]  Brian [x]  [Pick another |v]
 415  *
 416  * @constructor
 417  * Create a new item.
 418  * @param {Object} config Configuration options
 419  */
 420
 421 </span><span class="jsdoc-var">Roo.form.ComboBoxArray.Item </span><span class="jsdoc-syntax">= </span><span class="jsdoc-keyword">function</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">config</span><span class="jsdoc-syntax">) {
 422     </span><span class="jsdoc-var">config.id </span><span class="jsdoc-syntax">= </span><span class="jsdoc-var">Roo.id</span><span class="jsdoc-syntax">();
 423     </span><span class="jsdoc-var">Roo.form.ComboBoxArray.Item.superclass.constructor.call</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">this</span><span class="jsdoc-syntax">, </span><span class="jsdoc-var">config</span><span class="jsdoc-syntax">);
 424 }
 425
 426 </span><span class="jsdoc-var">Roo.extend</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">Roo.form.ComboBoxArray.Item</span><span class="jsdoc-syntax">, </span><span class="jsdoc-var">Roo.BoxComponent</span><span class="jsdoc-syntax">, {
 427     </span><span class="jsdoc-var">data </span><span class="jsdoc-syntax">: {},
 428     </span><span class="jsdoc-var">cb</span><span class="jsdoc-syntax">: </span><span class="jsdoc-keyword">false</span><span class="jsdoc-syntax">,
 429     </span><span class="jsdoc-var">displayField </span><span class="jsdoc-syntax">: </span><span class="jsdoc-keyword">false</span><span class="jsdoc-syntax">,
 430     </span><span class="jsdoc-var">tipField </span><span class="jsdoc-syntax">: </span><span class="jsdoc-keyword">false</span><span class="jsdoc-syntax">,
 431
 432
 433     </span><span class="jsdoc-var">defaultAutoCreate </span><span class="jsdoc-syntax">: {
 434         </span><span class="jsdoc-var">tag</span><span class="jsdoc-syntax">: </span><span class="jsdoc-string">'div'</span><span class="jsdoc-syntax">,
 435         </span><span class="jsdoc-var">cls</span><span class="jsdoc-syntax">: </span><span class="jsdoc-string">'x-cbarray-item'</span><span class="jsdoc-syntax">,
 436         </span><span class="jsdoc-var">cn </span><span class="jsdoc-syntax">: [
 437             { </span><span class="jsdoc-var">tag</span><span class="jsdoc-syntax">: </span><span class="jsdoc-string">'div' </span><span class="jsdoc-syntax">},
 438             {
 439                 </span><span class="jsdoc-var">tag</span><span class="jsdoc-syntax">: </span><span class="jsdoc-string">'img'</span><span class="jsdoc-syntax">,
 440                 </span><span class="jsdoc-var">width</span><span class="jsdoc-syntax">:16,
 441                 </span><span class="jsdoc-var">height </span><span class="jsdoc-syntax">: 16,
 442                 </span><span class="jsdoc-var">src </span><span class="jsdoc-syntax">: </span><span class="jsdoc-var">Roo.BLANK_IMAGE_URL </span><span class="jsdoc-syntax">,
 443                 </span><span class="jsdoc-var">align</span><span class="jsdoc-syntax">: </span><span class="jsdoc-string">'center'
 444             </span><span class="jsdoc-syntax">}
 445         ]
 446
 447     },
 448
 449
 450     </span><span class="jsdoc-var">onRender </span><span class="jsdoc-syntax">: </span><span class="jsdoc-keyword">function</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">ct</span><span class="jsdoc-syntax">, </span><span class="jsdoc-var">position</span><span class="jsdoc-syntax">)
 451     {
 452         </span><span class="jsdoc-var">Roo.form.Field.superclass.onRender.call</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">this</span><span class="jsdoc-syntax">, </span><span class="jsdoc-var">ct</span><span class="jsdoc-syntax">, </span><span class="jsdoc-var">position</span><span class="jsdoc-syntax">);
 453
 454         </span><span class="jsdoc-keyword">if</span><span class="jsdoc-syntax">(!</span><span class="jsdoc-var">this.el</span><span class="jsdoc-syntax">){
 455             </span><span class="jsdoc-keyword">var </span><span class="jsdoc-var">cfg </span><span class="jsdoc-syntax">= </span><span class="jsdoc-var">this.getAutoCreate</span><span class="jsdoc-syntax">();
 456             </span><span class="jsdoc-var">this.el </span><span class="jsdoc-syntax">= </span><span class="jsdoc-var">ct.createChild</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">cfg</span><span class="jsdoc-syntax">, </span><span class="jsdoc-var">position</span><span class="jsdoc-syntax">);
 457         }
 458
 459         </span><span class="jsdoc-var">this.el.child</span><span class="jsdoc-syntax">(</span><span class="jsdoc-string">'img'</span><span class="jsdoc-syntax">)</span><span class="jsdoc-var">.dom.setAttribute</span><span class="jsdoc-syntax">(</span><span class="jsdoc-string">'src'</span><span class="jsdoc-syntax">, </span><span class="jsdoc-var">Roo.BLANK_IMAGE_URL</span><span class="jsdoc-syntax">);
 460
 461         </span><span class="jsdoc-var">this.el.child</span><span class="jsdoc-syntax">(</span><span class="jsdoc-string">'div'</span><span class="jsdoc-syntax">)</span><span class="jsdoc-var">.dom.innerHTML </span><span class="jsdoc-syntax">= </span><span class="jsdoc-var">this.cb.renderer </span><span class="jsdoc-syntax">?
 462             </span><span class="jsdoc-var">this.cb.renderer</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">this.data</span><span class="jsdoc-syntax">) :
 463             </span><span class="jsdoc-var">String.format</span><span class="jsdoc-syntax">(</span><span class="jsdoc-string">'{0}'</span><span class="jsdoc-syntax">,</span><span class="jsdoc-var">this.data</span><span class="jsdoc-syntax">[</span><span class="jsdoc-var">this.displayField</span><span class="jsdoc-syntax">]);
 464
 465
 466         </span><span class="jsdoc-var">this.el.child</span><span class="jsdoc-syntax">(</span><span class="jsdoc-string">'div'</span><span class="jsdoc-syntax">)</span><span class="jsdoc-var">.dom.setAttribute</span><span class="jsdoc-syntax">(</span><span class="jsdoc-string">'qtip'</span><span class="jsdoc-syntax">,
 467                         </span><span class="jsdoc-var">String.format</span><span class="jsdoc-syntax">(</span><span class="jsdoc-string">'{0}'</span><span class="jsdoc-syntax">,</span><span class="jsdoc-var">this.data</span><span class="jsdoc-syntax">[</span><span class="jsdoc-var">this.tipField</span><span class="jsdoc-syntax">])
 468         );
 469
 470         </span><span class="jsdoc-var">this.el.child</span><span class="jsdoc-syntax">(</span><span class="jsdoc-string">'img'</span><span class="jsdoc-syntax">)</span><span class="jsdoc-var">.on</span><span class="jsdoc-syntax">(</span><span class="jsdoc-string">'click'</span><span class="jsdoc-syntax">, </span><span class="jsdoc-var">this.remove</span><span class="jsdoc-syntax">, </span><span class="jsdoc-var">this</span><span class="jsdoc-syntax">);
 471
 472     },
 473
 474     </span><span class="jsdoc-var">remove </span><span class="jsdoc-syntax">: </span><span class="jsdoc-keyword">function</span><span class="jsdoc-syntax">()
 475     {
 476         </span><span class="jsdoc-keyword">if</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">this.cb.disabled</span><span class="jsdoc-syntax">){
 477             </span><span class="jsdoc-keyword">return</span><span class="jsdoc-syntax">;
 478         }
 479
 480         </span><span class="jsdoc-keyword">if</span><span class="jsdoc-syntax">(</span><span class="jsdoc-keyword">false </span><span class="jsdoc-syntax">!== </span><span class="jsdoc-var">this.cb.fireEvent</span><span class="jsdoc-syntax">(</span><span class="jsdoc-string">'beforeremove'</span><span class="jsdoc-syntax">, </span><span class="jsdoc-var">this.cb</span><span class="jsdoc-syntax">, </span><span class="jsdoc-var">this</span><span class="jsdoc-syntax">)){
 481             </span><span class="jsdoc-var">this.cb.items.remove</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">this</span><span class="jsdoc-syntax">);
 482             </span><span class="jsdoc-var">this.el.child</span><span class="jsdoc-syntax">(</span><span class="jsdoc-string">'img'</span><span class="jsdoc-syntax">)</span><span class="jsdoc-var">.un</span><span class="jsdoc-syntax">(</span><span class="jsdoc-string">'click'</span><span class="jsdoc-syntax">, </span><span class="jsdoc-var">this.remove</span><span class="jsdoc-syntax">, </span><span class="jsdoc-var">this</span><span class="jsdoc-syntax">);
 483             </span><span class="jsdoc-var">this.el.remove</span><span class="jsdoc-syntax">();
 484             </span><span class="jsdoc-var">this.cb.updateHiddenEl</span><span class="jsdoc-syntax">();
 485
 486             </span><span class="jsdoc-var">this.cb.fireEvent</span><span class="jsdoc-syntax">(</span><span class="jsdoc-string">'remove'</span><span class="jsdoc-syntax">, </span><span class="jsdoc-var">this.cb</span><span class="jsdoc-syntax">, </span><span class="jsdoc-var">this</span><span class="jsdoc-syntax">);
 487         }
 488
 489     }
 490 });</span></code></body></html>