Roo/bootstrap/ComboBox.js

[roojs1] / Roo / bootstrap / ComboBox.js

diff --git a/Roo/bootstrap/ComboBox.js b/Roo/bootstrap/ComboBox.js
index d5fa5f5..e97c140 100644 (file)
--- a/Roo/bootstrap/ComboBox.js
+++ b/Roo/bootstrap/ComboBox.js
@@ -10,6 +10,7 @@
  * @cfg {Boolean} append (true|false) default false
  * @cfg {Boolean} autoFocus (true|false) auto focus the first item, default true
  * @cfg {Boolean} tickable ComboBox with tickable selections (true|false), default false
+ * @cfg {Boolean} editNotList allow text type,but not show pull down, default false
  * @cfg {String} btnPosition set the position of the trigger button (left | right) default right
  * @constructor
  * Create a new ComboBox.
@@ -270,7 +271,7 @@ Roo.extend(Roo.bootstrap.ComboBox, Roo.bootstrap.TriggerField, {
     autoFocus : true,
     tickable : false,
     btnPosition : 'right',
-    
+    editNotList : false,
     // element that contains real text value.. (when hidden is used..)
     
     getAutoCreate : function()
@@ -296,23 +297,43 @@ Roo.extend(Roo.bootstrap.ComboBox, Roo.bootstrap.TriggerField, {
         };
         
         
-        var button = {
-            tag : 'button',
-            type : 'button',
-            cls : 'btn btn-link pull-' + this.btnPosition,
-            html : 'Edit'
+        var buttons = {
+            tag : 'div',
+            cls : 'tickable-buttons',
+            cn : [
+                {
+                    tag : 'button',
+                    type : 'button',
+                    cls : 'btn btn-link btn-edit pull-' + this.btnPosition,
+                    html : 'Edit'
+                },
+                {
+                    tag : 'button',
+                    type : 'button',
+                    name : 'ok',
+                    cls : 'btn btn-link btn-ok pull-' + this.btnPosition,
+                    html : 'Done'
+                },
+                {
+                    tag : 'button',
+                    type : 'button',
+                    name : 'cancel',
+                    cls : 'btn btn-link btn-cancel pull-' + this.btnPosition,
+                    html : 'Cancel'
+                }
+            ]
         };
         
-        if (this.name) {
-            button.name = this.name;
-        }
-        if (this.size) {
-            button.cls += ' btn-' + this.size;
-        }
-        
-        if (this.disabled) {
-            button.disabled=true;
-        }
+        var _this = this;
+        Roo.each(buttons.cn, function(c){
+            if (_this.size) {
+                c.cls += ' btn-' + _this.size;
+            }
+
+            if (_this.disabled) {
+                c.disabled = true;
+            }
+        });
         
         var box = {
             tag: 'div',
@@ -331,7 +352,7 @@ Roo.extend(Roo.bootstrap.ComboBox, Roo.bootstrap.TriggerField, {
                             cls: 'select2-search-field',
                             cn: [
 
-                                button
+                                buttons
                             ]
                         }
                     ]
@@ -659,39 +680,27 @@ Roo.extend(Roo.bootstrap.ComboBox, Roo.bootstrap.TriggerField, {
         
         this.list = this.el.select('ul.dropdown-menu',true).first();
         
-        this.footer = this.list.findParent('.select2-container', false, true).createChild({
-            tag : 'div',
-            cls : 'tickable-footer',
-            cn : [
-                {
-                    tag : 'button',
-                    type : 'button',
-                    name : 'ok',
-                    cls : 'btn btn-link pull-right',
-                    html : 'Done'
-                },
-                {
-                    tag : 'button',
-                    type : 'button',
-                    name : 'cancel',
-                    cls : 'btn btn-link btn-cancel pull-right',
-                    html : 'Cancel'
-                }
-            ]
-        });
+        this.choices = this.el.select('ul.select2-choices', true).first();
+        this.searchField = this.el.select('ul li.select2-search-field', true).first();
+        if(this.editNotList){
+            this.searchField.on("click", this.onSearchFieldClick, this, {preventDefault:true});
+        }
+         
+        this.trigger = this.el.select('.tickable-buttons > .btn-edit', true).first();
+        this.trigger.on("click", this.onTickableTriggerClick, this, {preventDefault:true});
         
-        this.footer.hide();
+        this.okBtn = this.el.select('.tickable-buttons > .btn-ok', true).first();
+        this.cancelBtn = this.el.select('.tickable-buttons > .btn-cancel', true).first();
         
-        var _this = this;
-        Roo.each(this.footer.select('button', true).elements, function(el){
-            el.on('click', _this.onTickableFooterButtonClick, _this, el);
-        })
+        this.okBtn.on('click', this.onTickableFooterButtonClick, this, this.okBtn);
+        this.cancelBtn.on('click', this.onTickableFooterButtonClick, this, this.cancelBtn);
         
-        this.choices = this.el.select('ul.select2-choices', true).first();
-        this.searchField = this.el.select('ul li.select2-search-field', true).first();
-        this.trigger = this.el.select('.select2-search-field > button',true).first();
+        this.trigger.setVisibilityMode(Roo.Element.DISPLAY);
+        this.okBtn.setVisibilityMode(Roo.Element.DISPLAY);
+        this.cancelBtn.setVisibilityMode(Roo.Element.DISPLAY);
         
-        this.trigger.on("click", this.onTriggerClick, this, {preventDefault:true});
+        this.okBtn.hide();
+        this.cancelBtn.hide();
         
         var _this = this;
         
@@ -798,9 +807,6 @@ Roo.extend(Roo.bootstrap.ComboBox, Roo.bootstrap.TriggerField, {
             this.list.dom.innerHTML  = '';
         }
         
-        if(this.footer){
-            this.footer.dom.innerHTML = '';
-        }
         if(this.store){
             this.store.un('beforeload', this.onBeforeLoad, this);
             this.store.un('load', this.onLoad, this);
@@ -1354,10 +1360,13 @@ Roo.extend(Roo.bootstrap.ComboBox, Roo.bootstrap.TriggerField, {
             return;
         }
         
+        this.hasFocus = false;
+        
         this.list.hide();
         
         if(this.tickable){
-            this.footer.hide();
+            this.okBtn.hide();
+            this.cancelBtn.hide();
             this.trigger.show();
         }
         
@@ -1378,6 +1387,10 @@ Roo.extend(Roo.bootstrap.ComboBox, Roo.bootstrap.TriggerField, {
             //e.stopPropagation();
             return;
         }
+        
+        if(this.tickable){
+            this.onTickableFooterButtonClick(e, false, false);
+        }
 
         this.collapse();
         
@@ -1399,11 +1412,8 @@ Roo.extend(Roo.bootstrap.ComboBox, Roo.bootstrap.TriggerField, {
             
             this.tickItems = Roo.apply([], this.item);
             
-            (function(){
-                this.footer.alignTo(this.list, 'tl-bl?'); 
-                this.footer.show();
-            }).defer(10, this);
-            
+            this.okBtn.show();
+            this.cancelBtn.show();
             this.trigger.hide();
             
         }
@@ -1419,7 +1429,7 @@ Roo.extend(Roo.bootstrap.ComboBox, Roo.bootstrap.TriggerField, {
 
     // private
     // Implements the default empty TriggerField.onTriggerClick function
-    onTriggerClick : function()
+    onTriggerClick : function(e)
     {
         Roo.log('trigger click');
         
@@ -1427,11 +1437,6 @@ Roo.extend(Roo.bootstrap.ComboBox, Roo.bootstrap.TriggerField, {
             return;
         }
         
-        if(this.tickable){
-            this.onTickableTriggerClick();
-            return;
-        }
-        
         this.page = 0;
         this.loadNext = false;
         
@@ -1454,8 +1459,29 @@ Roo.extend(Roo.bootstrap.ComboBox, Roo.bootstrap.TriggerField, {
         }
     },
     
-    onTickableTriggerClick : function()
+    onTickableTriggerClick : function(e)
+    {
+        if(this.disabled){
+            return;
+        }
+        
+        this.page = 0;
+        this.loadNext = false;
+        this.hasFocus = true;
+        
+        if(this.triggerAction == 'all') {
+            this.doQuery(this.allQuery, true);
+        } else {
+            this.doQuery(this.getRawValue());
+        }
+    },
+    
+    onSearchFieldClick : function(e)
     {
+        if(this.hasFocus || this.disabled || e.getTarget().nodeName.toLowerCase() == 'button'){
+            return;
+        }
+        
         this.page = 0;
         this.loadNext = false;
         this.hasFocus = true;
@@ -1668,7 +1694,7 @@ Roo.extend(Roo.bootstrap.ComboBox, Roo.bootstrap.TriggerField, {
     {
         e.preventDefault();
         
-        if(btn.name == 'cancel'){
+        if(btn && btn.name == 'cancel'){
             this.tickItems = Roo.apply([], this.item);
             this.collapse();
             return;