sync
[roojs1] / Roo / bootstrap / ComboBox.js
index 3f8b342..a5b7622 100644 (file)
@@ -16,6 +16,7 @@
  * @cfg {Boolean} animate default true
  * @cfg {Boolean} emptyResultText only for touch device
  * @cfg {String} triggerText multiple combobox trigger button text default 'Select'
+ * @cfg {String} emptyTitle default ''
  * @constructor
  * Create a new ComboBox.
  * @param {Object} config Configuration options
@@ -336,13 +337,14 @@ Roo.extend(Roo.bootstrap.ComboBox, Roo.bootstrap.TriggerField, {
     animate : true,
     emptyResultText: 'Empty',
     triggerText : 'Select',
+    emptyTitle : '',
     
     // element that contains real text value.. (when hidden is used..)
     
     getAutoCreate : function()
-    {
+    {   
         var cfg = false;
-        
+        //render
         /*
          * Render classic select for iso
          */
@@ -454,7 +456,6 @@ Roo.extend(Roo.bootstrap.ComboBox, Roo.bootstrap.TriggerField, {
                             tag: 'li',
                             cls: 'roo-select2-search-field',
                             cn: [
-
                                 buttons
                             ]
                         }
@@ -485,7 +486,10 @@ Roo.extend(Roo.bootstrap.ComboBox, Roo.bootstrap.TriggerField, {
             combobox.cn.push(feedback);
         }
         
-        if (align ==='left' && this.fieldLabel.length && this.labelWidth) {
+        
+        if (align ==='left' && this.fieldLabel.length) {
+            
+            cfg.cls += ' roo-form-group-label-left';
             
             cfg.cn = [
                 {
@@ -496,18 +500,22 @@ Roo.extend(Roo.bootstrap.ComboBox, Roo.bootstrap.TriggerField, {
                 {
                     tag: 'label',
                     'for' :  id,
-                    cls : 'control-label col-sm-' + this.labelWidth,
+                    cls : 'control-label',
                     html : this.fieldLabel
 
                 },
                 {
-                    cls : "col-sm-" + (12 - this.labelWidth)
+                    cls : ""
                     cn: [
                         combobox
                     ]
                 }
 
             ];
+            
+            var labelCfg = cfg.cn[1];
+            var contentCfg = cfg.cn[2];
+            
 
             if(this.indicatorpos == 'right'){
                 
@@ -515,24 +523,61 @@ Roo.extend(Roo.bootstrap.ComboBox, Roo.bootstrap.TriggerField, {
                     {
                         tag: 'label',
                         'for' :  id,
-                        cls : 'control-label col-sm-' + this.labelWidth,
-                        html : this.fieldLabel
-
-                    },
-                    {
-                        tag : 'i',
-                        cls : 'roo-required-indicator right-indicator text-danger fa fa-lg fa-star',
-                        tooltip : 'This field is required'
+                        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 : "col-sm-" + (12 - this.labelWidth), 
+                        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);
             }
                 
                 
@@ -548,33 +593,25 @@ Roo.extend(Roo.bootstrap.ComboBox, Roo.bootstrap.TriggerField, {
                         tag: 'label',
                         //cls : 'input-group-addon',
                         html : this.fieldLabel
-                        
                     },
-                    
                     combobox
-                    
                 ];
                 
                 if(this.indicatorpos == 'right'){
-                    
                     cfg.cn = [
                         {
                             tag: 'label',
                             //cls : 'input-group-addon',
                             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 {
@@ -611,6 +648,7 @@ Roo.extend(Roo.bootstrap.ComboBox, Roo.bootstrap.TriggerField, {
         }
         
         this.store = Roo.factory(this.store, Roo.data);
+        this.store.parent = this;
         
         // if we are building from html. then this element is so complex, that we can not really
         // use the rendered HTML.
@@ -744,7 +782,6 @@ Roo.extend(Roo.bootstrap.ComboBox, Roo.bootstrap.TriggerField, {
         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);
@@ -1001,6 +1038,13 @@ Roo.extend(Roo.bootstrap.ComboBox, Roo.bootstrap.TriggerField, {
             this.tickableInputEl().on("keyup", this.onKeyUp, this);
         }
         
+        this.indicator = this.indicatorEl();
+        
+        if(this.indicator){
+            this.indicator.setVisibilityMode(Roo.Element.DISPLAY);
+            this.indicator.hide();
+        }
+        
     },
 
     onDestroy : function(){
@@ -1102,8 +1146,9 @@ Roo.extend(Roo.bootstrap.ComboBox, Roo.bootstrap.TriggerField, {
         if(typeof(this.loading) !== 'undefined' && this.loading !== null){
             this.loading.hide();
         }
-             
+        
         if(this.store.getCount() > 0){
+            
             this.expand();
             this.restrictHeight();
             if(this.lastQuery == this.allQuery){
@@ -1943,7 +1988,7 @@ Roo.extend(Roo.bootstrap.ComboBox, Roo.bootstrap.TriggerField, {
                 {
                     tag: 'a',
                     href: '#',
-                    cls: 'roo-select2-search-choice-close',
+                    cls: 'roo-select2-search-choice-close fa fa-times',
                     tabindex: '-1'
                 }
             ]
@@ -2274,13 +2319,8 @@ Roo.extend(Roo.bootstrap.ComboBox, Roo.bootstrap.TriggerField, {
         
         var align = this.labelAlign || this.parentLabelAlign();
         
-        cfg.cn = combobox;
-        
-        if(this.fieldLabel.length && this.labelWidth){
-            
-            var lw = align === 'left' ? ('col-sm' + this.labelWidth) : '';
-            var cw = align === 'left' ? ('col-sm' + (12 - this.labelWidth)) : '';
-            
+        if (align ==='left' && this.fieldLabel.length) {
+
             cfg.cn = [
                 {
                    tag : 'i',
@@ -2289,41 +2329,125 @@ Roo.extend(Roo.bootstrap.ComboBox, Roo.bootstrap.TriggerField, {
                 },
                 {
                     tag: 'label',
-                    cls : 'control-label ' + lw,
+                    cls : 'control-label',
                     html : this.fieldLabel
 
                 },
                 {
-                    cls : cw
+                    cls : ''
                     cn: [
                         combobox
                     ]
                 }
             ];
             
+            var labelCfg = cfg.cn[1];
+            var contentCfg = cfg.cn[2];
+            
+
             if(this.indicatorpos == 'right'){
                 cfg.cn = [
                     {
                         tag: 'label',
-                        cls : 'control-label ' + lw,
-                        html : this.fieldLabel
-
+                        cls : 'control-label',
+                        html : this.fieldLabel,
+                        cn : [
+                            {
+                               tag : 'i',
+                               cls : 'roo-required-indicator right-indicator text-danger fa fa-lg fa-star',
+                               tooltip : 'This field is required'
+                            }
+                        ]
                     },
                     {
-                       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[2];
+            
+            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) {
+            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 : 'control-label',
+                    html : this.fieldLabel
+
+                },
+                {
+                    cls : '', 
+                    cn: [
+                        combobox
+                    ]
+                }
+            ];
+            
+            if(this.indicatorpos == 'right'){
+                cfg.cn = [
+                    {
+                        tag: 'label',
+                        cls : 'control-label',
+                        html : this.fieldLabel,
+                        cn : [
+                            {
+                               tag : 'i',
+                               cls : 'roo-required-indicator right-indicator text-danger fa fa-lg fa-star',
+                               tooltip : 'This field is required'
+                            }
+                        ]
                     },
                     {
-                        cls : cw
+                        cls : ''
                         cn: [
                             combobox
                         ]
                     }
                 ];
             }
+        } else {
+            cfg.cn = combobox;    
         }
         
+        
         var settings = this;
         
         ['xs','sm','md','lg'].map(function(size){