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

   1 <html><head><title>/home/edward/gitlive/roojs1/Roo/bootstrap/PhoneInput.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 *    This script refer to:
   3 *    Title: International Telephone Input
   4 *    Author: Jack O'Connor
   5 *    Code version:  v12.1.12
   6 *    Availability: https://github.com/jackocnr/intl-tel-input.git
   7 **/
   8
   9 /**
  10  * @class Roo.bootstrap.PhoneInput
  11  * @extends Roo.bootstrap.TriggerField
  12  * An input with International dial-code selection
  13
  14  * @cfg {String} defaultDialCode default '+852'
  15  * @cfg {Array} preferedCountries default []
  16
  17  * @constructor
  18  * Create a new PhoneInput.
  19  * @param {Object} config Configuration options
  20  */
  21
  22 </span><span class="jsdoc-var">Roo.bootstrap.PhoneInput </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">) {
  23     </span><span class="jsdoc-var">Roo.bootstrap.PhoneInput.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">);
  24 };
  25
  26 </span><span class="jsdoc-var">Roo.extend</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">Roo.bootstrap.PhoneInput</span><span class="jsdoc-syntax">, </span><span class="jsdoc-var">Roo.bootstrap.TriggerField</span><span class="jsdoc-syntax">, {
  27
  28         </span><span class="jsdoc-var">listWidth</span><span class="jsdoc-syntax">: </span><span class="jsdoc-var">undefined</span><span class="jsdoc-syntax">,
  29
  30         </span><span class="jsdoc-var">selectedClass</span><span class="jsdoc-syntax">: </span><span class="jsdoc-string">'active'</span><span class="jsdoc-syntax">,
  31
  32         </span><span class="jsdoc-var">invalidClass </span><span class="jsdoc-syntax">: </span><span class="jsdoc-string">&quot;has-warning&quot;</span><span class="jsdoc-syntax">,
  33
  34         </span><span class="jsdoc-var">validClass</span><span class="jsdoc-syntax">: </span><span class="jsdoc-string">'has-success'</span><span class="jsdoc-syntax">,
  35
  36         </span><span class="jsdoc-var">allowed</span><span class="jsdoc-syntax">: </span><span class="jsdoc-string">'0123456789'</span><span class="jsdoc-syntax">,
  37
  38         </span><span class="jsdoc-var">max_length</span><span class="jsdoc-syntax">: 15,
  39
  40         </span><span class="jsdoc-comment">/**
  41          * @cfg {String} defaultDialCode The default dial code when initializing the input
  42          */
  43         </span><span class="jsdoc-var">defaultDialCode</span><span class="jsdoc-syntax">: </span><span class="jsdoc-string">'+852'</span><span class="jsdoc-syntax">,
  44
  45         </span><span class="jsdoc-comment">/**
  46          * @cfg {Array} preferedCountries A list of iso2 in array (e.g. ['hk','us']). Those related countries will show at the top of the input's choices
  47          */
  48         </span><span class="jsdoc-var">preferedCountries</span><span class="jsdoc-syntax">: </span><span class="jsdoc-keyword">false</span><span class="jsdoc-syntax">,
  49
  50         </span><span class="jsdoc-var">getAutoCreate </span><span class="jsdoc-syntax">: </span><span class="jsdoc-keyword">function</span><span class="jsdoc-syntax">()
  51         {
  52             </span><span class="jsdoc-keyword">var </span><span class="jsdoc-var">data </span><span class="jsdoc-syntax">= </span><span class="jsdoc-var">Roo.bootstrap.PhoneInputData</span><span class="jsdoc-syntax">();
  53             </span><span class="jsdoc-keyword">var </span><span class="jsdoc-var">align </span><span class="jsdoc-syntax">= </span><span class="jsdoc-var">this.labelAlign </span><span class="jsdoc-syntax">|| </span><span class="jsdoc-var">this.parentLabelAlign</span><span class="jsdoc-syntax">();
  54             </span><span class="jsdoc-keyword">var </span><span class="jsdoc-var">id </span><span class="jsdoc-syntax">= </span><span class="jsdoc-var">Roo.id</span><span class="jsdoc-syntax">();
  55
  56             </span><span class="jsdoc-var">this.allCountries </span><span class="jsdoc-syntax">= [];
  57             </span><span class="jsdoc-var">this.dialCodeMapping </span><span class="jsdoc-syntax">= [];
  58
  59             </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">data.length</span><span class="jsdoc-syntax">; </span><span class="jsdoc-var">i</span><span class="jsdoc-syntax">++) {
  60               </span><span class="jsdoc-keyword">var </span><span class="jsdoc-var">c </span><span class="jsdoc-syntax">= </span><span class="jsdoc-var">data</span><span class="jsdoc-syntax">[</span><span class="jsdoc-var">i</span><span class="jsdoc-syntax">];
  61               </span><span class="jsdoc-var">this.allCountries</span><span class="jsdoc-syntax">[</span><span class="jsdoc-var">i</span><span class="jsdoc-syntax">] = {
  62                 </span><span class="jsdoc-var">name</span><span class="jsdoc-syntax">: </span><span class="jsdoc-var">c</span><span class="jsdoc-syntax">[0],
  63                 </span><span class="jsdoc-var">iso2</span><span class="jsdoc-syntax">: </span><span class="jsdoc-var">c</span><span class="jsdoc-syntax">[1],
  64                 </span><span class="jsdoc-var">dialCode</span><span class="jsdoc-syntax">: </span><span class="jsdoc-var">c</span><span class="jsdoc-syntax">[2],
  65                 </span><span class="jsdoc-var">priority</span><span class="jsdoc-syntax">: </span><span class="jsdoc-var">c</span><span class="jsdoc-syntax">[3] || 0,
  66                 </span><span class="jsdoc-var">areaCodes</span><span class="jsdoc-syntax">: </span><span class="jsdoc-var">c</span><span class="jsdoc-syntax">[4] || </span><span class="jsdoc-keyword">null
  67               </span><span class="jsdoc-syntax">};
  68               </span><span class="jsdoc-var">this.dialCodeMapping</span><span class="jsdoc-syntax">[</span><span class="jsdoc-var">c</span><span class="jsdoc-syntax">[2]] = {
  69                   </span><span class="jsdoc-var">name</span><span class="jsdoc-syntax">: </span><span class="jsdoc-var">c</span><span class="jsdoc-syntax">[0],
  70                   </span><span class="jsdoc-var">iso2</span><span class="jsdoc-syntax">: </span><span class="jsdoc-var">c</span><span class="jsdoc-syntax">[1],
  71                   </span><span class="jsdoc-var">priority</span><span class="jsdoc-syntax">: </span><span class="jsdoc-var">c</span><span class="jsdoc-syntax">[3] || 0,
  72                   </span><span class="jsdoc-var">areaCodes</span><span class="jsdoc-syntax">: </span><span class="jsdoc-var">c</span><span class="jsdoc-syntax">[4] || </span><span class="jsdoc-keyword">null
  73               </span><span class="jsdoc-syntax">};
  74             }
  75
  76             </span><span class="jsdoc-keyword">var </span><span class="jsdoc-var">cfg </span><span class="jsdoc-syntax">= {
  77                 </span><span class="jsdoc-var">cls</span><span class="jsdoc-syntax">: </span><span class="jsdoc-string">'form-group'</span><span class="jsdoc-syntax">,
  78                 </span><span class="jsdoc-var">cn</span><span class="jsdoc-syntax">: []
  79             };
  80
  81             </span><span class="jsdoc-keyword">var </span><span class="jsdoc-var">input </span><span class="jsdoc-syntax">=  {
  82                 </span><span class="jsdoc-var">tag</span><span class="jsdoc-syntax">: </span><span class="jsdoc-string">'input'</span><span class="jsdoc-syntax">,
  83                 </span><span class="jsdoc-var">id </span><span class="jsdoc-syntax">: </span><span class="jsdoc-var">id</span><span class="jsdoc-syntax">,
  84                 </span><span class="jsdoc-comment">// type: 'number', -- do not use number - we get the flaky up/down arrows.
  85                 </span><span class="jsdoc-var">maxlength</span><span class="jsdoc-syntax">: </span><span class="jsdoc-var">this.max_length</span><span class="jsdoc-syntax">,
  86                 </span><span class="jsdoc-var">cls </span><span class="jsdoc-syntax">: </span><span class="jsdoc-string">'form-control tel-input'</span><span class="jsdoc-syntax">,
  87                 </span><span class="jsdoc-var">autocomplete</span><span class="jsdoc-syntax">: </span><span class="jsdoc-string">'new-password'
  88             </span><span class="jsdoc-syntax">};
  89
  90             </span><span class="jsdoc-keyword">var </span><span class="jsdoc-var">hiddenInput </span><span class="jsdoc-syntax">= {
  91                 </span><span class="jsdoc-var">tag</span><span class="jsdoc-syntax">: </span><span class="jsdoc-string">'input'</span><span class="jsdoc-syntax">,
  92                 </span><span class="jsdoc-var">type</span><span class="jsdoc-syntax">: </span><span class="jsdoc-string">'hidden'</span><span class="jsdoc-syntax">,
  93                 </span><span class="jsdoc-var">cls</span><span class="jsdoc-syntax">: </span><span class="jsdoc-string">'hidden-tel-input'
  94             </span><span class="jsdoc-syntax">};
  95
  96             </span><span class="jsdoc-keyword">if </span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">this.name</span><span class="jsdoc-syntax">) {
  97                 </span><span class="jsdoc-var">hiddenInput.name </span><span class="jsdoc-syntax">= </span><span class="jsdoc-var">this.name</span><span class="jsdoc-syntax">;
  98             }
  99
 100             </span><span class="jsdoc-keyword">if </span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">this.disabled</span><span class="jsdoc-syntax">) {
 101                 </span><span class="jsdoc-var">input.disabled </span><span class="jsdoc-syntax">= </span><span class="jsdoc-keyword">true</span><span class="jsdoc-syntax">;
 102             }
 103
 104             </span><span class="jsdoc-keyword">var </span><span class="jsdoc-var">flag_container </span><span class="jsdoc-syntax">= {
 105                 </span><span class="jsdoc-var">tag</span><span class="jsdoc-syntax">: </span><span class="jsdoc-string">'div'</span><span class="jsdoc-syntax">,
 106                 </span><span class="jsdoc-var">cls</span><span class="jsdoc-syntax">: </span><span class="jsdoc-string">'flag-box'</span><span class="jsdoc-syntax">,
 107                 </span><span class="jsdoc-var">cn</span><span class="jsdoc-syntax">: [
 108                     {
 109                         </span><span class="jsdoc-var">tag</span><span class="jsdoc-syntax">: </span><span class="jsdoc-string">'div'</span><span class="jsdoc-syntax">,
 110                         </span><span class="jsdoc-var">cls</span><span class="jsdoc-syntax">: </span><span class="jsdoc-string">'flag'
 111                     </span><span class="jsdoc-syntax">},
 112                     {
 113                         </span><span class="jsdoc-var">tag</span><span class="jsdoc-syntax">: </span><span class="jsdoc-string">'div'</span><span class="jsdoc-syntax">,
 114                         </span><span class="jsdoc-var">cls</span><span class="jsdoc-syntax">: </span><span class="jsdoc-string">'caret'
 115                     </span><span class="jsdoc-syntax">}
 116                 ]
 117             };
 118
 119             </span><span class="jsdoc-keyword">var </span><span class="jsdoc-var">box </span><span class="jsdoc-syntax">= {
 120                 </span><span class="jsdoc-var">tag</span><span class="jsdoc-syntax">: </span><span class="jsdoc-string">'div'</span><span class="jsdoc-syntax">,
 121                 </span><span class="jsdoc-var">cls</span><span class="jsdoc-syntax">: </span><span class="jsdoc-var">this.hasFeedback </span><span class="jsdoc-syntax">? </span><span class="jsdoc-string">'has-feedback' </span><span class="jsdoc-syntax">: </span><span class="jsdoc-string">''</span><span class="jsdoc-syntax">,
 122                 </span><span class="jsdoc-var">cn</span><span class="jsdoc-syntax">: [
 123                     </span><span class="jsdoc-var">hiddenInput</span><span class="jsdoc-syntax">,
 124                     </span><span class="jsdoc-var">input</span><span class="jsdoc-syntax">,
 125                     {
 126                         </span><span class="jsdoc-var">tag</span><span class="jsdoc-syntax">: </span><span class="jsdoc-string">'input'</span><span class="jsdoc-syntax">,
 127                         </span><span class="jsdoc-var">cls</span><span class="jsdoc-syntax">: </span><span class="jsdoc-string">'dial-code-holder'</span><span class="jsdoc-syntax">,
 128                         </span><span class="jsdoc-var">disabled</span><span class="jsdoc-syntax">: </span><span class="jsdoc-keyword">true
 129                     </span><span class="jsdoc-syntax">}
 130                 ]
 131             };
 132
 133             </span><span class="jsdoc-keyword">var </span><span class="jsdoc-var">container </span><span class="jsdoc-syntax">= {
 134                 </span><span class="jsdoc-var">cls</span><span class="jsdoc-syntax">: </span><span class="jsdoc-string">'roo-select2-container input-group'</span><span class="jsdoc-syntax">,
 135                 </span><span class="jsdoc-var">cn</span><span class="jsdoc-syntax">: [
 136                     </span><span class="jsdoc-var">flag_container</span><span class="jsdoc-syntax">,
 137                     </span><span class="jsdoc-var">box
 138                 </span><span class="jsdoc-syntax">]
 139             };
 140
 141             </span><span class="jsdoc-keyword">if </span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">this.fieldLabel.length</span><span class="jsdoc-syntax">) {
 142                 </span><span class="jsdoc-keyword">var </span><span class="jsdoc-var">indicator </span><span class="jsdoc-syntax">= {
 143                     </span><span class="jsdoc-var">tag</span><span class="jsdoc-syntax">: </span><span class="jsdoc-string">'i'</span><span class="jsdoc-syntax">,
 144                     </span><span class="jsdoc-var">tooltip</span><span class="jsdoc-syntax">: </span><span class="jsdoc-string">'This field is required'
 145                 </span><span class="jsdoc-syntax">};
 146
 147                 </span><span class="jsdoc-keyword">var </span><span class="jsdoc-var">label </span><span class="jsdoc-syntax">= {
 148                     </span><span class="jsdoc-var">tag</span><span class="jsdoc-syntax">: </span><span class="jsdoc-string">'label'</span><span class="jsdoc-syntax">,
 149                     </span><span class="jsdoc-string">'for'</span><span class="jsdoc-syntax">:  </span><span class="jsdoc-var">id</span><span class="jsdoc-syntax">,
 150                     </span><span class="jsdoc-var">cls</span><span class="jsdoc-syntax">: </span><span class="jsdoc-string">'control-label'</span><span class="jsdoc-syntax">,
 151                     </span><span class="jsdoc-var">cn</span><span class="jsdoc-syntax">: []
 152                 };
 153
 154                 </span><span class="jsdoc-keyword">var </span><span class="jsdoc-var">label_text </span><span class="jsdoc-syntax">= {
 155                     </span><span class="jsdoc-var">tag</span><span class="jsdoc-syntax">: </span><span class="jsdoc-string">'span'</span><span class="jsdoc-syntax">,
 156                     </span><span class="jsdoc-var">html</span><span class="jsdoc-syntax">: </span><span class="jsdoc-var">this.fieldLabel
 157                 </span><span class="jsdoc-syntax">};
 158
 159                 </span><span class="jsdoc-var">indicator.cls </span><span class="jsdoc-syntax">= </span><span class="jsdoc-string">'roo-required-indicator text-danger fa fa-lg fa-star left-indicator'</span><span class="jsdoc-syntax">;
 160                 </span><span class="jsdoc-var">label.cn </span><span class="jsdoc-syntax">= [
 161                     </span><span class="jsdoc-var">indicator</span><span class="jsdoc-syntax">,
 162                     </span><span class="jsdoc-var">label_text
 163                 </span><span class="jsdoc-syntax">];
 164
 165                 </span><span class="jsdoc-keyword">if</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">this.indicatorpos </span><span class="jsdoc-syntax">== </span><span class="jsdoc-string">'right'</span><span class="jsdoc-syntax">) {
 166                     </span><span class="jsdoc-var">indicator.cls </span><span class="jsdoc-syntax">= </span><span class="jsdoc-string">'roo-required-indicator text-danger fa fa-lg fa-star right-indicator'</span><span class="jsdoc-syntax">;
 167                     </span><span class="jsdoc-var">label.cn </span><span class="jsdoc-syntax">= [
 168                         </span><span class="jsdoc-var">label_text</span><span class="jsdoc-syntax">,
 169                         </span><span class="jsdoc-var">indicator
 170                     </span><span class="jsdoc-syntax">];
 171                 }
 172
 173                 </span><span class="jsdoc-keyword">if</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">align </span><span class="jsdoc-syntax">== </span><span class="jsdoc-string">'left'</span><span class="jsdoc-syntax">) {
 174                     </span><span class="jsdoc-var">container </span><span class="jsdoc-syntax">= {
 175                         </span><span class="jsdoc-var">tag</span><span class="jsdoc-syntax">: </span><span class="jsdoc-string">'div'</span><span class="jsdoc-syntax">,
 176                         </span><span class="jsdoc-var">cn</span><span class="jsdoc-syntax">: [
 177                             </span><span class="jsdoc-var">container
 178                         </span><span class="jsdoc-syntax">]
 179                     };
 180
 181                     </span><span class="jsdoc-keyword">if</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">this.labelWidth </span><span class="jsdoc-syntax">&gt; 12){
 182                         </span><span class="jsdoc-var">label.style </span><span class="jsdoc-syntax">= </span><span class="jsdoc-string">&quot;width: &quot; </span><span class="jsdoc-syntax">+ </span><span class="jsdoc-var">this.labelWidth </span><span class="jsdoc-syntax">+ </span><span class="jsdoc-string">'px'</span><span class="jsdoc-syntax">;
 183                     }
 184                     </span><span class="jsdoc-keyword">if</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">this.labelWidth </span><span class="jsdoc-syntax">&lt; 13 &amp;&amp; </span><span class="jsdoc-var">this.labelmd </span><span class="jsdoc-syntax">== 0){
 185                         </span><span class="jsdoc-var">this.labelmd </span><span class="jsdoc-syntax">= </span><span class="jsdoc-var">this.labelWidth</span><span class="jsdoc-syntax">;
 186                     }
 187                     </span><span class="jsdoc-keyword">if</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">this.labellg </span><span class="jsdoc-syntax">&gt; 0){
 188                         </span><span class="jsdoc-var">label.cls </span><span class="jsdoc-syntax">+= </span><span class="jsdoc-string">' col-lg-' </span><span class="jsdoc-syntax">+ </span><span class="jsdoc-var">this.labellg</span><span class="jsdoc-syntax">;
 189                         </span><span class="jsdoc-var">input.cls </span><span class="jsdoc-syntax">+= </span><span class="jsdoc-string">' col-lg-' </span><span class="jsdoc-syntax">+ (12 - </span><span class="jsdoc-var">this.labellg</span><span class="jsdoc-syntax">);
 190                     }
 191                     </span><span class="jsdoc-keyword">if</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">this.labelmd </span><span class="jsdoc-syntax">&gt; 0){
 192                         </span><span class="jsdoc-var">label.cls </span><span class="jsdoc-syntax">+= </span><span class="jsdoc-string">' col-md-' </span><span class="jsdoc-syntax">+ </span><span class="jsdoc-var">this.labelmd</span><span class="jsdoc-syntax">;
 193                         </span><span class="jsdoc-var">container.cls </span><span class="jsdoc-syntax">+= </span><span class="jsdoc-string">' col-md-' </span><span class="jsdoc-syntax">+ (12 - </span><span class="jsdoc-var">this.labelmd</span><span class="jsdoc-syntax">);
 194                     }
 195                     </span><span class="jsdoc-keyword">if</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">this.labelsm </span><span class="jsdoc-syntax">&gt; 0){
 196                         </span><span class="jsdoc-var">label.cls </span><span class="jsdoc-syntax">+= </span><span class="jsdoc-string">' col-sm-' </span><span class="jsdoc-syntax">+ </span><span class="jsdoc-var">this.labelsm</span><span class="jsdoc-syntax">;
 197                         </span><span class="jsdoc-var">container.cls </span><span class="jsdoc-syntax">+= </span><span class="jsdoc-string">' col-sm-' </span><span class="jsdoc-syntax">+ (12 - </span><span class="jsdoc-var">this.labelsm</span><span class="jsdoc-syntax">);
 198                     }
 199                     </span><span class="jsdoc-keyword">if</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">this.labelxs </span><span class="jsdoc-syntax">&gt; 0){
 200                         </span><span class="jsdoc-var">label.cls </span><span class="jsdoc-syntax">+= </span><span class="jsdoc-string">' col-xs-' </span><span class="jsdoc-syntax">+ </span><span class="jsdoc-var">this.labelxs</span><span class="jsdoc-syntax">;
 201                         </span><span class="jsdoc-var">container.cls </span><span class="jsdoc-syntax">+= </span><span class="jsdoc-string">' col-xs-' </span><span class="jsdoc-syntax">+ (12 - </span><span class="jsdoc-var">this.labelxs</span><span class="jsdoc-syntax">);
 202                     }
 203                 }
 204             }
 205
 206             </span><span class="jsdoc-var">cfg.cn </span><span class="jsdoc-syntax">= [
 207                 </span><span class="jsdoc-var">label</span><span class="jsdoc-syntax">,
 208                 </span><span class="jsdoc-var">container
 209             </span><span class="jsdoc-syntax">];
 210
 211             </span><span class="jsdoc-keyword">var </span><span class="jsdoc-var">settings </span><span class="jsdoc-syntax">= </span><span class="jsdoc-var">this</span><span class="jsdoc-syntax">;
 212
 213             [</span><span class="jsdoc-string">'xs'</span><span class="jsdoc-syntax">,</span><span class="jsdoc-string">'sm'</span><span class="jsdoc-syntax">,</span><span class="jsdoc-string">'md'</span><span class="jsdoc-syntax">,</span><span class="jsdoc-string">'lg'</span><span class="jsdoc-syntax">]</span><span class="jsdoc-var">.map</span><span class="jsdoc-syntax">(</span><span class="jsdoc-keyword">function</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">size</span><span class="jsdoc-syntax">){
 214                 </span><span class="jsdoc-keyword">if </span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">settings</span><span class="jsdoc-syntax">[</span><span class="jsdoc-var">size</span><span class="jsdoc-syntax">]) {
 215                     </span><span class="jsdoc-var">cfg.cls </span><span class="jsdoc-syntax">+= </span><span class="jsdoc-string">' col-' </span><span class="jsdoc-syntax">+ </span><span class="jsdoc-var">size </span><span class="jsdoc-syntax">+ </span><span class="jsdoc-string">'-' </span><span class="jsdoc-syntax">+ </span><span class="jsdoc-var">settings</span><span class="jsdoc-syntax">[</span><span class="jsdoc-var">size</span><span class="jsdoc-syntax">];
 216                 }
 217             });
 218
 219             </span><span class="jsdoc-var">this.store </span><span class="jsdoc-syntax">= </span><span class="jsdoc-keyword">new </span><span class="jsdoc-var">Roo.data.Store</span><span class="jsdoc-syntax">({
 220                 </span><span class="jsdoc-var">proxy </span><span class="jsdoc-syntax">: </span><span class="jsdoc-keyword">new </span><span class="jsdoc-var">Roo.data.MemoryProxy</span><span class="jsdoc-syntax">({}),
 221                 </span><span class="jsdoc-var">reader </span><span class="jsdoc-syntax">: </span><span class="jsdoc-keyword">new </span><span class="jsdoc-var">Roo.data.JsonReader</span><span class="jsdoc-syntax">({
 222                     </span><span class="jsdoc-var">fields </span><span class="jsdoc-syntax">: [
 223                         {
 224                             </span><span class="jsdoc-string">'name' </span><span class="jsdoc-syntax">: </span><span class="jsdoc-string">'name'</span><span class="jsdoc-syntax">,
 225                             </span><span class="jsdoc-string">'type' </span><span class="jsdoc-syntax">: </span><span class="jsdoc-string">'string'
 226                         </span><span class="jsdoc-syntax">},
 227                         {
 228                             </span><span class="jsdoc-string">'name' </span><span class="jsdoc-syntax">: </span><span class="jsdoc-string">'iso2'</span><span class="jsdoc-syntax">,
 229                             </span><span class="jsdoc-string">'type' </span><span class="jsdoc-syntax">: </span><span class="jsdoc-string">'string'
 230                         </span><span class="jsdoc-syntax">},
 231                         {
 232                             </span><span class="jsdoc-string">'name' </span><span class="jsdoc-syntax">: </span><span class="jsdoc-string">'dialCode'</span><span class="jsdoc-syntax">,
 233                             </span><span class="jsdoc-string">'type' </span><span class="jsdoc-syntax">: </span><span class="jsdoc-string">'string'
 234                         </span><span class="jsdoc-syntax">},
 235                         {
 236                             </span><span class="jsdoc-string">'name' </span><span class="jsdoc-syntax">: </span><span class="jsdoc-string">'priority'</span><span class="jsdoc-syntax">,
 237                             </span><span class="jsdoc-string">'type' </span><span class="jsdoc-syntax">: </span><span class="jsdoc-string">'string'
 238                         </span><span class="jsdoc-syntax">},
 239                         {
 240                             </span><span class="jsdoc-string">'name' </span><span class="jsdoc-syntax">: </span><span class="jsdoc-string">'areaCodes'</span><span class="jsdoc-syntax">,
 241                             </span><span class="jsdoc-string">'type' </span><span class="jsdoc-syntax">: </span><span class="jsdoc-string">'string'
 242                         </span><span class="jsdoc-syntax">}
 243                     ]
 244                 })
 245             });
 246
 247             </span><span class="jsdoc-keyword">if</span><span class="jsdoc-syntax">(!</span><span class="jsdoc-var">this.preferedCountries</span><span class="jsdoc-syntax">) {
 248                 </span><span class="jsdoc-var">this.preferedCountries </span><span class="jsdoc-syntax">= [
 249                     </span><span class="jsdoc-string">'hk'</span><span class="jsdoc-syntax">,
 250                     </span><span class="jsdoc-string">'gb'</span><span class="jsdoc-syntax">,
 251                     </span><span class="jsdoc-string">'us'
 252                 </span><span class="jsdoc-syntax">];
 253             }
 254
 255             </span><span class="jsdoc-keyword">var </span><span class="jsdoc-var">p </span><span class="jsdoc-syntax">= </span><span class="jsdoc-var">this.preferedCountries.reverse</span><span class="jsdoc-syntax">();
 256
 257             </span><span class="jsdoc-keyword">if</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">p</span><span class="jsdoc-syntax">) {
 258                 </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">p.length</span><span class="jsdoc-syntax">; </span><span class="jsdoc-var">i</span><span class="jsdoc-syntax">++) {
 259                     </span><span class="jsdoc-keyword">for </span><span class="jsdoc-syntax">(</span><span class="jsdoc-keyword">var </span><span class="jsdoc-var">j </span><span class="jsdoc-syntax">= 0; </span><span class="jsdoc-var">j </span><span class="jsdoc-syntax">&lt; </span><span class="jsdoc-var">this.allCountries.length</span><span class="jsdoc-syntax">; </span><span class="jsdoc-var">j</span><span class="jsdoc-syntax">++) {
 260                         </span><span class="jsdoc-keyword">if</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">this.allCountries</span><span class="jsdoc-syntax">[</span><span class="jsdoc-var">j</span><span class="jsdoc-syntax">]</span><span class="jsdoc-var">.iso2 </span><span class="jsdoc-syntax">== </span><span class="jsdoc-var">p</span><span class="jsdoc-syntax">[</span><span class="jsdoc-var">i</span><span class="jsdoc-syntax">]) {
 261                             </span><span class="jsdoc-keyword">var </span><span class="jsdoc-var">t </span><span class="jsdoc-syntax">= </span><span class="jsdoc-var">this.allCountries</span><span class="jsdoc-syntax">[</span><span class="jsdoc-var">j</span><span class="jsdoc-syntax">];
 262                             </span><span class="jsdoc-var">this.allCountries.splice</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">j</span><span class="jsdoc-syntax">,1);
 263                             </span><span class="jsdoc-var">this.allCountries.unshift</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">t</span><span class="jsdoc-syntax">);
 264                         }
 265                     }
 266                 }
 267             }
 268
 269             </span><span class="jsdoc-var">this.store.proxy.data </span><span class="jsdoc-syntax">= {
 270                 </span><span class="jsdoc-var">success</span><span class="jsdoc-syntax">: </span><span class="jsdoc-keyword">true</span><span class="jsdoc-syntax">,
 271                 </span><span class="jsdoc-var">data</span><span class="jsdoc-syntax">: </span><span class="jsdoc-var">this.allCountries
 272             </span><span class="jsdoc-syntax">};
 273
 274             </span><span class="jsdoc-keyword">return </span><span class="jsdoc-var">cfg</span><span class="jsdoc-syntax">;
 275         },
 276
 277         </span><span class="jsdoc-var">initEvents </span><span class="jsdoc-syntax">: </span><span class="jsdoc-keyword">function</span><span class="jsdoc-syntax">()
 278         {
 279             </span><span class="jsdoc-var">this.createList</span><span class="jsdoc-syntax">();
 280             </span><span class="jsdoc-var">Roo.bootstrap.PhoneInput.superclass.initEvents.call</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">this</span><span class="jsdoc-syntax">);
 281
 282             </span><span class="jsdoc-var">this.indicator </span><span class="jsdoc-syntax">= </span><span class="jsdoc-var">this.indicatorEl</span><span class="jsdoc-syntax">();
 283             </span><span class="jsdoc-var">this.flag </span><span class="jsdoc-syntax">= </span><span class="jsdoc-var">this.flagEl</span><span class="jsdoc-syntax">();
 284             </span><span class="jsdoc-var">this.dialCodeHolder </span><span class="jsdoc-syntax">= </span><span class="jsdoc-var">this.dialCodeHolderEl</span><span class="jsdoc-syntax">();
 285
 286             </span><span class="jsdoc-var">this.trigger </span><span class="jsdoc-syntax">= </span><span class="jsdoc-var">this.el.select</span><span class="jsdoc-syntax">(</span><span class="jsdoc-string">'div.flag-box'</span><span class="jsdoc-syntax">,</span><span class="jsdoc-keyword">true</span><span class="jsdoc-syntax">)</span><span class="jsdoc-var">.first</span><span class="jsdoc-syntax">();
 287             </span><span class="jsdoc-var">this.trigger.on</span><span class="jsdoc-syntax">(</span><span class="jsdoc-string">&quot;click&quot;</span><span class="jsdoc-syntax">, </span><span class="jsdoc-var">this.onTriggerClick</span><span class="jsdoc-syntax">, </span><span class="jsdoc-var">this</span><span class="jsdoc-syntax">, {</span><span class="jsdoc-var">preventDefault</span><span class="jsdoc-syntax">:</span><span class="jsdoc-keyword">true</span><span class="jsdoc-syntax">});
 288
 289             </span><span class="jsdoc-keyword">var </span><span class="jsdoc-var">_this </span><span class="jsdoc-syntax">= </span><span class="jsdoc-var">this</span><span class="jsdoc-syntax">;
 290
 291             (</span><span class="jsdoc-keyword">function</span><span class="jsdoc-syntax">(){
 292                 </span><span class="jsdoc-keyword">var </span><span class="jsdoc-var">lw </span><span class="jsdoc-syntax">= </span><span class="jsdoc-var">_this.listWidth </span><span class="jsdoc-syntax">|| </span><span class="jsdoc-var">Math.max</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">_this.inputEl</span><span class="jsdoc-syntax">()</span><span class="jsdoc-var">.getWidth</span><span class="jsdoc-syntax">(), </span><span class="jsdoc-var">_this.minListWidth</span><span class="jsdoc-syntax">);
 293                 </span><span class="jsdoc-var">_this.list.setWidth</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">lw</span><span class="jsdoc-syntax">);
 294             })</span><span class="jsdoc-var">.defer</span><span class="jsdoc-syntax">(100);
 295
 296             </span><span class="jsdoc-var">this.list.on</span><span class="jsdoc-syntax">(</span><span class="jsdoc-string">'mouseover'</span><span class="jsdoc-syntax">, </span><span class="jsdoc-var">this.onViewOver</span><span class="jsdoc-syntax">, </span><span class="jsdoc-var">this</span><span class="jsdoc-syntax">);
 297             </span><span class="jsdoc-var">this.list.on</span><span class="jsdoc-syntax">(</span><span class="jsdoc-string">'mousemove'</span><span class="jsdoc-syntax">, </span><span class="jsdoc-var">this.onViewMove</span><span class="jsdoc-syntax">, </span><span class="jsdoc-var">this</span><span class="jsdoc-syntax">);
 298             </span><span class="jsdoc-var">this.inputEl</span><span class="jsdoc-syntax">()</span><span class="jsdoc-var">.on</span><span class="jsdoc-syntax">(</span><span class="jsdoc-string">&quot;keyup&quot;</span><span class="jsdoc-syntax">, </span><span class="jsdoc-var">this.onKeyUp</span><span class="jsdoc-syntax">, </span><span class="jsdoc-var">this</span><span class="jsdoc-syntax">);
 299             </span><span class="jsdoc-var">this.inputEl</span><span class="jsdoc-syntax">()</span><span class="jsdoc-var">.on</span><span class="jsdoc-syntax">(</span><span class="jsdoc-string">&quot;keypress&quot;</span><span class="jsdoc-syntax">, </span><span class="jsdoc-var">this.onKeyPress</span><span class="jsdoc-syntax">, </span><span class="jsdoc-var">this</span><span class="jsdoc-syntax">);
 300
 301             </span><span class="jsdoc-var">this.tpl </span><span class="jsdoc-syntax">= </span><span class="jsdoc-string">'&lt;li&gt;&lt;a href=&quot;#&quot;&gt;&lt;div class=&quot;flag {iso2}&quot;&gt;&lt;/div&gt;{name} &lt;span class=&quot;dial-code&quot;&gt;+{dialCode}&lt;/span&gt;&lt;/a&gt;&lt;/li&gt;'</span><span class="jsdoc-syntax">;
 302
 303             </span><span class="jsdoc-var">this.view </span><span class="jsdoc-syntax">= </span><span class="jsdoc-keyword">new </span><span class="jsdoc-var">Roo.View</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">this.list</span><span class="jsdoc-syntax">, </span><span class="jsdoc-var">this.tpl</span><span class="jsdoc-syntax">, {
 304                 </span><span class="jsdoc-var">singleSelect</span><span class="jsdoc-syntax">:</span><span class="jsdoc-keyword">true</span><span class="jsdoc-syntax">, </span><span class="jsdoc-var">store</span><span class="jsdoc-syntax">: </span><span class="jsdoc-var">this.store</span><span class="jsdoc-syntax">, </span><span class="jsdoc-var">selectedClass</span><span class="jsdoc-syntax">: </span><span class="jsdoc-var">this.selectedClass
 305             </span><span class="jsdoc-syntax">});
 306
 307             </span><span class="jsdoc-var">this.view.on</span><span class="jsdoc-syntax">(</span><span class="jsdoc-string">'click'</span><span class="jsdoc-syntax">, </span><span class="jsdoc-var">this.onViewClick</span><span class="jsdoc-syntax">, </span><span class="jsdoc-var">this</span><span class="jsdoc-syntax">);
 308             </span><span class="jsdoc-var">this.setValue</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">this.defaultDialCode</span><span class="jsdoc-syntax">);
 309         },
 310
 311         </span><span class="jsdoc-var">onTriggerClick </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">)
 312         {
 313             </span><span class="jsdoc-var">Roo.log</span><span class="jsdoc-syntax">(</span><span class="jsdoc-string">'trigger click'</span><span class="jsdoc-syntax">);
 314             </span><span class="jsdoc-keyword">if</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">this.disabled</span><span class="jsdoc-syntax">){
 315                 </span><span class="jsdoc-keyword">return</span><span class="jsdoc-syntax">;
 316             }
 317
 318             </span><span class="jsdoc-keyword">if</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">this.isExpanded</span><span class="jsdoc-syntax">()){
 319                 </span><span class="jsdoc-var">this.collapse</span><span class="jsdoc-syntax">();
 320                 </span><span class="jsdoc-var">this.hasFocus </span><span class="jsdoc-syntax">= </span><span class="jsdoc-keyword">false</span><span class="jsdoc-syntax">;
 321             }</span><span class="jsdoc-keyword">else </span><span class="jsdoc-syntax">{
 322                 </span><span class="jsdoc-var">this.store.load</span><span class="jsdoc-syntax">({});
 323                 </span><span class="jsdoc-var">this.hasFocus </span><span class="jsdoc-syntax">= </span><span class="jsdoc-keyword">true</span><span class="jsdoc-syntax">;
 324                 </span><span class="jsdoc-var">this.expand</span><span class="jsdoc-syntax">();
 325             }
 326         },
 327
 328         </span><span class="jsdoc-var">isExpanded </span><span class="jsdoc-syntax">: </span><span class="jsdoc-keyword">function</span><span class="jsdoc-syntax">()
 329         {
 330             </span><span class="jsdoc-keyword">return </span><span class="jsdoc-var">this.list.isVisible</span><span class="jsdoc-syntax">();
 331         },
 332
 333         </span><span class="jsdoc-var">collapse </span><span class="jsdoc-syntax">: </span><span class="jsdoc-keyword">function</span><span class="jsdoc-syntax">()
 334         {
 335             </span><span class="jsdoc-keyword">if</span><span class="jsdoc-syntax">(!</span><span class="jsdoc-var">this.isExpanded</span><span class="jsdoc-syntax">()){
 336                 </span><span class="jsdoc-keyword">return</span><span class="jsdoc-syntax">;
 337             }
 338             </span><span class="jsdoc-var">this.list.hide</span><span class="jsdoc-syntax">();
 339             </span><span class="jsdoc-var">Roo.get</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">document</span><span class="jsdoc-syntax">)</span><span class="jsdoc-var">.un</span><span class="jsdoc-syntax">(</span><span class="jsdoc-string">'mousedown'</span><span class="jsdoc-syntax">, </span><span class="jsdoc-var">this.collapseIf</span><span class="jsdoc-syntax">, </span><span class="jsdoc-var">this</span><span class="jsdoc-syntax">);
 340             </span><span class="jsdoc-var">Roo.get</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">document</span><span class="jsdoc-syntax">)</span><span class="jsdoc-var">.un</span><span class="jsdoc-syntax">(</span><span class="jsdoc-string">'mousewheel'</span><span class="jsdoc-syntax">, </span><span class="jsdoc-var">this.collapseIf</span><span class="jsdoc-syntax">, </span><span class="jsdoc-var">this</span><span class="jsdoc-syntax">);
 341             </span><span class="jsdoc-var">this.fireEvent</span><span class="jsdoc-syntax">(</span><span class="jsdoc-string">'collapse'</span><span class="jsdoc-syntax">, </span><span class="jsdoc-var">this</span><span class="jsdoc-syntax">);
 342             </span><span class="jsdoc-var">this.validate</span><span class="jsdoc-syntax">();
 343         },
 344
 345         </span><span class="jsdoc-var">expand </span><span class="jsdoc-syntax">: </span><span class="jsdoc-keyword">function</span><span class="jsdoc-syntax">()
 346         {
 347             </span><span class="jsdoc-var">Roo.log</span><span class="jsdoc-syntax">(</span><span class="jsdoc-string">'expand'</span><span class="jsdoc-syntax">);
 348
 349             </span><span class="jsdoc-keyword">if</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">this.isExpanded</span><span class="jsdoc-syntax">() || !</span><span class="jsdoc-var">this.hasFocus</span><span class="jsdoc-syntax">){
 350                 </span><span class="jsdoc-keyword">return</span><span class="jsdoc-syntax">;
 351             }
 352
 353             </span><span class="jsdoc-keyword">var </span><span class="jsdoc-var">lw </span><span class="jsdoc-syntax">= </span><span class="jsdoc-var">this.listWidth </span><span class="jsdoc-syntax">|| </span><span class="jsdoc-var">Math.max</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">this.inputEl</span><span class="jsdoc-syntax">()</span><span class="jsdoc-var">.getWidth</span><span class="jsdoc-syntax">(), </span><span class="jsdoc-var">this.minListWidth</span><span class="jsdoc-syntax">);
 354             </span><span class="jsdoc-var">this.list.setWidth</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">lw</span><span class="jsdoc-syntax">);
 355
 356             </span><span class="jsdoc-var">this.list.show</span><span class="jsdoc-syntax">();
 357             </span><span class="jsdoc-var">this.restrictHeight</span><span class="jsdoc-syntax">();
 358
 359             </span><span class="jsdoc-var">Roo.get</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">document</span><span class="jsdoc-syntax">)</span><span class="jsdoc-var">.on</span><span class="jsdoc-syntax">(</span><span class="jsdoc-string">'mousedown'</span><span class="jsdoc-syntax">, </span><span class="jsdoc-var">this.collapseIf</span><span class="jsdoc-syntax">, </span><span class="jsdoc-var">this</span><span class="jsdoc-syntax">);
 360             </span><span class="jsdoc-var">Roo.get</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">document</span><span class="jsdoc-syntax">)</span><span class="jsdoc-var">.on</span><span class="jsdoc-syntax">(</span><span class="jsdoc-string">'mousewheel'</span><span class="jsdoc-syntax">, </span><span class="jsdoc-var">this.collapseIf</span><span class="jsdoc-syntax">, </span><span class="jsdoc-var">this</span><span class="jsdoc-syntax">);
 361
 362             </span><span class="jsdoc-var">this.fireEvent</span><span class="jsdoc-syntax">(</span><span class="jsdoc-string">'expand'</span><span class="jsdoc-syntax">, </span><span class="jsdoc-var">this</span><span class="jsdoc-syntax">);
 363         },
 364
 365         </span><span class="jsdoc-var">restrictHeight </span><span class="jsdoc-syntax">: </span><span class="jsdoc-keyword">function</span><span class="jsdoc-syntax">()
 366         {
 367             </span><span class="jsdoc-var">this.list.alignTo</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">this.inputEl</span><span class="jsdoc-syntax">(), </span><span class="jsdoc-var">this.listAlign</span><span class="jsdoc-syntax">);
 368             </span><span class="jsdoc-var">this.list.alignTo</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">this.inputEl</span><span class="jsdoc-syntax">(), </span><span class="jsdoc-var">this.listAlign</span><span class="jsdoc-syntax">);
 369         },
 370
 371         </span><span class="jsdoc-var">onViewOver </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">, </span><span class="jsdoc-var">t</span><span class="jsdoc-syntax">)
 372         {
 373             </span><span class="jsdoc-keyword">if</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">this.inKeyMode</span><span class="jsdoc-syntax">){
 374                 </span><span class="jsdoc-keyword">return</span><span class="jsdoc-syntax">;
 375             }
 376             </span><span class="jsdoc-keyword">var </span><span class="jsdoc-var">item </span><span class="jsdoc-syntax">= </span><span class="jsdoc-var">this.view.findItemFromChild</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">t</span><span class="jsdoc-syntax">);
 377
 378             </span><span class="jsdoc-keyword">if</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">item</span><span class="jsdoc-syntax">){
 379                 </span><span class="jsdoc-keyword">var </span><span class="jsdoc-var">index </span><span class="jsdoc-syntax">= </span><span class="jsdoc-var">this.view.indexOf</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">item</span><span class="jsdoc-syntax">);
 380                 </span><span class="jsdoc-var">this.select</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">index</span><span class="jsdoc-syntax">, </span><span class="jsdoc-keyword">false</span><span class="jsdoc-syntax">);
 381             }
 382         },
 383
 384         </span><span class="jsdoc-comment">// private
 385         </span><span class="jsdoc-var">onViewClick </span><span class="jsdoc-syntax">: </span><span class="jsdoc-keyword">function</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">view</span><span class="jsdoc-syntax">, </span><span class="jsdoc-var">doFocus</span><span class="jsdoc-syntax">, </span><span class="jsdoc-var">el</span><span class="jsdoc-syntax">, </span><span class="jsdoc-var">e</span><span class="jsdoc-syntax">)
 386         {
 387             </span><span class="jsdoc-keyword">var </span><span class="jsdoc-var">index </span><span class="jsdoc-syntax">= </span><span class="jsdoc-var">this.view.getSelectedIndexes</span><span class="jsdoc-syntax">()[0];
 388
 389             </span><span class="jsdoc-keyword">var </span><span class="jsdoc-var">r </span><span class="jsdoc-syntax">= </span><span class="jsdoc-var">this.store.getAt</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">index</span><span class="jsdoc-syntax">);
 390
 391             </span><span class="jsdoc-keyword">if</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">r</span><span class="jsdoc-syntax">){
 392                 </span><span class="jsdoc-var">this.onSelect</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">r</span><span class="jsdoc-syntax">, </span><span class="jsdoc-var">index</span><span class="jsdoc-syntax">);
 393             }
 394             </span><span class="jsdoc-keyword">if</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">doFocus </span><span class="jsdoc-syntax">!== </span><span class="jsdoc-keyword">false </span><span class="jsdoc-syntax">&amp;&amp; !</span><span class="jsdoc-var">this.blockFocus</span><span class="jsdoc-syntax">){
 395                 </span><span class="jsdoc-var">this.inputEl</span><span class="jsdoc-syntax">()</span><span class="jsdoc-var">.focus</span><span class="jsdoc-syntax">();
 396             }
 397         },
 398
 399         </span><span class="jsdoc-var">onViewMove </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">, </span><span class="jsdoc-var">t</span><span class="jsdoc-syntax">)
 400         {
 401             </span><span class="jsdoc-var">this.inKeyMode </span><span class="jsdoc-syntax">= </span><span class="jsdoc-keyword">false</span><span class="jsdoc-syntax">;
 402         },
 403
 404         </span><span class="jsdoc-var">select </span><span class="jsdoc-syntax">: </span><span class="jsdoc-keyword">function</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">index</span><span class="jsdoc-syntax">, </span><span class="jsdoc-var">scrollIntoView</span><span class="jsdoc-syntax">)
 405         {
 406             </span><span class="jsdoc-var">this.selectedIndex </span><span class="jsdoc-syntax">= </span><span class="jsdoc-var">index</span><span class="jsdoc-syntax">;
 407             </span><span class="jsdoc-var">this.view.select</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">index</span><span class="jsdoc-syntax">);
 408             </span><span class="jsdoc-keyword">if</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">scrollIntoView </span><span class="jsdoc-syntax">!== </span><span class="jsdoc-keyword">false</span><span class="jsdoc-syntax">){
 409                 </span><span class="jsdoc-keyword">var </span><span class="jsdoc-var">el </span><span class="jsdoc-syntax">= </span><span class="jsdoc-var">this.view.getNode</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">index</span><span class="jsdoc-syntax">);
 410                 </span><span class="jsdoc-keyword">if</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">el</span><span class="jsdoc-syntax">){
 411                     </span><span class="jsdoc-var">this.list.scrollChildIntoView</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">el</span><span class="jsdoc-syntax">, </span><span class="jsdoc-keyword">false</span><span class="jsdoc-syntax">);
 412                 }
 413             }
 414         },
 415
 416         </span><span class="jsdoc-var">createList </span><span class="jsdoc-syntax">: </span><span class="jsdoc-keyword">function</span><span class="jsdoc-syntax">()
 417         {
 418             </span><span class="jsdoc-var">this.list </span><span class="jsdoc-syntax">= </span><span class="jsdoc-var">Roo.get</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">document.body</span><span class="jsdoc-syntax">)</span><span class="jsdoc-var">.createChild</span><span class="jsdoc-syntax">({
 419                 </span><span class="jsdoc-var">tag</span><span class="jsdoc-syntax">: </span><span class="jsdoc-string">'ul'</span><span class="jsdoc-syntax">,
 420                 </span><span class="jsdoc-var">cls</span><span class="jsdoc-syntax">: </span><span class="jsdoc-string">'typeahead typeahead-long dropdown-menu tel-list'</span><span class="jsdoc-syntax">,
 421                 </span><span class="jsdoc-var">style</span><span class="jsdoc-syntax">: </span><span class="jsdoc-string">'display:none'
 422             </span><span class="jsdoc-syntax">});
 423
 424             </span><span class="jsdoc-var">this.list.setVisibilityMode</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">Roo.Element.DISPLAY</span><span class="jsdoc-syntax">)</span><span class="jsdoc-var">.originalDisplay </span><span class="jsdoc-syntax">= </span><span class="jsdoc-string">'block'</span><span class="jsdoc-syntax">;
 425         },
 426
 427         </span><span class="jsdoc-var">collapseIf </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">)
 428         {
 429             </span><span class="jsdoc-keyword">var </span><span class="jsdoc-var">in_combo  </span><span class="jsdoc-syntax">= </span><span class="jsdoc-var">e.within</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">this.el</span><span class="jsdoc-syntax">);
 430             </span><span class="jsdoc-keyword">var </span><span class="jsdoc-var">in_list </span><span class="jsdoc-syntax">=  </span><span class="jsdoc-var">e.within</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">this.list</span><span class="jsdoc-syntax">);
 431             </span><span class="jsdoc-keyword">var </span><span class="jsdoc-var">is_list </span><span class="jsdoc-syntax">= (</span><span class="jsdoc-var">Roo.get</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">e.getTarget</span><span class="jsdoc-syntax">())</span><span class="jsdoc-var">.id </span><span class="jsdoc-syntax">== </span><span class="jsdoc-var">this.list.id</span><span class="jsdoc-syntax">) ? </span><span class="jsdoc-keyword">true </span><span class="jsdoc-syntax">: </span><span class="jsdoc-keyword">false</span><span class="jsdoc-syntax">;
 432
 433             </span><span class="jsdoc-keyword">if </span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">in_combo </span><span class="jsdoc-syntax">|| </span><span class="jsdoc-var">in_list </span><span class="jsdoc-syntax">|| </span><span class="jsdoc-var">is_list</span><span class="jsdoc-syntax">) {
 434                 </span><span class="jsdoc-keyword">return</span><span class="jsdoc-syntax">;
 435             }
 436             </span><span class="jsdoc-var">this.collapse</span><span class="jsdoc-syntax">();
 437         },
 438
 439         </span><span class="jsdoc-var">onSelect </span><span class="jsdoc-syntax">: </span><span class="jsdoc-keyword">function</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">record</span><span class="jsdoc-syntax">, </span><span class="jsdoc-var">index</span><span class="jsdoc-syntax">)
 440         {
 441             </span><span class="jsdoc-keyword">if</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">this.fireEvent</span><span class="jsdoc-syntax">(</span><span class="jsdoc-string">'beforeselect'</span><span class="jsdoc-syntax">, </span><span class="jsdoc-var">this</span><span class="jsdoc-syntax">, </span><span class="jsdoc-var">record</span><span class="jsdoc-syntax">, </span><span class="jsdoc-var">index</span><span class="jsdoc-syntax">) !== </span><span class="jsdoc-keyword">false</span><span class="jsdoc-syntax">){
 442
 443                 </span><span class="jsdoc-var">this.setFlagClass</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">record.data.iso2</span><span class="jsdoc-syntax">);
 444                 </span><span class="jsdoc-var">this.setDialCode</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">record.data.dialCode</span><span class="jsdoc-syntax">);
 445                 </span><span class="jsdoc-var">this.hasFocus </span><span class="jsdoc-syntax">= </span><span class="jsdoc-keyword">false</span><span class="jsdoc-syntax">;
 446                 </span><span class="jsdoc-var">this.collapse</span><span class="jsdoc-syntax">();
 447                 </span><span class="jsdoc-var">this.fireEvent</span><span class="jsdoc-syntax">(</span><span class="jsdoc-string">'select'</span><span class="jsdoc-syntax">, </span><span class="jsdoc-var">this</span><span class="jsdoc-syntax">, </span><span class="jsdoc-var">record</span><span class="jsdoc-syntax">, </span><span class="jsdoc-var">index</span><span class="jsdoc-syntax">);
 448             }
 449         },
 450
 451         </span><span class="jsdoc-var">flagEl </span><span class="jsdoc-syntax">: </span><span class="jsdoc-keyword">function</span><span class="jsdoc-syntax">()
 452         {
 453             </span><span class="jsdoc-keyword">var </span><span class="jsdoc-var">flag </span><span class="jsdoc-syntax">= </span><span class="jsdoc-var">this.el.select</span><span class="jsdoc-syntax">(</span><span class="jsdoc-string">'div.flag'</span><span class="jsdoc-syntax">,</span><span class="jsdoc-keyword">true</span><span class="jsdoc-syntax">)</span><span class="jsdoc-var">.first</span><span class="jsdoc-syntax">();
 454             </span><span class="jsdoc-keyword">if</span><span class="jsdoc-syntax">(!</span><span class="jsdoc-var">flag</span><span class="jsdoc-syntax">){
 455                 </span><span class="jsdoc-keyword">return false</span><span class="jsdoc-syntax">;
 456             }
 457             </span><span class="jsdoc-keyword">return </span><span class="jsdoc-var">flag</span><span class="jsdoc-syntax">;
 458         },
 459
 460         </span><span class="jsdoc-var">dialCodeHolderEl </span><span class="jsdoc-syntax">: </span><span class="jsdoc-keyword">function</span><span class="jsdoc-syntax">()
 461         {
 462             </span><span class="jsdoc-keyword">var </span><span class="jsdoc-var">d </span><span class="jsdoc-syntax">= </span><span class="jsdoc-var">this.el.select</span><span class="jsdoc-syntax">(</span><span class="jsdoc-string">'input.dial-code-holder'</span><span class="jsdoc-syntax">,</span><span class="jsdoc-keyword">true</span><span class="jsdoc-syntax">)</span><span class="jsdoc-var">.first</span><span class="jsdoc-syntax">();
 463             </span><span class="jsdoc-keyword">if</span><span class="jsdoc-syntax">(!</span><span class="jsdoc-var">d</span><span class="jsdoc-syntax">){
 464                 </span><span class="jsdoc-keyword">return false</span><span class="jsdoc-syntax">;
 465             }
 466             </span><span class="jsdoc-keyword">return </span><span class="jsdoc-var">d</span><span class="jsdoc-syntax">;
 467         },
 468
 469         </span><span class="jsdoc-var">setDialCode </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">)
 470         {
 471             </span><span class="jsdoc-var">this.dialCodeHolder.dom.value </span><span class="jsdoc-syntax">= </span><span class="jsdoc-string">'+'</span><span class="jsdoc-syntax">+</span><span class="jsdoc-var">v</span><span class="jsdoc-syntax">;
 472         },
 473
 474         </span><span class="jsdoc-var">setFlagClass </span><span class="jsdoc-syntax">: </span><span class="jsdoc-keyword">function</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">n</span><span class="jsdoc-syntax">)
 475         {
 476             </span><span class="jsdoc-var">this.flag.dom.className </span><span class="jsdoc-syntax">= </span><span class="jsdoc-string">'flag '</span><span class="jsdoc-syntax">+</span><span class="jsdoc-var">n</span><span class="jsdoc-syntax">;
 477         },
 478
 479         </span><span class="jsdoc-var">getValue </span><span class="jsdoc-syntax">: </span><span class="jsdoc-keyword">function</span><span class="jsdoc-syntax">()
 480         {
 481             </span><span class="jsdoc-keyword">var </span><span class="jsdoc-var">v </span><span class="jsdoc-syntax">= </span><span class="jsdoc-var">this.inputEl</span><span class="jsdoc-syntax">()</span><span class="jsdoc-var">.getValue</span><span class="jsdoc-syntax">();
 482             </span><span class="jsdoc-keyword">if</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">this.dialCodeHolder</span><span class="jsdoc-syntax">) {
 483                 </span><span class="jsdoc-var">v </span><span class="jsdoc-syntax">= </span><span class="jsdoc-var">this.dialCodeHolder.dom.value</span><span class="jsdoc-syntax">+</span><span class="jsdoc-var">this.inputEl</span><span class="jsdoc-syntax">()</span><span class="jsdoc-var">.getValue</span><span class="jsdoc-syntax">();
 484             }
 485             </span><span class="jsdoc-keyword">return </span><span class="jsdoc-var">v</span><span class="jsdoc-syntax">;
 486         },
 487
 488         </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">)
 489         {
 490             </span><span class="jsdoc-keyword">var </span><span class="jsdoc-var">d </span><span class="jsdoc-syntax">= </span><span class="jsdoc-var">this.getDialCode</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">v</span><span class="jsdoc-syntax">);
 491
 492             </span><span class="jsdoc-comment">//invalid dial code
 493             </span><span class="jsdoc-keyword">if</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">v.length </span><span class="jsdoc-syntax">== 0 || !</span><span class="jsdoc-var">d </span><span class="jsdoc-syntax">|| </span><span class="jsdoc-var">d.length </span><span class="jsdoc-syntax">== 0) {
 494                 </span><span class="jsdoc-keyword">if</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">this.rendered</span><span class="jsdoc-syntax">){
 495                     </span><span class="jsdoc-var">this.inputEl</span><span class="jsdoc-syntax">()</span><span class="jsdoc-var">.dom.value </span><span class="jsdoc-syntax">= (</span><span class="jsdoc-var">v </span><span class="jsdoc-syntax">=== </span><span class="jsdoc-keyword">null </span><span class="jsdoc-syntax">|| </span><span class="jsdoc-var">v </span><span class="jsdoc-syntax">=== </span><span class="jsdoc-var">undefined </span><span class="jsdoc-syntax">? </span><span class="jsdoc-string">'' </span><span class="jsdoc-syntax">: </span><span class="jsdoc-var">v</span><span class="jsdoc-syntax">);
 496                     </span><span class="jsdoc-var">this.hiddenEl</span><span class="jsdoc-syntax">()</span><span class="jsdoc-var">.dom.value </span><span class="jsdoc-syntax">= (</span><span class="jsdoc-var">v </span><span class="jsdoc-syntax">=== </span><span class="jsdoc-keyword">null </span><span class="jsdoc-syntax">|| </span><span class="jsdoc-var">v </span><span class="jsdoc-syntax">=== </span><span class="jsdoc-var">undefined </span><span class="jsdoc-syntax">? </span><span class="jsdoc-string">'' </span><span class="jsdoc-syntax">: </span><span class="jsdoc-var">v</span><span class="jsdoc-syntax">);
 497                 }
 498                 </span><span class="jsdoc-keyword">return</span><span class="jsdoc-syntax">;
 499             }
 500
 501             </span><span class="jsdoc-comment">//valid dial code
 502             </span><span class="jsdoc-var">this.setFlagClass</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">this.dialCodeMapping</span><span class="jsdoc-syntax">[</span><span class="jsdoc-var">d</span><span class="jsdoc-syntax">]</span><span class="jsdoc-var">.iso2</span><span class="jsdoc-syntax">);
 503             </span><span class="jsdoc-var">this.setDialCode</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">d</span><span class="jsdoc-syntax">);
 504             </span><span class="jsdoc-var">this.inputEl</span><span class="jsdoc-syntax">()</span><span class="jsdoc-var">.dom.value </span><span class="jsdoc-syntax">= </span><span class="jsdoc-var">v.replace</span><span class="jsdoc-syntax">(</span><span class="jsdoc-string">'+'</span><span class="jsdoc-syntax">+</span><span class="jsdoc-var">d</span><span class="jsdoc-syntax">,</span><span class="jsdoc-string">''</span><span class="jsdoc-syntax">);
 505             </span><span class="jsdoc-var">this.hiddenEl</span><span class="jsdoc-syntax">()</span><span class="jsdoc-var">.dom.value </span><span class="jsdoc-syntax">= </span><span class="jsdoc-var">this.getValue</span><span class="jsdoc-syntax">();
 506
 507             </span><span class="jsdoc-var">this.validate</span><span class="jsdoc-syntax">();
 508         },
 509
 510         </span><span class="jsdoc-var">getDialCode </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">)
 511         {
 512             </span><span class="jsdoc-var">v </span><span class="jsdoc-syntax">= </span><span class="jsdoc-var">v </span><span class="jsdoc-syntax">||  </span><span class="jsdoc-string">''</span><span class="jsdoc-syntax">;
 513
 514             </span><span class="jsdoc-keyword">if </span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">v.length </span><span class="jsdoc-syntax">== 0) {
 515                 </span><span class="jsdoc-keyword">return </span><span class="jsdoc-var">this.dialCodeHolder.dom.value</span><span class="jsdoc-syntax">;
 516             }
 517
 518             </span><span class="jsdoc-keyword">var </span><span class="jsdoc-var">dialCode </span><span class="jsdoc-syntax">= </span><span class="jsdoc-string">&quot;&quot;</span><span class="jsdoc-syntax">;
 519             </span><span class="jsdoc-keyword">if </span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">v.charAt</span><span class="jsdoc-syntax">(0) != </span><span class="jsdoc-string">&quot;+&quot;</span><span class="jsdoc-syntax">) {
 520                 </span><span class="jsdoc-keyword">return false</span><span class="jsdoc-syntax">;
 521             }
 522             </span><span class="jsdoc-keyword">var </span><span class="jsdoc-var">numericChars </span><span class="jsdoc-syntax">= </span><span class="jsdoc-string">&quot;&quot;</span><span class="jsdoc-syntax">;
 523             </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">= 1; </span><span class="jsdoc-var">i </span><span class="jsdoc-syntax">&lt; </span><span class="jsdoc-var">v.length</span><span class="jsdoc-syntax">; </span><span class="jsdoc-var">i</span><span class="jsdoc-syntax">++) {
 524               </span><span class="jsdoc-keyword">var </span><span class="jsdoc-var">c </span><span class="jsdoc-syntax">= </span><span class="jsdoc-var">v.charAt</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">i</span><span class="jsdoc-syntax">);
 525               </span><span class="jsdoc-keyword">if </span><span class="jsdoc-syntax">(!</span><span class="jsdoc-var">isNaN</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">c</span><span class="jsdoc-syntax">)) {
 526                 </span><span class="jsdoc-var">numericChars </span><span class="jsdoc-syntax">+= </span><span class="jsdoc-var">c</span><span class="jsdoc-syntax">;
 527                 </span><span class="jsdoc-keyword">if </span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">this.dialCodeMapping</span><span class="jsdoc-syntax">[</span><span class="jsdoc-var">numericChars</span><span class="jsdoc-syntax">]) {
 528                   </span><span class="jsdoc-var">dialCode </span><span class="jsdoc-syntax">= </span><span class="jsdoc-var">v.substr</span><span class="jsdoc-syntax">(1, </span><span class="jsdoc-var">i</span><span class="jsdoc-syntax">);
 529                 }
 530                 </span><span class="jsdoc-keyword">if </span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">numericChars.length </span><span class="jsdoc-syntax">== 4) {
 531                   </span><span class="jsdoc-keyword">break</span><span class="jsdoc-syntax">;
 532                 }
 533               }
 534             }
 535             </span><span class="jsdoc-keyword">return </span><span class="jsdoc-var">dialCode</span><span class="jsdoc-syntax">;
 536         },
 537
 538         </span><span class="jsdoc-var">reset </span><span class="jsdoc-syntax">: </span><span class="jsdoc-keyword">function</span><span class="jsdoc-syntax">()
 539         {
 540             </span><span class="jsdoc-var">this.setValue</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">this.defaultDialCode</span><span class="jsdoc-syntax">);
 541             </span><span class="jsdoc-var">this.validate</span><span class="jsdoc-syntax">();
 542         },
 543
 544         </span><span class="jsdoc-var">hiddenEl </span><span class="jsdoc-syntax">: </span><span class="jsdoc-keyword">function</span><span class="jsdoc-syntax">()
 545         {
 546             </span><span class="jsdoc-keyword">return </span><span class="jsdoc-var">this.el.select</span><span class="jsdoc-syntax">(</span><span class="jsdoc-string">'input.hidden-tel-input'</span><span class="jsdoc-syntax">,</span><span class="jsdoc-keyword">true</span><span class="jsdoc-syntax">)</span><span class="jsdoc-var">.first</span><span class="jsdoc-syntax">();
 547         },
 548
 549         </span><span class="jsdoc-comment">// after setting val
 550         </span><span class="jsdoc-var">onKeyUp </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">){
 551             </span><span class="jsdoc-var">this.setValue</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">this.getValue</span><span class="jsdoc-syntax">());
 552         },
 553
 554         </span><span class="jsdoc-var">onKeyPress </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">){
 555             </span><span class="jsdoc-keyword">if</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">this.allowed.indexOf</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">String.fromCharCode</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">e.getCharCode</span><span class="jsdoc-syntax">())) === -1){
 556                 </span><span class="jsdoc-var">e.stopEvent</span><span class="jsdoc-syntax">();
 557             }
 558         }
 559
 560 });</span></code></body></html>