Roo/bootstrap/ComboBox.js
[roojs1] / roojs-bootstrap-debug.js
index 3fbabf6..bba6254 100644 (file)
@@ -4569,6 +4569,7 @@ Roo.extend(Roo.bootstrap.NavItem, Roo.bootstrap.Component,  {
  * {Boolean} buttonView use button as the tigger el rather that a (default false)
  * {String} buttonWeight (default|primary|success|info|warning|danger)the extra classes for the button
  * {String} buttonSize (sm|md|lg)the extra classes for the button
+ * {Boolean} showArrow show arrow next to the text (default true)
  * @constructor
  * Create a new Navbar Button
  * @param {Object} config The config object
@@ -4607,6 +4608,8 @@ Roo.extend(Roo.bootstrap.NavSidebarItem, Roo.bootstrap.NavItem,  {
     
     buttonSize : 'md',
     
+    showArrow : true,
+    
     getAutoCreate : function(){
         
         
@@ -4622,7 +4625,7 @@ Roo.extend(Roo.bootstrap.NavSidebarItem, Roo.bootstrap.NavItem,  {
             a = {
                 tag: 'button',
                 href : this.href || '#',
-                cls: 'btn btn-' + this.buttonWeight + ' btn-' + this.buttonSize,
+                cls: 'btn btn-' + this.buttonWeight + ' btn-' + this.buttonSize + 'roo-button-dropdown-toggle',
                 html : this.html,
                 cn : []
             };
@@ -4658,22 +4661,22 @@ Roo.extend(Roo.bootstrap.NavSidebarItem, Roo.bootstrap.NavItem,  {
 
             a.cn.push(span);
             
-            if (this.badge !== '') {
-                a.cn.push({ tag: 'span',  cls : 'badge pull-right badge-' + this.badgeWeight, html: this.badge }); 
-            }
         }
         
-        // then badge..
+        if (this.badge !== '') {
+            a.cn.push({ tag: 'span',  cls : 'badge pull-right badge-' + this.badgeWeight, html: this.badge }); 
+        }
         
-        // fi
         if (this.menu) {
-            a.cn.push({ tag : 'i', cls : 'glyphicon glyphicon-chevron-down pull-right'});
-            a.cls += 'dropdown-toggle treeview' ;
+            
+            if(this.showArrow){
+                a.cn.push({ tag : 'i', cls : 'glyphicon glyphicon-chevron-down pull-right'});
+            }
+            
+            a.cls += ' dropdown-toggle treeview' ;
         }
         
         return cfg;
-         
-          
     },
     
     initEvents : function()
@@ -4687,7 +4690,6 @@ Roo.extend(Roo.bootstrap.NavSidebarItem, Roo.bootstrap.NavItem,  {
         this.el.on('click', this.onClick, this);
         
         if(this.badge !== ''){
             this.badgeEl = this.el.select('.badge', true).first().setVisibilityMode(Roo.Element.DISPLAY);
         }
         
@@ -7673,7 +7675,7 @@ Roo.extend(Roo.bootstrap.Form, Roo.bootstrap.Component,  {
         var target = false;
         
         items.each(function(f){
-            
+            Roo.log(f.name);
             if(f.validate()){
                 return;
             }
@@ -8130,6 +8132,8 @@ Roo.apply(Roo.bootstrap.Form, {
             
             var scrollable = this.target.el.findScrollableParent() || this.target.el.findParent('div.modal', 100, true) || Roo.get(document.body);
             
+            Roo.log(scrollable);
+            
             var ot = this.target.el.calcOffsetsTo(scrollable);
             
             var scrollTo = ot[1] - this.form.maskOffset;
@@ -8747,13 +8751,17 @@ Roo.extend(Roo.bootstrap.Input, Roo.bootstrap.Component,  {
                         tag: 'label',
                         'for' :  id,
                         cls : 'control-label',
-                        html : this.fieldLabel
-
-                    },
-                    {
-                        tag : 'i',
-                        cls : 'roo-required-indicator right-indicator text-danger fa fa-lg fa-star',
-                        tooltip : 'This field is required'
+                        cn : [
+                            {
+                                tag : 'span',
+                                html : this.fieldLabel
+                            },
+                            {
+                                tag : 'i',
+                                cls : 'roo-required-indicator right-indicator text-danger fa fa-lg fa-star',
+                                tooltip : 'This field is required'
+                            }
+                        ]
                     },
                     {
                         cls : "",
@@ -8765,7 +8773,7 @@ Roo.extend(Roo.bootstrap.Input, Roo.bootstrap.Component,  {
                 ];
                 
                 labelCfg = cfg.cn[0];
-                contentCfg = cfg.cn[2];
+                contentCfg = cfg.cn[1];
             
             }
             
@@ -9334,8 +9342,16 @@ Roo.extend(Roo.bootstrap.Input, Roo.bootstrap.Component,  {
             }
         }
         return w;
-    }
+    },
     
+    setFieldLabel : function(v)
+    {
+        this.fieldLabel = v;
+        
+        if(this.rendered){
+            this.el.select('label',true).first().dom.innerHTML = (v === null || v === undefined ? '' : v);
+        }
+    }
 });
 
  
@@ -9384,6 +9400,10 @@ Roo.extend(Roo.bootstrap.TextArea, Roo.bootstrap.Input,  {
         
         var cfg = {};
         
+        if(this.inputType != 'hidden'){
+            cfg.cls = 'form-group' //input-group
+        }
+        
         var input =  {
             tag: 'textarea',
             id : id,
@@ -9781,7 +9801,6 @@ Roo.extend(Roo.bootstrap.TriggerField, Roo.bootstrap.Input,  {
             cls : 'form-control',
             autocomplete: 'new-password',
             placeholder : this.placeholder || '' 
-            
         };
         if (this.name) {
             input.name = this.name;
@@ -13711,6 +13730,8 @@ Roo.extend(Roo.bootstrap.ComboBox, Roo.bootstrap.TriggerField, {
      */
     setFromData : function(o){
         
+        Roo.log(o);
+        
         if(this.multiple){
             this.addItem(o);
             return;
@@ -20768,6 +20789,15 @@ Roo.extend(Roo.bootstrap.Radio, Roo.bootstrap.Component, {
     {
         this.parent().setValue(this.value, suppressEvent);
         
+    },
+    
+    setBoxLabel : function(v)
+    {
+        this.boxLabel = v;
+        
+        if(this.rendered){
+            this.el.select('label.box-label',true).first().dom.innerHTML = (v === null || v === undefined ? '' : v);
+        }
     }
     
 });
@@ -21262,7 +21292,7 @@ Roo.extend(Roo.HtmlEditorCore, Roo.Component,  {
     black: false,
     white: false,
      
-    
+    bodyCls : '',
 
     /**
      * Protected method that will not generally be called directly. It
@@ -21290,19 +21320,26 @@ Roo.extend(Roo.HtmlEditorCore, Roo.Component,  {
                     'body{border:0;margin:0;padding:3px;height:98%;cursor:text;}' +
                    '</style>';
         } else { 
-            
+            st = '<style type="text/css">' +
+                    this.stylesheets +
+                '</style>';
         }
         
         st +=  '<style type="text/css">' +
             'IMG { cursor: pointer } ' +
         '</style>';
 
+        var cls = 'roo-htmleditor-body';
+        
+        if(this.bodyCls.length){
+            cls += ' ' + this.bodyCls;
+        }
         
         return '<html><head>' + st  +
             //<style type="text/css">' +
             //'body{border:0;margin:0;padding:3px;height:98%;cursor:text;}' +
             //'</style>' +
-            ' </head><body class="roo-htmleditor-body"></body></html>';
+            ' </head><body class="' +  cls + '"></body></html>';
     },
 
     // private
@@ -22677,6 +22714,17 @@ Roo.extend(Roo.HtmlEditorCore, Roo.Component,  {
         Roo.each(Roo.get(_this.iframe.contentDocument.head).select('link[rel=stylesheet]', true).elements, function(s){
             s.remove();
         });
+    },
+    
+    setStyle : function(style)
+    {
+        Roo.get(this.iframe.contentDocument.head).createChild({
+            tag : 'style',
+            type : 'text/css',
+            html : style
+        });
+
+        return;
     }
     
     // hide stuff that is not compatible
@@ -22945,6 +22993,8 @@ Roo.extend(Roo.bootstrap.HtmlEditor, Roo.bootstrap.TextArea,  {
     
     tbContainer : false,
     
+    bodyCls : '',
+    
     toolbarContainer :function() {
         return this.wrap.select('.x-html-editor-tb',true).first();
     },
@@ -33280,6 +33330,13 @@ Roo.extend(Roo.bootstrap.RadioSet, Roo.bootstrap.Input,  {
             cfg.cls += ' roo-radio-set-inline';
         }
         
+        var settings=this;
+        ['xs','sm','md','lg'].map(function(size){
+            if (settings[size]) {
+                cfg.cls += ' col-' + size + '-' + settings[size];
+            }
+        });
+        
         return cfg;
         
     },
@@ -37871,824 +37928,239 @@ Roo.extend(Roo.bootstrap.panel.TabItem, Roo.util.Observable,
      */
     closeText : "Close this tab"
 });
-/*
- * - LGPL
- *
- * element
- * 
- */
-
-/**
- * @class Roo.bootstrap.PhoneInput
- * @extends Roo.bootstrap.TriggerField
- * Bootstrap PhoneInput class
- * 
- * @constructor
- * Create a new PhoneInput
- * @param {Object} config The config object
-*/
-
-Roo.bootstrap.PhoneInput = function(config){
-    
+Roo.bootstrap.PhoneInput = function(config) {
     Roo.bootstrap.PhoneInput.superclass.constructor.call(this, config);
-    
-    this.addEvents({
-        /**
-         * @event expand
-         * Fires when the dropdown list is expanded
-            * @param {Roo.bootstrap.ComboBox} combo This combo box
-            */
-        'expand' : true,
-        /**
-         * @event collapse
-         * Fires when the dropdown list is collapsed
-            * @param {Roo.bootstrap.ComboBox} combo This combo box
-            */
-        'collapse' : true,
-        /**
-         * @event beforeselect
-         * Fires before a list item is selected. Return false to cancel the selection.
-            * @param {Roo.bootstrap.ComboBox} combo This combo box
-            * @param {Roo.data.Record} record The data record returned from the underlying store
-            * @param {Number} index The index of the selected item in the dropdown list
-            */
-        'beforeselect' : true,
-        /**
-         * @event select
-         * Fires when a list item is selected
-            * @param {Roo.bootstrap.ComboBox} combo This combo box
-            * @param {Roo.data.Record} record The data record returned from the underlying store (or false on clear)
-            * @param {Number} index The index of the selected item in the dropdown list
-            */
-        'select' : true,
-        /**
-         * @event beforequery
-         * Fires before all queries are processed. Return false to cancel the query or set cancel to true.
-         * The event object passed has these properties:
-            * @param {Roo.bootstrap.ComboBox} combo This combo box
-            * @param {String} query The query
-            * @param {Boolean} forceAll true to force "all" query
-            * @param {Boolean} cancel true to cancel the query
-            * @param {Object} e The query event object
-            */
-        'beforequery': true,
-         /**
-         * @event add
-         * Fires when the 'add' icon is pressed (add a listener to enable add button)
-            * @param {Roo.bootstrap.ComboBox} combo This combo box
-            */
-        'add' : true,
-        /**
-         * @event edit
-         * Fires when the 'edit' icon is pressed (add a listener to enable add button)
-            * @param {Roo.bootstrap.ComboBox} combo This combo box
-            * @param {Roo.data.Record|false} record The data record returned from the underlying store (or false on nothing selected)
-            */
-        'edit' : true,
-        /**
-         * @event remove
-         * Fires when the remove value from the combobox array
-            * @param {Roo.bootstrap.ComboBox} combo This combo box
-            */
-        'remove' : true,
-        /**
-         * @event afterremove
-         * Fires when the remove value from the combobox array
-            * @param {Roo.bootstrap.ComboBox} combo This combo box
-            */
-        'afterremove' : true,
-        /**
-         * @event specialfilter
-         * Fires when specialfilter
-            * @param {Roo.bootstrap.ComboBox} combo This combo box
-            */
-        'touchviewdisplay' : true
-    });
-    
-    this.country = []; //fetch country JSON
 };
 
-Roo.extend(Roo.bootstrap.PhoneInput, Roo.bootstrap.TriggerField, {
-     
-     listWidth: undefined,
-     
-     modalTitle : '', 
-     
-     selectedClass: 'active',
-     
-     maxHeight: 300,
-     
-     minListWidth : 70,
-     
-     triggerAction: 'query',
-     
-     validClass : "has-success",
-     
-     invalidClass: "has-warning",
-     
-     //new settings
-     defaultCountry: 'hk',
-     
-     preferedCountries: undefined, //array
-     
-     filterCountries: undefined, //array
-     
-     displayMode: undefined, //string
-     
-     getAutoCreate : function(){
-    
-         this.list = Roo.bootstrap.PhoneInput.List;
-    
-        if(this.filterCountries) {
-            for(var i = 0; i < this.filterCountries.length; i++) {
-                delete this.list[this.filterCountries[i]];
-            }
-        }
+Roo.extend(Roo.bootstrap.PhoneInput, Roo.bootstrap.TriggerField,  {
         
-        if (this.preferedCountries) {
-            //another list??
-        }
+        triggerList : true,
         
-         var align = this.labelAlign || this.parentLabelAlign();
-         
-         var id = Roo.id(); //all el??
-         
-         var cfg = {
-             cls: 'form-group'
-         };
-         
-         var input =  {
-             tag: 'input',
-             id : id,
-             type : this.inputType,
-             cls : 'form-control',
-             style: 'padding-left: 60px;',
-             placeholder : this.placeholder || ''
-         };
-         
-         if (this.name) {
-             input.name = this.name;
-         }
-         if (this.size) {
-             input.cls += ' input-' + this.size;
-         }
-         
-         if (this.disabled) {
-             input.disabled=true;
-         }
-         
-         var inputblock = input;
-         
-         if(this.hasFeedback && !this.allowBlank){
-             var feedback = {
-                 tag: 'span',
-                 cls: 'glyphicon form-control-feedback'
-             };
-         }
-         
-         inputblock = {
-             cn :  []
-         };
-         
-         inputblock.cn.push(input);
-         
-         if(this.hasFeedback && !this.allowBlank){
-             inputblock.cls += 'has-feedback';
-             inputblock.cn.push(feedback);
-         }
-         
-         var box = {
-             tag: 'div',
-             cn: [
-                 {
-                     tag: 'input',
-                     type : 'hidden',
-                     cls: 'form-hidden-field'
-                 },
-                 inputblock
-             ]
-         };
-         
-         var flag = {
-             tag: 'span',
-             html: 'flag',
-             style: 'margin-right:5px',
-             cls: 'roo-selected-region',
-             cn: [] //flag position ... (iti-flag-us)
-         };
-         
-         var caret = {
-             tag: 'span',
-             cls: 'caret'
-          };
-          
-         if (this.caret != false) {
-             caret = {
-                  tag: 'i',
-                  cls: 'fa fa-' + this.caret
-             };
-         }
-         
-         var combobox = {
-             cls: 'roo-select2-container input-group',
-             cn: []
-         };
-         
-         combobox.cn.push({
-             tag :'span',
-             cls : 'input-group-addon btn dropdown-toggle',
-             style : 'position: absolute; z-index: 4;background: none;border: none; margin-top: 4px; margin-left: 3px; margin-right: 3px;',
-             cn : [
-                 flag,
-                 caret,
-                 {
-                     tag: 'span',
-                     cls: 'combobox-clear',
-                     cn  : [
-                         {
-                             tag : 'i',
-                             cls: 'icon-remove'
-                         }
-                     ]
-                 }
-             ]
-         });
-         
-         combobox.cn.push(box);
-         
-         if (align ==='left' && this.fieldLabel.length) {
-             
-             cfg.cls += ' roo-form-group-label-left';
-
-             cfg.cn = [
-                 {
-                     tag : 'i',
-                     cls : 'roo-required-indicator left-indicator text-danger fa fa-lg fa-star',
-                     tooltip : 'This field is required'
-                 },
-                 {
-                     tag: 'label',
-                     'for' :  id,
-                     cls : 'control-label',
-                     html : this.fieldLabel
-
-                 },
-                 {
-                     cls : "", 
-                     cn: [
-                         combobox
-                     ]
-                 }
-             ];
-             
-             var labelCfg = cfg.cn[1];
-             var contentCfg = cfg.cn[2];
-             
-             if(this.indicatorpos == 'right'){
-                 cfg.cn = [
-                     {
-                         tag: 'label',
-                         'for' :  id,
-                         cls : 'control-label',
-                         cn : [
-                             {
-                                 tag : 'span',
-                                 html : this.fieldLabel
-                             },
-                             {
-                                 tag : 'i',
-                                 cls : 'roo-required-indicator right-indicator text-danger fa fa-lg fa-star',
-                                 tooltip : 'This field is required'
-                             }
-                         ]
-                     },
-                     {
-                         cls : "", 
-                         cn: [
-                             combobox
-                         ]
-                     }
-
-                 ];
-                 
-                 labelCfg = cfg.cn[0];
-                 contentCfg = cfg.cn[1];
-             }
-             
-             if(this.labelWidth > 12){
-                 labelCfg.style = "width: " + this.labelWidth + 'px';
-             }
-             
-             if(this.labelWidth < 13 && this.labelmd == 0){
-                 this.labelmd = this.labelWidth;
-             }
-             
-             if(this.labellg > 0){
-                 labelCfg.cls += ' col-lg-' + this.labellg;
-                 contentCfg.cls += ' col-lg-' + (12 - this.labellg);
-             }
-             
-             if(this.labelmd > 0){
-                 labelCfg.cls += ' col-md-' + this.labelmd;
-                 contentCfg.cls += ' col-md-' + (12 - this.labelmd);
-             }
-             
-             if(this.labelsm > 0){
-                 labelCfg.cls += ' col-sm-' + this.labelsm;
-                 contentCfg.cls += ' col-sm-' + (12 - this.labelsm);
-             }
-             
-             if(this.labelxs > 0){
-                 labelCfg.cls += ' col-xs-' + this.labelxs;
-                 contentCfg.cls += ' col-xs-' + (12 - this.labelxs);
-             }
-             
-         } else if ( this.fieldLabel.length) {
- //                Roo.log(" label");
-             cfg.cn = [
-                 {
-                    tag : 'i',
-                    cls : 'roo-required-indicator left-indicator text-danger fa fa-lg fa-star',
-                    tooltip : 'This field is required'
-                },
-                {
-                    tag: 'label',
-                    //cls : 'input-group-addon',
-                    html : this.fieldLabel
-
-                },
-
-                combobox
-
-             ];
-             
-             if(this.indicatorpos == 'right'){
-                 
-                 cfg.cn = [
-                     {
-                        tag: 'label',
-                        cn : [
-                            {
-                                tag : 'span',
-                                html : this.fieldLabel
-                            },
-                            {
-                               tag : 'i',
-                               cls : 'roo-required-indicator right-indicator text-danger fa fa-lg fa-star',
-                               tooltip : 'This field is required'
-                            }
-                        ]
-                     },
-                     combobox
-                 ];
-             }
-         } else {
-                 cfg = combobox
-         }
-         
-         var settings=this;
-         ['xs','sm','md','lg'].map(function(size){
-             if (settings[size]) {
-                 cfg.cls += ' col-' + size + '-' + settings[size];
-             }
-         });
-         
-         return cfg;
-     },
-     
-     _initEventsCalled : false,
-     
-     initEvents: function()
-     {   
-         if (this._initEventsCalled) {
-             return;
-         }
-         
-         this._initEventsCalled = true;
-         
-         this.store =  new Roo.data.SimpleStore({
-             data : this.list,
-             fields : ['name','iso','dial_code','order','area_code']
-         });
-         
-         this.store = Roo.factory(this.store, Roo.data);
-         this.store.parent = this;
-         
-         Roo.bootstrap.PhoneInput.superclass.initEvents.call(this);
-         
-         var _this = this;
-         
-         (function(){
-             var lw = _this.listWidth || Math.max(_this.inputEl().getWidth(), _this.minListWidth);
-             _this.list.setWidth(lw);
-         }).defer(100);
-         
-         this.list.on('mouseover', this.onViewOver, this);
-         this.list.on('mousemove', this.onViewMove, this);
-         this.list.on('scroll', this.onViewScroll, this);
-         
-         if(!this.tpl){
-             this.tpl = '<li><a href="#">{' + this.displayField + '}</a></li>';
-         }
-
-         this.view = new Roo.View(this.list, this.tpl, {
-             singleSelect:true, store: this.store, selectedClass: this.selectedClass
-         });
-         
-         this.view.on('click', this.onViewClick, this);
-         
-         this.store.on('beforeload', this.onBeforeLoad, this);
-         this.store.on('load', this.onLoad, this);
-         this.store.on('loadexception', this.onLoadException, this);
-         
-         this.keyNav = new Roo.KeyNav(this.inputEl(), {
-             "up" : function(e){
-                 this.inKeyMode = true;
-                 this.selectPrev();
-             },
-
-             "down" : function(e){
-                 if(!this.isExpanded()){
-                     this.onTriggerClick();
-                 }else{
-                     this.inKeyMode = true;
-                     this.selectNext();
-                 }
-             },
-
-             "enter" : function(e){
- //                this.onViewClick();
-                 //return true;
-                 this.collapse();
-                 
-                 if(this.fireEvent("specialkey", this, e)){
-                     this.onViewClick(false);
-                 }
-                 
-                 return true;
-             },
-
-             "esc" : function(e){
-                 this.collapse();
-             },
-
-             "tab" : function(e){
-                 this.collapse();
-                 
-                 if(this.fireEvent("specialkey", this, e)){
-                     this.onViewClick(false);
-                 }
-                 
-                 return true;
-             },
-
-             scope : this,
-
-             doRelay : function(foo, bar, hname){
-                 if(hname == 'down' || this.scope.isExpanded()){
-                    return Roo.KeyNav.prototype.doRelay.apply(this, arguments);
-                 }
-                 return true;
-             },
-
-             forceKeyDown: true
-         });
-         
-    },
-    
-    onViewOver : function(e, t){
-        if(this.inKeyMode){ // prevent key nav and mouse over conflicts
-            return;
-        }
-        var item = this.view.findItemFromChild(t);
-        
-        if(item){
-            var index = this.view.indexOf(item);
-            this.select(index, false);
-        }
-    },
-    
-    onViewMove : function(e, t){
-        this.inKeyMode = false;
-    },
-    
-    onViewScroll : function(e, t){
-        
-        if(this.view.el.getScroll().top == 0 ||this.view.el.getScroll().top < this.view.el.dom.scrollHeight - this.view.el.dom.clientHeight || !this.hasFocus || !this.append || this.hasQuery){
-            return;
-        }
-        
-        this.hasQuery = true;
+        listWidth: undefined,
         
-        this.loading = this.list.select('.loading', true).first();
-        
-        if(this.loading === null){
-            this.list.createChild({
+        getAutoCreate : function()
+        {
+            var align = this.labelAlign || this.parentLabelAlign();
+            var id = Roo.id();
+            
+            var cfg = {
+                cls: 'form-group', //input-group
+                cn: []
+            };
+            
+            var input =  {
+                tag: 'input',
+                id : id,
+                type : 'tel',
+                cls : 'form-control tel-input',
+                autocomplete: 'new-password'
+                //placeholder : this.placeholder || '' 
+            };
+            
+            if (this.name) {
+                input.name = this.name;
+            }
+            
+            if (this.disabled) {
+                input.disabled=true;
+            }
+            
+            var flag_container = {
                 tag: 'div',
-                cls: 'loading roo-select2-more-results roo-select2-active',
-                html: 'Loading more results...'
-            });
+                cls: 'flag-container',
+                cn: [
+                    {
+                        tag: 'div',
+                        cls: 'flag'
+                    },
+                    {
+                        tag: 'div',
+                        cls: 'caret'
+                    }
+                ]
+            };
             
-            this.loading = this.list.select('.loading', true).first();
+            var box = {
+                tag: 'div',
+                cls: this.hasFeedback ? 'has-feedback' : '',
+                cn: [
+                    input
+                ]
+            };
             
-            this.loading.setVisibilityMode(Roo.Element.DISPLAY);
+            var container = {
+                cls: 'roo-select2-container input-group',
+                cn: [
+                    flag_container,
+                    box
+                ]
+            };
             
-            this.loading.hide();
-        }
-        
-        this.loading.show();
-        
-        var _combo = this;
-        
-        this.page++;
-        this.loadNext = true;
-        
-        (function() { _combo.doQuery(_combo.allQuery, true); }).defer(500);
+            if (this.fieldLabel.length) {
+                var indicator = {
+                    tag: 'i',
+                    tooltip: 'This field is required'
+                };
+                
+                var label = {
+                    tag: 'label',
+                    'for':  id,
+                    cls: 'control-label',
+                    cn: []
+                };
+                
+                var label_text = {
+                    tag: 'span',
+                    html: this.fieldLabel
+                };
+                
+                indicator.cls = 'roo-required-indicator text-danger fa fa-lg fa-star left-indicator';
+                label.cn = [
+                    indicator,
+                    label_text
+                ];
+                
+                if(this.indicatorpos == 'right') {
+                    indicator.cls = 'roo-required-indicator text-danger fa fa-lg fa-star right-indicator';
+                    label.cn = [
+                        label_text,
+                        indicator
+                    ];
+                }
+                
+                if(align == 'left') {
+                    container = {
+                        tag: 'div',
+                        cn: [
+                            container
+                        ]
+                    };
+                    
+                    if(this.labelWidth > 12){
+                        label.style = "width: " + this.labelWidth + 'px';
+                    }
+                    if(this.labelWidth < 13 && this.labelmd == 0){
+                        this.labelmd = this.labelWidth;
+                    }
+                    if(this.labellg > 0){
+                        label.cls += ' col-lg-' + this.labellg;
+                        input.cls += ' col-lg-' + (12 - this.labellg);
+                    }
+                    if(this.labelmd > 0){
+                        label.cls += ' col-md-' + this.labelmd;
+                        container.cls += ' col-md-' + (12 - this.labelmd);
+                    }
+                    if(this.labelsm > 0){
+                        label.cls += ' col-sm-' + this.labelsm;
+                        container.cls += ' col-sm-' + (12 - this.labelsm);
+                    }
+                    if(this.labelxs > 0){
+                        label.cls += ' col-xs-' + this.labelxs;
+                        container.cls += ' col-xs-' + (12 - this.labelxs);
+                    }
+                }
+            }
+            
+            cfg.cn = [
+                label,
+                container
+            ];
+            
+            
+            var settings = this;
+            
+            ['xs','sm','md','lg'].map(function(size){
+                if (settings[size]) {
+                    cfg.cls += ' col-' + size + '-' + settings[size];
+                }
+            });
+            
+            return cfg;
+        },
         
-        return;
-    },
-    
-    onTriggerClick : function(e)
-    {
-        Roo.log('trigger click');
+        initEvents : function()
+        {
+            this.createList();
+            
+            Roo.bootstrap.PhoneInput.superclass.initEvents.call(this);
+            
+            this.trigger = this.el.select('div.flag-container',true).first();
+            this.trigger.on("click", this.onTriggerClick, this, {preventDefault:true});
+        },
         
-        if(this.disabled || !this.triggerList){
-            return;
-        }
+        onTriggerClick : function(e)
+        {
+            Roo.log('trigger click');
+            
+            if(this.disabled || !this.triggerList){
+                return;
+            }
+            
+            this.page = 0;
+            this.loadNext = false;
+            
+            if(this.isExpanded()){
+                this.collapse();
+            }else {
+                this.hasFocus = true;
+                if(this.triggerAction == 'all') {
+                    //Original data flow: doQuery() -> store.load() -> proxy.load() -> store.loadRecords()
+                } else {
+                    
+                }
+                if (!this.blockFocus) {
+                    this.inputEl().focus();
+                }
+            }
+        },
         
-        this.page = 0;
-        this.loadNext = false;
+        isExpanded : function(){
+            return this.list.isVisible();
+        },
         
-        if(this.isExpanded()){
-            this.collapse();
-            if (!this.blockFocus) {
-                this.inputEl().focus();
+        collapse : function(){
+            if(!this.isExpanded()){
+                return;
             }
+            this.list.hide();
+            this.hasFocus = false;
+            Roo.get(document).un('mousedown', this.collapseIf, this);
+            Roo.get(document).un('mousewheel', this.collapseIf, this);
+            this.fireEvent('collapse', this);
             
-        }else {
-            this.hasFocus = true;
-            if(this.triggerAction == 'all') {
-                this.doQuery(this.allQuery, true);
-            } else {
-                this.doQuery(this.getRawValue());
-            }
-            if (!this.blockFocus) {
-                this.inputEl().focus();
+            this.validate();
+        },
+        
+        expand : function(){
+           
+            if(this.isExpanded() || !this.hasFocus){
+                return;
             }
-        }
-    }
-    
- });
-
- Roo.apply(Roo.bootstrap.PhoneInput, {
-     
-     /**
-      * iso2 and abbr for all countries
-      * @type Object
-      */
-     List : [
-         ["Afghanistan (‫افغانستان‬‎)", "af", "93"],
-         ["Albania (Shqipëri)", "al", "355"],
-         ["Algeria (‫الجزائر‬‎)", "dz", "213"],
-         ["American Samoa", "as", "1684"],
-         ["Andorra", "ad", "376"],
-         ["Angola", "ao", "244"],
-         ["Anguilla", "ai", "1264"],
-         ["Antigua and Barbuda", "ag", "1268"],
-         ["Argentina", "ar", "54"],
-         ["Armenia (Հայաստան)", "am", "374"],
-         ["Aruba", "aw", "297"],
-         ["Australia", "au", "61", 0],
-         ["Austria (Österreich)", "at", "43"],
-         ["Azerbaijan (Azərbaycan)", "az", "994"],
-         ["Bahamas", "bs", "1242"],
-         ["Bahrain (‫البحرين‬‎)", "bh", "973"],
-         ["Bangladesh (বাংলাদেশ)", "bd", "880"],
-         ["Barbados", "bb", "1246"],
-         ["Belarus (Беларусь)", "by", "375"],
-         ["Belgium (België)", "be", "32"],
-         ["Belize", "bz", "501"],
-         ["Benin (Bénin)", "bj", "229"],
-         ["Bermuda", "bm", "1441"],
-         ["Bhutan (འབྲུག)", "bt", "975"],
-         ["Bolivia", "bo", "591"],
-         ["Bosnia and Herzegovina (Босна и Херцеговина)", "ba", "387"],
-         ["Botswana", "bw", "267"],
-         ["Brazil (Brasil)", "br", "55"],
-         ["British Indian Ocean Territory", "io", "246"],
-         ["British Virgin Islands", "vg", "1284"],
-         ["Brunei", "bn", "673"],
-         ["Bulgaria (България)", "bg", "359"],
-         ["Burkina Faso", "bf", "226"],
-         ["Burundi (Uburundi)", "bi", "257"],
-         ["Cambodia (កម្ពុជា)", "kh", "855"],
-         ["Cameroon (Cameroun)", "cm", "237"],
-         ["Canada", "ca", "1", 1, ["204", "226", "236", "249", "250", "289", "306", "343", "365", "387", "403", "416", "418", "431", "437", "438", "450", "506", "514", "519", "548", "579", "581", "587", "604", "613", "639", "647", "672", "705", "709", "742", "778", "780", "782", "807", "819", "825", "867", "873", "902", "905"]],
-         ["Cape Verde (Kabu Verdi)", "cv", "238"],
-         ["Caribbean Netherlands", "bq", "599", 1],
-         ["Cayman Islands", "ky", "1345"],
-         ["Central African Republic (République centrafricaine)", "cf", "236"],
-         ["Chad (Tchad)", "td", "235"],
-         ["Chile", "cl", "56"],
-         ["China (中国)", "cn", "86"],
-         ["Christmas Island", "cx", "61", 2],
-         ["Cocos (Keeling) Islands", "cc", "61", 1],
-         ["Colombia", "co", "57"],
-         ["Comoros (‫جزر القمر‬‎)", "km", "269"],
-         ["Congo (DRC) (Jamhuri ya Kidemokrasia ya Kongo)", "cd", "243"],
-         ["Congo (Republic) (Congo-Brazzaville)", "cg", "242"],
-         ["Cook Islands", "ck", "682"],
-         ["Costa Rica", "cr", "506"],
-         ["Côte d’Ivoire", "ci", "225"],
-         ["Croatia (Hrvatska)", "hr", "385"],
-         ["Cuba", "cu", "53"],
-         ["Curaçao", "cw", "599", 0],
-         ["Cyprus (Κύπρος)", "cy", "357"],
-         ["Czech Republic (Česká republika)", "cz", "420"],
-         ["Denmark (Danmark)", "dk", "45"],
-         ["Djibouti", "dj", "253"],
-         ["Dominica", "dm", "1767"],
-         ["Dominican Republic (República Dominicana)", "do", "1", 2, ["809", "829", "849"]],
-         ["Ecuador", "ec", "593"],
-         ["Egypt (‫مصر‬‎)", "eg", "20"],
-         ["El Salvador", "sv", "503"],
-         ["Equatorial Guinea (Guinea Ecuatorial)", "gq", "240"],
-         ["Eritrea", "er", "291"],
-         ["Estonia (Eesti)", "ee", "372"],
-         ["Ethiopia", "et", "251"],
-         ["Falkland Islands (Islas Malvinas)", "fk", "500"],
-         ["Faroe Islands (Føroyar)", "fo", "298"],
-         ["Fiji", "fj", "679"],
-         ["Finland (Suomi)", "fi", "358", 0],
-         ["France", "fr", "33"],
-         ["French Guiana (Guyane française)", "gf", "594"],
-         ["French Polynesia (Polynésie française)", "pf", "689"],
-         ["Gabon", "ga", "241"],
-         ["Gambia", "gm", "220"],
-         ["Georgia (საქართველო)", "ge", "995"],
-         ["Germany (Deutschland)", "de", "49"],
-         ["Ghana (Gaana)", "gh", "233"],
-         ["Gibraltar", "gi", "350"],
-         ["Greece (Ελλάδα)", "gr", "30"],
-         ["Greenland (Kalaallit Nunaat)", "gl", "299"],
-         ["Grenada", "gd", "1473"],
-         ["Guadeloupe", "gp", "590", 0],
-         ["Guam", "gu", "1671"],
-         ["Guatemala", "gt", "502"],
-         ["Guernsey", "gg", "44", 1],
-         ["Guinea (Guinée)", "gn", "224"],
-         ["Guinea-Bissau (Guiné Bissau)", "gw", "245"],
-         ["Guyana", "gy", "592"],
-         ["Haiti", "ht", "509"],
-         ["Honduras", "hn", "504"],
-         ["Hong Kong (香港)", "hk", "852"],
-         ["Hungary (Magyarország)", "hu", "36"],
-         ["Iceland (Ísland)", "is", "354"],
-         ["India (भारत)", "in", "91"],
-         ["Indonesia", "id", "62"],
-         ["Iran (‫ایران‬‎)", "ir", "98"],
-         ["Iraq (‫العراق‬‎)", "iq", "964"],
-         ["Ireland", "ie", "353"],
-         ["Isle of Man", "im", "44", 2],
-         ["Israel (‫ישראל‬‎)", "il", "972"],
-         ["Italy (Italia)", "it", "39", 0],
-         ["Jamaica", "jm", "1876"],
-         ["Japan (日本)", "jp", "81"],
-         ["Jersey", "je", "44", 3],
-         ["Jordan (‫الأردن‬‎)", "jo", "962"],
-         ["Kazakhstan (Казахстан)", "kz", "7", 1],
-         ["Kenya", "ke", "254"],
-         ["Kiribati", "ki", "686"],
-         ["Kosovo", "xk", "383"],
-         ["Kuwait (‫الكويت‬‎)", "kw", "965"],
-         ["Kyrgyzstan (Кыргызстан)", "kg", "996"],
-         ["Laos (ລາວ)", "la", "856"],
-         ["Latvia (Latvija)", "lv", "371"],
-         ["Lebanon (‫لبنان‬‎)", "lb", "961"],
-         ["Lesotho", "ls", "266"],
-         ["Liberia", "lr", "231"],
-         ["Libya (‫ليبيا‬‎)", "ly", "218"],
-         ["Liechtenstein", "li", "423"],
-         ["Lithuania (Lietuva)", "lt", "370"],
-         ["Luxembourg", "lu", "352"],
-         ["Macau (澳門)", "mo", "853"],
-         ["Macedonia (FYROM) (Македонија)", "mk", "389"],
-         ["Madagascar (Madagasikara)", "mg", "261"],
-         ["Malawi", "mw", "265"],
-         ["Malaysia", "my", "60"],
-         ["Maldives", "mv", "960"],
-         ["Mali", "ml", "223"],
-         ["Malta", "mt", "356"],
-         ["Marshall Islands", "mh", "692"],
-         ["Martinique", "mq", "596"],
-         ["Mauritania (‫موريتانيا‬‎)", "mr", "222"],
-         ["Mauritius (Moris)", "mu", "230"],
-         ["Mayotte", "yt", "262", 1],
-         ["Mexico (México)", "mx", "52"],
-         ["Micronesia", "fm", "691"],
-         ["Moldova (Republica Moldova)", "md", "373"],
-         ["Monaco", "mc", "377"],
-         ["Mongolia (Монгол)", "mn", "976"],
-         ["Montenegro (Crna Gora)", "me", "382"],
-         ["Montserrat", "ms", "1664"],
-         ["Morocco (‫المغرب‬‎)", "ma", "212", 0],
-         ["Mozambique (Moçambique)", "mz", "258"],
-         ["Myanmar (Burma) (မြန်မာ)", "mm", "95"],
-         ["Namibia (Namibië)", "na", "264"],
-         ["Nauru", "nr", "674"],
-         ["Nepal (नेपाल)", "np", "977"],
-         ["Netherlands (Nederland)", "nl", "31"],
-         ["New Caledonia (Nouvelle-Calédonie)", "nc", "687"],
-         ["New Zealand", "nz", "64"],
-         ["Nicaragua", "ni", "505"],
-         ["Niger (Nijar)", "ne", "227"],
-         ["Nigeria", "ng", "234"],
-         ["Niue", "nu", "683"],
-         ["Norfolk Island", "nf", "672"],
-         ["North Korea (조선 민주주의 인민 공화국)", "kp", "850"],
-         ["Northern Mariana Islands", "mp", "1670"],
-         ["Norway (Norge)", "no", "47", 0],
-         ["Oman (‫عُمان‬‎)", "om", "968"],
-         ["Pakistan (‫پاکستان‬‎)", "pk", "92"],
-         ["Palau", "pw", "680"],
-         ["Palestine (‫فلسطين‬‎)", "ps", "970"],
-         ["Panama (Panamá)", "pa", "507"],
-         ["Papua New Guinea", "pg", "675"],
-         ["Paraguay", "py", "595"],
-         ["Peru (Perú)", "pe", "51"],
-         ["Philippines", "ph", "63"],
-         ["Poland (Polska)", "pl", "48"],
-         ["Portugal", "pt", "351"],
-         ["Puerto Rico", "pr", "1", 3, ["787", "939"]],
-         ["Qatar (‫قطر‬‎)", "qa", "974"],
-         ["Réunion (La Réunion)", "re", "262", 0],
-         ["Romania (România)", "ro", "40"],
-         ["Russia (Россия)", "ru", "7", 0],
-         ["Rwanda", "rw", "250"],
-         ["Saint Barthélemy", "bl", "590", 1],
-         ["Saint Helena", "sh", "290"],
-         ["Saint Kitts and Nevis", "kn", "1869"],
-         ["Saint Lucia", "lc", "1758"],
-         ["Saint Martin (Saint-Martin (partie française))", "mf", "590", 2],
-         ["Saint Pierre and Miquelon (Saint-Pierre-et-Miquelon)", "pm", "508"],
-         ["Saint Vincent and the Grenadines", "vc", "1784"],
-         ["Samoa", "ws", "685"],
-         ["San Marino", "sm", "378"],
-         ["São Tomé and Príncipe (São Tomé e Príncipe)", "st", "239"],
-         ["Saudi Arabia (‫المملكة العربية السعودية‬‎)", "sa", "966"],
-         ["Senegal (Sénégal)", "sn", "221"],
-         ["Serbia (Србија)", "rs", "381"],
-         ["Seychelles", "sc", "248"],
-         ["Sierra Leone", "sl", "232"],
-         ["Singapore", "sg", "65"],
-         ["Sint Maarten", "sx", "1721"],
-         ["Slovakia (Slovensko)", "sk", "421"],
-         ["Slovenia (Slovenija)", "si", "386"],
-         ["Solomon Islands", "sb", "677"],
-         ["Somalia (Soomaaliya)", "so", "252"],
-         ["South Africa", "za", "27"],
-         ["South Korea (대한민국)", "kr", "82"],
-         ["South Sudan (‫جنوب السودان‬‎)", "ss", "211"],
-         ["Spain (España)", "es", "34"],
-         ["Sri Lanka (ශ්‍රී ලංකාව)", "lk", "94"],
-         ["Sudan (‫السودان‬‎)", "sd", "249"],
-         ["Suriname", "sr", "597"],
-         ["Svalbard and Jan Mayen", "sj", "47", 1],
-         ["Swaziland", "sz", "268"],
-         ["Sweden (Sverige)", "se", "46"],
-         ["Switzerland (Schweiz)", "ch", "41"],
-         ["Syria (‫سوريا‬‎)", "sy", "963"],
-         ["Taiwan (台灣)", "tw", "886"],
-         ["Tajikistan", "tj", "992"],
-         ["Tanzania", "tz", "255"],
-         ["Thailand (ไทย)", "th", "66"],
-         ["Timor-Leste", "tl", "670"],
-         ["Togo", "tg", "228"],
-         ["Tokelau", "tk", "690"],
-         ["Tonga", "to", "676"],
-         ["Trinidad and Tobago", "tt", "1868"],
-         ["Tunisia (‫تونس‬‎)", "tn", "216"],
-         ["Turkey (Türkiye)", "tr", "90"],
-         ["Turkmenistan", "tm", "993"],
-         ["Turks and Caicos Islands", "tc", "1649"],
-         ["Tuvalu", "tv", "688"],
-         ["U.S. Virgin Islands", "vi", "1340"],
-         ["Uganda", "ug", "256"],
-         ["Ukraine (Україна)", "ua", "380"],
-         ["United Arab Emirates (‫الإمارات العربية المتحدة‬‎)", "ae", "971"],
-         ["United Kingdom", "gb", "44", 0],
-         ["United States", "us", "1", 0],
-         ["Uruguay", "uy", "598"],
-         ["Uzbekistan (Oʻzbekiston)", "uz", "998"],
-         ["Vanuatu", "vu", "678"],
-         ["Vatican City (Città del Vaticano)", "va", "39", 1],
-         ["Venezuela", "ve", "58"],
-         ["Vietnam (Việt Nam)", "vn", "84"],
-         ["Wallis and Futuna (Wallis-et-Futuna)", "wf", "681"],
-         ["Western Sahara (‫الصحراء الغربية‬‎)", "eh", "212", 1],
-         ["Yemen (‫اليمن‬‎)", "ye", "967"],
-         ["Zambia", "zm", "260"],
-         ["Zimbabwe", "zw", "263"],
-         ["Åland Islands", "ax", "358", 1]
-     ]
- });
\ No newline at end of file
+            
+            var lw = this.listWidth || Math.max(this.inputEl().getWidth(), this.minListWidth);
+            this.list.setWidth(lw);
+            
+            Roo.log('expand');
+            
+            this.list.show();
+            
+            this.restrictHeight();
+            
+            Roo.get(document).on('mousedown', this.collapseIf, this);
+            Roo.get(document).on('mousewheel', this.collapseIf, this);
+            
+            this.fireEvent('expand', this);
+        },
+        
+        restrictHeight : function(){
+            //this.innerList.dom.style.height = '';
+            //var inner = this.innerList.dom;
+            //var h = Math.max(inner.clientHeight, inner.offsetHeight, inner.scrollHeight);
+            //this.innerList.setHeight(h < this.maxHeight ? 'auto' : this.maxHeight);
+            //this.list.beginUpdate();
+            //this.list.setHeight(this.innerList.getHeight()+this.list.getFrameWidth('tb')+(this.resizable?this.handleHeight:0)+this.assetHeight);
+            this.list.alignTo(this.inputEl(), this.listAlign);
+            this.list.alignTo(this.inputEl(), this.listAlign);
+            //this.list.endUpdate();
+        }
+});
\ No newline at end of file