roojs-bootstrap.js
[roojs1] / roojs-bootstrap-debug.js
index a133b54..22c0d54 100644 (file)
@@ -28,6 +28,20 @@ Roo.bootstrap = Roo.bootstrap || {};
 
 Roo.bootstrap.Component = function(config){
     Roo.bootstrap.Component.superclass.constructor.call(this, config);
+       
+    this.addEvents({
+        /**
+         * @event childrenrendered
+         * Fires when the children have been rendered..
+         * @param {Roo.bootstrap.Component} this
+         */
+        "childrenrendered" : true
+        
+        
+        
+    });
+    
+    
 };
 
 Roo.extend(Roo.bootstrap.Component, Roo.BoxComponent,  {
@@ -193,7 +207,12 @@ Roo.extend(Roo.bootstrap.Component, Roo.BoxComponent,  {
         }
         
         var ret = false;
+        if (!build_from_html) {
+            return false;
+        }
         
+        // this i think handles overlaying multiple children of the same type
+        // with the sam eelement.. - which might be buggy..
         while (true) {
             var echild =self_cntr_el ? self_cntr_el.child('>*[xtype]') : false;
             
@@ -238,12 +257,15 @@ Roo.extend(Roo.bootstrap.Component, Roo.BoxComponent,  {
             // that match this xtype..
             // note - when we render we create these as well..
             // so we should check to see if body has xtype set.
-            if (Roo.get(document.body).attr('xtype') == 'Roo.bootstrap.Body') {
+            if (build_from_html && Roo.get(document.body).attr('xtype') == 'Roo.bootstrap.Body') {
                
                 var self_cntr_el = Roo.get(this[cntr](false));
                 var echild =self_cntr_el ? self_cntr_el.child('>*[xtype]') : false;
-                
-                
+                if (echild) { 
+                    Roo.log(Roo.XComponent.build_from_html);
+                    Roo.log("got echild:");
+                    Roo.log(echild);
+                }
                 // there is a scenario where some of the child elements are flexy:if (and all of the same type)
                 // and are not displayed -this causes this to use up the wrong element when matching.
                 // at present the only work around for this is to nest flexy:if elements in another element that is always rendered.
@@ -316,11 +338,11 @@ Roo.extend(Roo.bootstrap.Component, Roo.BoxComponent,  {
         }
         
         cn.items = nitems;
-       
+        
+        this.fireEvent('childrenrendered', this);
+        
         return cn;
-    }
-    
-    
+    } 
     
     
 });
@@ -487,6 +509,7 @@ Roo.bootstrap.Button = function(config){
         /**
          * @event click
          * When a butotn is pressed
+         * @param {Roo.bootstrap.Button} this
          * @param {Roo.EventObject} e
          */
         "click" : true,
@@ -1369,9 +1392,11 @@ Roo.extend(Roo.bootstrap.Header, Roo.bootstrap.Component,  {
     
     getAutoCreate : function(){
         
+        
+        
         var cfg = {
             tag: 'h' + (1 *this.level),
-            html: this.html || 'fill in html'
+            html: this.html || ''
         } ;
         
         return cfg;
@@ -1946,6 +1971,7 @@ Roo.bootstrap.MenuItem = function(config){
         /**
          * @event click
          * The raw click event for the entire grid.
+         * @param {Roo.bootstrap.MenuItem} this
          * @param {Roo.EventObject} e
          */
         "click" : true
@@ -2051,36 +2077,16 @@ Roo.extend(Roo.bootstrap.MenuSeparator, Roo.bootstrap.Component,  {
 
  
 /*
-<div class="modal fade">
-  <div class="modal-dialog">
-    <div class="modal-content">
-      <div class="modal-header">
-        <button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button>
-        <h4 class="modal-title">Modal title</h4>
-      </div>
-      <div class="modal-body">
-        <p>One fine body&hellip;</p>
-      </div>
-      <div class="modal-footer">
-        <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
-        <button type="button" class="btn btn-primary">Save changes</button>
-      </div>
-    </div><!-- /.modal-content -->
-  </div><!-- /.modal-dialog -->
-</div><!-- /.modal -->
+* Licence: LGPL
 */
-/*
- * - LGPL
- *
- * page contgainer.
- * 
- */
 
 /**
  * @class Roo.bootstrap.Modal
  * @extends Roo.bootstrap.Component
  * Bootstrap Modal class
  * @cfg {String} title Title of dialog
+ * @cfg {String} html - the body of the dialog (for simple ones) - you can also use template..
+ * @cfg {Roo.Template} tmpl - a template with variables. to use it, add a handler in show:method  adn 
  * @cfg {Boolean} specificTitle default false
  * @cfg {Array} buttons Array of buttons or standard button set..
  * @cfg {String} buttonPosition (left|right|center) default right
@@ -2104,6 +2110,11 @@ Roo.bootstrap.Modal = function(config){
         "btnclick" : true
     });
     this.buttons = this.buttons || [];
+     
+    if (this.tmpl) {
+        this.tmpl = Roo.factory(this.tmpl);
+    }
+    
 };
 
 Roo.extend(Roo.bootstrap.Modal, Roo.bootstrap.Component,  {
@@ -2113,7 +2124,10 @@ Roo.extend(Roo.bootstrap.Modal, Roo.bootstrap.Component,  {
     buttons : false,
     
     // set on load...
-    body:  false,
+     
+    html: false,
+    
+    tmp: false,
     
     specificTitle: false,
     
@@ -2123,6 +2137,14 @@ Roo.extend(Roo.bootstrap.Modal, Roo.bootstrap.Component,  {
     
     animate : true,
     
+    
+     // private
+    bodyEl:  false,
+    footerEl:  false,
+    titleEl:  false,
+    closeEl:  false,
+    
+    
     onRender : function(ct, position)
     {
         Roo.bootstrap.Component.superclass.onRender.call(this, ct, position);
@@ -2146,12 +2168,21 @@ Roo.extend(Roo.bootstrap.Modal, Roo.bootstrap.Component,  {
         }
         //var type = this.el.dom.type;
         
+        
+        
+        
         if(this.tabIndex !== undefined){
             this.el.dom.setAttribute('tabIndex', this.tabIndex);
         }
         
         
+        this.bodyEl = this.el.select('.modal-body',true).first();
+        this.closeEl = this.el.select('.modal-header .close', true).first();
+        this.footerEl = this.el.select('.modal-footer',true).first();
+        this.titleEl = this.el.select('.modal-title',true).first();
+        
         
+         
         this.maskEl = Roo.DomHelper.append(document.body, {tag: "div", cls:"x-dlg-mask"}, true);
         this.maskEl.enableDisplayMode("block");
         this.maskEl.hide();
@@ -2186,9 +2217,9 @@ Roo.extend(Roo.bootstrap.Modal, Roo.bootstrap.Component,  {
         
         this.items = nitems;
         
-        this.body = this.el.select('.modal-body',true).first();
-        this.close = this.el.select('.modal-header .close', true).first();
-        this.footer = this.el.select('.modal-footer',true).first();
+        // where are these used - they used to be body/close/footer
+        
+       
         this.initEvents();
         //this.el.addClass([this.fieldClass, this.cls]);
         
@@ -2267,7 +2298,7 @@ Roo.extend(Roo.bootstrap.Modal, Roo.bootstrap.Component,  {
     },
     getChildContainer : function() {
          
-         return this.el.select('.modal-body',true).first();
+         return this.bodyEl;
         
     },
     getButtonContainer : function() {
@@ -2276,9 +2307,10 @@ Roo.extend(Roo.bootstrap.Modal, Roo.bootstrap.Component,  {
     },
     initEvents : function()
     {
-        this.el.select('.modal-header .close').on('click', this.hide, this);
-//        
-//        this.addxtype(this);
+        if (this.allow_close) {
+            this.closeEl.on('click', this.hide, this);
+        }
+
     },
     show : function() {
         
@@ -2295,6 +2327,11 @@ Roo.extend(Roo.bootstrap.Modal, Roo.bootstrap.Component,  {
             this.el.addClass('in');
         }
         
+        // not sure how we can show data in here.. 
+        //if (this.tmpl) {
+        //    this.getChildContainer().dom.innerHTML = this.tmpl.applyTemplate(this);
+        //}
+        
         Roo.get(document.body).addClass("x-body-masked");
         this.maskEl.setSize(Roo.lib.Dom.getViewWidth(true), Roo.lib.Dom.getViewHeight(true));
         this.maskEl.show();
@@ -2356,10 +2393,33 @@ Roo.extend(Roo.bootstrap.Modal, Roo.bootstrap.Component,  {
         //Roo.log([a,b,c]);
         this.fireEvent('btnclick', btn.name, e);
     },
+     /**
+     * Set the title of the Dialog
+     * @param {String} str new Title
+     */
     setTitle: function(str) {
-        this.el.select('.modal-title',true).first().dom.innerHTML = str;
-        
+        this.titleEl.dom.innerHTML = str;    
+    },
+    /**
+     * Set the body of the Dialog
+     * @param {String} str new Title
+     */
+    setBody: function(str) {
+        this.bodyEl.dom.innerHTML = str;    
+    },
+    /**
+     * Set the body of the Dialog using the template
+     * @param {Obj} data - apply this data to the template and replace the body contents.
+     */
+    applyBody: function(obj)
+    {
+        if (!this.tmpl) {
+            Roo.log("Error - using apply Body without a template");
+            //code
+        }
+        this.tmpl.overwrite(this.bodyEl, obj);
     }
+    
 });
 
 
@@ -2424,6 +2484,7 @@ Roo.apply(Roo.bootstrap.Modal,  {
             }
         ]
 });
  /*
  * - LGPL
  *
@@ -2490,7 +2551,7 @@ Roo.bootstrap.MessageBox = function(){
             //dlg.footer.dom.style.display = 'none';
             return width;
         }
-        dlg.footer.dom.style.display = '';
+        dlg.footerEl.dom.style.display = '';
         for(var k in buttons){
             if(typeof buttons[k] != "function"){
                 if(b[k]){
@@ -2553,7 +2614,7 @@ Roo.bootstrap.MessageBox = function(){
                 buttons["no"] = dlg.addButton(bt["no"], handleButton.createCallback("no"));
                 buttons["cancel"] = dlg.addButton(bt["cancel"], handleButton.createCallback("cancel"));
                 Roo.log(buttons)
-                bodyEl = dlg.body.createChild({
+                bodyEl = dlg.bodyEl.createChild({
 
                     html:'<span class="roo-mb-text"></span><br /><input type="text" class="roo-mb-input" />' +
                         '<textarea class="roo-mb-textarea"></textarea>' +
@@ -2742,7 +2803,7 @@ Roo.Msg.show({
             var d = this.getDialog();
             opt = options;
             d.setTitle(opt.title || "&#160;");
-            d.close.setDisplayed(opt.closable !== false);
+            d.closeEl.setDisplayed(opt.closable !== false);
             activeTextEl = textboxEl;
             opt.prompt = opt.prompt || (opt.multiline ? true : false);
             if(opt.prompt){
@@ -3703,6 +3764,7 @@ Roo.apply(Roo.bootstrap.NavGroup, {
  * @cfg {Boolean} preventDefault (true | false) default false
  * @cfg {String} tabId the tab that this item activates.
  * @cfg {String} tagtype (a|span) render as a href or span?
+ * @cfg {Boolean} animateRef (true|false) link to element default false
   
  * @constructor
  * Create a new Navbar Item
@@ -3725,7 +3787,16 @@ Roo.bootstrap.NavItem = function(config){
            * @param {boolean} state the new state
             
          */
-        'changed': true
+        'changed': true,
+        /**
+           * @event scrollto
+           * Fires when scroll to element
+           * @param {Roo.bootstrap.NavItem} this
+           * @param {Object} options
+            * @param {Roo.EventObject} e
+            
+         */
+        'scrollto': true
     });
    
 };
@@ -3742,7 +3813,7 @@ Roo.extend(Roo.bootstrap.NavItem, Roo.bootstrap.Component,  {
     tabId : false,
     tagtype : 'a',
     disabled : false,
-    
+    animateRef : false,
     was_active : false,
     
     getAutoCreate : function(){
@@ -3812,7 +3883,11 @@ Roo.extend(Roo.bootstrap.NavItem, Roo.bootstrap.Component,  {
     
     onClick : function(e)
     {
-        if(this.preventDefault || this.href == '#'){
+        if(
+                this.preventDefault || 
+                this.href == '#' ||
+                (this.animateRef && this.href.charAt(0) == '#')
+        ){
             e.preventDefault();
         }
         
@@ -3835,6 +3910,11 @@ Roo.extend(Roo.bootstrap.NavItem, Roo.bootstrap.Component,  {
             return;
         }
         
+        if(this.animateRef && this.href.charAt(0) == '#'){
+            this.scrollToElement(e);
+            return;
+        }
+        
         var p = this.parent();
         if (['tabs','pills'].indexOf(p.type)!==-1) {
             if (typeof(p.setActiveItem) !== 'undefined') {
@@ -3921,6 +4001,30 @@ Roo.extend(Roo.bootstrap.NavItem, Roo.bootstrap.Component,  {
     tooltipEl : function()
     {
         return this.el.select('' + this.tagtype + '', true).first();
+    },
+    
+    scrollToElement : function(e)
+    {
+        var c = document.body;
+        
+        var target = Roo.get(c).select('a[name=' + this.href.replace('#', '') +']', true).first();
+        
+        if(!target){
+            return;
+        }
+
+        var o = target.calcOffsetsTo(c);
+        
+        var options = {
+            target : target,
+            value : o[1]
+        }
+        
+        this.fireEvent('scrollto', this, options, e);
+        
+        Roo.get(c).scrollTo('top', options.value, true);
+        
+        return;
     }
 });
  
@@ -4100,6 +4204,16 @@ Roo.extend(Roo.bootstrap.Element, Roo.bootstrap.Component,  {
         
        
         return cfg;
+    },
+    
+    getValue : function()
+    {
+        return this.el.dom.innerHTML;
+    },
+    
+    setValue : function(value)
+    {
+        this.el.dom.innerHTML = value;
     }
    
 });
@@ -5399,6 +5513,10 @@ Roo.extend(Roo.bootstrap.Table, Roo.bootstrap.Component,  {
                 c.tooltip = config.tooltip;
             }
             
+            if(typeof(config.colspan) != 'undefined'){
+                c.colspan = config.colspan;
+            }
+            
             if(typeof(config.hidden) != 'undefined' && config.hidden){
                 c.style += ' display:none;';
             }
@@ -5672,6 +5790,10 @@ Roo.extend(Roo.bootstrap.Table, Roo.bootstrap.Component,  {
                 td.id = id;
             }
             
+            if(typeof(config.colspan) != 'undefined'){
+                td.colspan = config.colspan;
+            }
+            
             if(typeof(config.hidden) != 'undefined' && config.hidden){
                 td.style += ' display:none;';
             }
@@ -10635,7 +10757,13 @@ Roo.bootstrap.ComboBox = function(config){
          * Fires when the remove value from the combobox array
             * @param {Roo.bootstrap.ComboBox} combo This combo box
             */
-        'remove' : true
+        'remove' : true,
+        /**
+         * @event specialfilter
+         * Fires when specialfilter
+            * @param {Roo.bootstrap.ComboBox} combo This combo box
+            */
+        'specialfilter' : true
         
     });
     
@@ -10684,6 +10812,7 @@ Roo.extend(Roo.bootstrap.ComboBox, Roo.bootstrap.TriggerField, {
      * mode = 'remote' or 'text' if mode = 'local')
      */
     displayField: undefined,
+    
     /**
      * @cfg {String} valueField The underlying data value name to bind to this CombBox (defaults to undefined if
      * mode = 'remote' or 'value' if mode = 'local'). 
@@ -10829,6 +10958,11 @@ Roo.extend(Roo.bootstrap.ComboBox, Roo.bootstrap.TriggerField, {
      */
     validClass : "has-success",
     
+    /**
+     * @cfg {Boolean} specialFilter (true|false) special filter default false
+     */
+    specialFilter : false,
+    
     //private
     addicon : false,
     editicon: false,
@@ -10866,7 +11000,6 @@ Roo.extend(Roo.bootstrap.ComboBox, Roo.bootstrap.TriggerField, {
             cls : 'form-group roo-combobox-tickable' //input-group
         };
         
-        
         var buttons = {
             tag : 'div',
             cls : 'tickable-buttons',
@@ -10894,7 +11027,15 @@ Roo.extend(Roo.bootstrap.ComboBox, Roo.bootstrap.TriggerField, {
             ]
         };
         
+        if(this.editable){
+            buttons.cn.unshift({
+                tag: 'input',
+                cls: 'select2-search-field-input'
+            });
+        }
+        
         var _this = this;
+        
         Roo.each(buttons.cn, function(c){
             if (_this.size) {
                 c.cls += ' btn-' + _this.size;
@@ -11311,59 +11452,50 @@ Roo.extend(Roo.bootstrap.ComboBox, Roo.bootstrap.TriggerField, {
         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
-//        });
-        
+        if(this.editable){
+            this.keyNav = new Roo.KeyNav(this.tickableInputEl(), {
+                "up" : function(e){
+                    this.inKeyMode = true;
+                    this.selectPrev();
+                },
+
+                "down" : function(e){
+                    this.inKeyMode = true;
+                    this.selectNext();
+                },
+
+                "enter" : function(e){
+                    if(this.fireEvent("specialkey", this, e)){
+                        this.onViewClick(false);
+                    }
+                    
+                    return true;
+                },
+
+                "esc" : function(e){
+                    this.onTickableFooterButtonClick(e, false, false);
+                },
+
+                "tab" : function(e){
+                    this.fireEvent("specialkey", this, e);
+                    
+                    this.onTickableFooterButtonClick(e, false, false);
+                    
+                    return true;
+                },
+
+                scope : this,
+
+                doRelay : function(e, fn, key){
+                    if(this.scope.isExpanded()){
+                       return Roo.KeyNav.prototype.doRelay.apply(this, arguments);
+                    }
+                    return true;
+                },
+
+                forceKeyDown: true
+            });
+        }
         
         this.queryDelay = Math.max(this.queryDelay || 10,
                 this.mode == 'local' ? 10 : 250);
@@ -11375,6 +11507,10 @@ Roo.extend(Roo.bootstrap.ComboBox, Roo.bootstrap.TriggerField, {
             this.taTask = new Roo.util.DelayedTask(this.onTypeAhead, this);
         }
         
+        if(this.editable !== false){
+            this.tickableInputEl().on("keyup", this.onKeyUp, this);
+        }
+        
     },
 
     onDestroy : function(){
@@ -11476,10 +11612,10 @@ 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();
+            this.restrictHeight();
             if(this.lastQuery == this.allQuery){
                 if(this.editable && !this.tickable){
                     this.inputEl().dom.select();
@@ -11487,8 +11623,12 @@ Roo.extend(Roo.bootstrap.ComboBox, Roo.bootstrap.TriggerField, {
                 
                 if(
                     !this.selectByValue(this.value, true) &&
-                    this.autoFocus && (typeof(this.store.lastOptions.add) == 'undefined' || 
-                    this.store.lastOptions.add != true)
+                    this.autoFocus && 
+                    (
+                        !this.store.lastOptions ||
+                        typeof(this.store.lastOptions.add) == 'undefined' || 
+                        this.store.lastOptions.add != true
+                    )
                 ){
                     this.select(0, true);
                 }
@@ -11515,7 +11655,12 @@ Roo.extend(Roo.bootstrap.ComboBox, Roo.bootstrap.TriggerField, {
             this.loading.hide();
         }
         
+        if(this.tickable && this.editable){
+            return;
+        }
+        
         this.collapse();
+        
         Roo.log(this.store.reader.jsonData);
         if (this.store && typeof(this.store.reader.jsonData.errorMsg) != 'undefined') {
             // fixme
@@ -11660,6 +11805,12 @@ Roo.extend(Roo.bootstrap.ComboBox, Roo.bootstrap.TriggerField, {
     // private
     reset : function(){
         // overridden so that last data is reset..
+        
+        if(this.multiple){
+            this.clearItem();
+            return;
+        }
+        
         this.setValue(this.originalValue);
         this.clearInvalid();
         this.lastData = false;
@@ -11716,7 +11867,7 @@ Roo.extend(Roo.bootstrap.ComboBox, Roo.bootstrap.TriggerField, {
         
         if(this.tickable){
             
-            if(e.getTarget().nodeName.toLowerCase() != 'input'){
+            if(typeof(e) != 'undefined' && e.getTarget().nodeName.toLowerCase() != 'input'){
                 return;
             }
             
@@ -11727,6 +11878,11 @@ Roo.extend(Roo.bootstrap.ComboBox, Roo.bootstrap.TriggerField, {
                 
                 if(typeof(v) != 'undefined' && v[_this.valueField] == r.data[_this.valueField]){
                     _this.tickItems.splice(k, 1);
+                    
+                    if(typeof(e) == 'undefined' && view == false){
+                        Roo.get(_this.view.getNodes(index, index)[0]).select('input', true).first().dom.checked = false;
+                    }
+                    
                     rm = true;
                     return;
                 }
@@ -11737,6 +11893,11 @@ Roo.extend(Roo.bootstrap.ComboBox, Roo.bootstrap.TriggerField, {
             }
             
             this.tickItems.push(r.data);
+            
+            if(typeof(e) == 'undefined' && view == false){
+                Roo.get(_this.view.getNodes(index, index)[0]).select('input', true).first().dom.checked = true;
+            }
+                    
             return;
         }
         
@@ -11763,6 +11924,12 @@ Roo.extend(Roo.bootstrap.ComboBox, Roo.bootstrap.TriggerField, {
 
     // private
     onEmptyResults : function(){
+        
+        if(this.tickable && this.editable){
+            this.restrictHeight();
+            return;
+        }
+        
         this.collapse();
     },
 
@@ -11804,7 +11971,10 @@ Roo.extend(Roo.bootstrap.ComboBox, Roo.bootstrap.TriggerField, {
         this.view.select(index);
         if(scrollIntoView !== false){
             var el = this.view.getNode(index);
-            if(el && !this.multiple && !this.tickable){
+            /*
+             * el && !this.multiple && !this.tickable // not sure why we disable multiple before..
+             */
+            if(el){
                 this.list.scrollChildIntoView(el, false);
             }
         }
@@ -11849,7 +12019,14 @@ Roo.extend(Roo.bootstrap.ComboBox, Roo.bootstrap.TriggerField, {
 
     // private
     initQuery : function(){
-        this.doQuery(this.getRawValue());
+        
+        var v = this.getRawValue();
+        
+        if(this.tickable && this.editable){
+            v = this.tickableInputEl().getValue();
+        }
+        
+        this.doQuery(v);
     },
 
     // private
@@ -11897,10 +12074,18 @@ Roo.extend(Roo.bootstrap.ComboBox, Roo.bootstrap.TriggerField, {
                     if(forceAll){
                         this.store.clearFilter();
                     }else{
+                        
+                        if(this.specialFilter){
+                            this.fireEvent('specialfilter', this);
+                            this.onLoad();
+                            return;
+                        }
+                        
                         this.store.filter(this.displayField, q);
                     }
                     this.onLoad();
                 }else{
+                    
                     this.store.baseParams[this.queryParam] = q;
                     
                     var options = {params : this.getParams(q)};
@@ -11911,6 +12096,7 @@ Roo.extend(Roo.bootstrap.ComboBox, Roo.bootstrap.TriggerField, {
                     }
                     
                     this.store.load(options);
+                    
                     /*
                      *  this code will make the page width larger, at the beginning, the list not align correctly, 
                      *  we should expand the list on onLoad
@@ -11926,7 +12112,7 @@ Roo.extend(Roo.bootstrap.ComboBox, Roo.bootstrap.TriggerField, {
         
         this.loadNext = false;
     },
-
+    
     // private
     getParams : function(q){
         var p = {};
@@ -11954,6 +12140,12 @@ Roo.extend(Roo.bootstrap.ComboBox, Roo.bootstrap.TriggerField, {
             this.okBtn.hide();
             this.cancelBtn.hide();
             this.trigger.show();
+            
+            if(this.editable){
+                this.tickableInputEl().dom.value = '';
+                this.tickableInputEl().blur();
+            }
+            
         }
         
         Roo.get(document).un('mousedown', this.collapseIf, this);
@@ -12010,6 +12202,10 @@ Roo.extend(Roo.bootstrap.ComboBox, Roo.bootstrap.TriggerField, {
             this.cancelBtn.show();
             this.trigger.hide();
             
+            if(this.editable){
+                this.tickableInputEl().focus();
+            }
+            
         }
         
         Roo.get(document).on('mousedown', this.collapseIf, this);
@@ -12336,6 +12532,15 @@ Roo.extend(Roo.bootstrap.ComboBox, Roo.bootstrap.TriggerField, {
         
         this.markInvalid();
         return false;
+    },
+    
+    tickableInputEl : function()
+    {
+        if(!this.tickable || !this.editable){
+            return this.inputEl();
+        }
+        
+        return this.inputEl().select('.select2-search-field-input', true).first();
     }
     
     
@@ -14363,6 +14568,9 @@ Roo.extend(Roo.bootstrap.ProgressBar, Roo.bootstrap.Component,  {
  * Bootstrap Column class
  * @cfg {String} navId the navigation id (for use with navbars) - will be auto generated if it does not exist..
  * @cfg {Boolean} carousel true to make the group behave like a carousel
+ * @cfg {Number} bullets show the panel pointer.. default 0
+ * @cfg {Boolena} autoslide (true|false) auto slide .. default false
+ * @cfg {Number} timer auto slide timer .. default 0 millisecond
  * 
  * @constructor
  * Create a new TabGroup
@@ -14383,7 +14591,11 @@ Roo.extend(Roo.bootstrap.TabGroup, Roo.bootstrap.Column,  {
     
     carousel : false,
     transition : false,
-     
+    bullets : 0,
+    timer : 0,
+    autoslide : false,
+    slideFn : false,
+    
     getAutoCreate : function()
     {
         var cfg = Roo.apply({}, Roo.bootstrap.TabGroup.superclass.getAutoCreate.call(this));
@@ -14392,14 +14604,68 @@ Roo.extend(Roo.bootstrap.TabGroup, Roo.bootstrap.Column,  {
         
         if (this.carousel) {
             cfg.cls += ' carousel slide';
+            
             cfg.cn = [{
                cls : 'carousel-inner'
-            }]
-        }
+            }];
         
+            if(this.bullets > 0){
+                
+                var bullets = {
+                    cls : 'carousel-bullets',
+                    cn : []
+                };
+                
+                for (var i = 0; i < this.bullets; i++){
+                    bullets.cn.push({
+                        cls : 'bullet bullet-' + i
+                    });
+                }
+                
+                bullets.cn.push({
+                    cls : 'clear'
+                });
+                
+                cfg.cn[0].cn = bullets;
+            }
+        }
         
         return cfg;
     },
+    
+    initEvents:  function()
+    {
+        Roo.log('-------- init events on tab group ---------');
+        
+        var _this = this;
+        
+        if(this.bullets > 0){
+            
+            for (var i = 0; i < this.bullets; i++){
+                var bullet = this.el.select('.bullet-' + i, true).first();
+                
+                if(!bullet){
+                    continue;
+                }
+                
+                bullet.on('click', (function(e, el, o, ii, t){
+                    
+                    e.preventDefault();
+                    
+                    _this.showPanel(ii);
+                    
+                }).createDelegate(this, [i, bullet], true));
+                
+            }
+        }
+        
+        if(this.autoslide){
+            this.slideFn = window.setInterval(function() {
+                _this.showPanelNext();
+            }, this.timer);
+        }
+    },
+    
     getChildContainer : function()
     {
         return this.carousel ? this.el.select('.carousel-inner', true).first() : this.el;
@@ -14460,6 +14726,10 @@ Roo.extend(Roo.bootstrap.TabGroup, Roo.bootstrap.Column,  {
      */
     showPanel : function (pan)
     {
+        if(this.transition){
+            Roo.log("waiting for the transitionend");
+            return;
+        }
         
         if (typeof(pan) == 'number') {
             pan = this.tabs[pan];
@@ -14476,6 +14746,10 @@ Roo.extend(Roo.bootstrap.TabGroup, Roo.bootstrap.Column,  {
             return false;
         }
         
+        if(this.bullets > 0){
+            this.setActiveBullet(this.indexOfPanel(pan));
+        }
+        
         if (this.carousel && typeof(Roo.get(document.body).dom.style.transition) != 'undefined') {
             
             this.transition = true;
@@ -14499,29 +14773,59 @@ Roo.extend(Roo.bootstrap.TabGroup, Roo.bootstrap.Column,  {
                 _this.transition = false;
                 
             }, this, { single:  true } );
+            
             return true;
         }
         
         cur.setActive(false);
         pan.setActive(true);
+        
         return true;
         
     },
     showPanelNext : function()
     {
         var i = this.indexOfPanel(this.getActivePanel());
-        if (i > this.tabs.length) {
+        
+        if (i >= this.tabs.length - 1 && !this.autoslide) {
             return;
         }
+        
+        if (i >= this.tabs.length - 1 && this.autoslide) {
+            i = -1;
+        }
+        
         this.showPanel(this.tabs[i+1]);
     },
+    
     showPanelPrev : function()
     {
         var i = this.indexOfPanel(this.getActivePanel());
-        if (i  < 1) {
+        
+        if (i  < 1 && !this.autoslide) {
             return;
         }
+        
+        if (i < 1 && this.autoslide) {
+            i = this.tabs.length;
+        }
+        
         this.showPanel(this.tabs[i-1]);
+    },
+    
+    setActiveBullet : function(i)
+    {
+        Roo.each(this.el.select('.bullet', true).elements, function(el){
+            el.removeClass('selected');
+        });
+
+        var bullet = this.el.select('.bullet-' + i, true).first();
+        
+        if(!bullet){
+            return;
+        }
+        
+        bullet.addClass('selected');
     }
     
     
@@ -14647,7 +14951,14 @@ Roo.extend(Roo.bootstrap.TabPanel, Roo.bootstrap.Component,  {
             var tg = Roo.bootstrap.TabGroup.get(this.navId);
             Roo.log(['register', tg, this]);
             tg.register(this);
+            
+            var i = tg.tabs.length - 1;
+            
+            if(this.active && tg.bullets > 0 && i < tg.bullets){
+                tg.setActiveBullet(i);
+            }
         }
+        
     },
     
     
@@ -14674,6 +14985,7 @@ Roo.extend(Roo.bootstrap.TabPanel, Roo.bootstrap.Component,  {
         } else  if (!this.el.hasClass('active')) {
             this.el.addClass('active');
         }
+        
         this.fireEvent('changed', this, state);
     }
     
@@ -16296,7 +16608,8 @@ Roo.bootstrap.MonthField = function(config){
          * @event select
          * Fires when select a date.
          * @param {Roo.bootstrap.MonthField} this
-         * @param {Mixed} date The date value
+         * @param {String} oldvalue The old value
+         * @param {String} newvalue The new value
          */
         select : true
     });
@@ -16343,13 +16656,17 @@ Roo.extend(Roo.bootstrap.MonthField, Roo.bootstrap.Input,  {
         
     },
     
-    setValue: function(v)
+    setValue: function(v, suppressEvent)
     {   
+        var o = this.getValue();
+        
         Roo.bootstrap.MonthField.superclass.setValue.call(this, v);
         
         this.update();
 
-        this.fireEvent('select', this, this.date);
+        if(suppressEvent !== true){
+            this.fireEvent('select', this, o, v);
+        }
         
     },
     
@@ -16965,8 +17282,8 @@ Roo.extend(Roo.bootstrap.CheckBox, Roo.bootstrap.Input,  {
     {
         if(
                 this.disabled || 
-                (this.inputType == 'radio' && this.getValue().length) ||
-                (this.inputType == 'checkbox' && this.validateGroup())
+                (this.inputType == 'radio' && this.validateRadio()) ||
+                (this.inputType == 'checkbox' && this.validateCheckbox())
         ){
             this.markValid();
             return true;
@@ -16976,7 +17293,24 @@ Roo.extend(Roo.bootstrap.CheckBox, Roo.bootstrap.Input,  {
         return false;
     },
     
-    validateGroup : function()
+    validateRadio : function()
+    {
+        var valid = false;
+        
+        Roo.each(this.el.up('form').select('input[name='+this.name+']', true).elements, function(e){
+            if(!e.dom.checked){
+                return;
+            }
+            
+            valid = true;
+            
+            return false;
+        });
+        
+        return valid;
+    },
+    
+    validateCheckbox : function()
     {
         if(!this.groupId){
             return (this.getValue() == this.inputValue || this.allowBlank) ? true : false;
@@ -17006,6 +17340,10 @@ Roo.extend(Roo.bootstrap.CheckBox, Roo.bootstrap.Input,  {
      */
     markValid : function()
     {
+        if(this.allowBlank){
+            return;
+        }
+        
         var _this = this;
         
         this.fireEvent('valid', this);
@@ -17043,6 +17381,10 @@ Roo.extend(Roo.bootstrap.CheckBox, Roo.bootstrap.Input,  {
      */
     markInvalid : function(msg)
     {
+        if(this.allowBlank){
+            return;
+        }
+        
         var _this = this;
         
         this.fireEvent('invalid', this, msg);
@@ -21680,6 +22022,7 @@ Roo.apply(Roo.bootstrap.Tooltip, {
     enter : function(ev)
     {
         var dom = ev.getTarget();
+        
         //Roo.log(['enter',dom]);
         var el = Roo.fly(dom);
         if (this.currentEl) {
@@ -21700,12 +22043,26 @@ Roo.apply(Roo.bootstrap.Tooltip, {
         if (this.currentTip.el) {
             this.currentTip.el.hide(); // force hiding...
         }    
-        //Roo.log(el);
-        if (!el.attr('tooltip')) { // parents who have tip?
-            return;
+        //Roo.log(ev);
+        var bindEl = el;
+        
+        // you can not look for children, as if el is the body.. then everythign is the child..
+        if (!el.attr('tooltip')) { //
+            if (!el.select("[tooltip]").elements.length) {
+                return;
+            }
+            // is the mouse over this child...?
+            bindEl = el.select("[tooltip]").first();
+            var xy = ev.getXY();
+            if (!bindEl.getRegion().contains( { top : xy[1] ,right : xy[0] , bottom : xy[1], left : xy[0]})) {
+                //Roo.log("not in region.");
+                return;
+            }
+            //Roo.log("child element over..");
+            
         }
-        this.currentEl = el;
-        this.currentTip.bind(el);
+        this.currentEl = bindEl;
+        this.currentTip.bind(bindEl);
         this.currentRegion = Roo.lib.Region.getRegion(dom);
         this.currentTip.enter();
         
@@ -21811,7 +22168,7 @@ Roo.extend(Roo.bootstrap.Tooltip, Roo.bootstrap.Component,  {
         this.hoverState = 'out';
          if (!this.delay || !this.delay.hide) {
             this.hide();
-            return 
+            return;
         }
        
         var _t = this;
@@ -21822,7 +22179,7 @@ Roo.extend(Roo.bootstrap.Tooltip, Roo.bootstrap.Component,  {
                 _t.hide();
                 Roo.bootstrap.Tooltip.currentEl = false;
             }
-        }, delay)
+        }, delay);
     },
     
     show : function ()
@@ -21832,7 +22189,10 @@ Roo.extend(Roo.bootstrap.Tooltip, Roo.bootstrap.Component,  {
         }
         // set content.
         //Roo.log([this.bindEl, this.bindEl.attr('tooltip')]);
-        this.el.select('.tooltip-inner',true).first().dom.innerHTML = this.bindEl.attr('tooltip');
+        
+        var tip = this.bindEl.attr('tooltip') || this.bindEl.select("[tooltip]").first().attr('tooltip');
+        
+        this.el.select('.tooltip-inner',true).first().dom.innerHTML = tip;
         
         this.el.removeClass(['fade','top','bottom', 'left', 'right','in']);
         
@@ -22155,9 +22515,24 @@ Roo.extend(Roo.bootstrap.LocationPicker, Roo.bootstrap.Component,  {
     
     GMapContext: function() 
     {
-        var _map = new google.maps.Map(this.el.dom, this);
+        var position = new google.maps.LatLng(this.latitude, this.longitude);
+        
+        var _map = new google.maps.Map(this.el.dom, {
+            center: position,
+            zoom: this.zoom,
+            mapTypeId: this.mapTypeId,
+            mapTypeControl: this.mapTypeControl,
+            disableDoubleClickZoom: this.disableDoubleClickZoom,
+            scrollwheel: this.scrollwheel,
+            streetViewControl: this.streetViewControl,
+            locationName: this.locationName,
+            draggable: this.draggable,
+            enableAutocomplete: this.enableAutocomplete,
+            enableReverseGeocode: this.enableReverseGeocode
+        });
+        
         var _marker = new google.maps.Marker({
-            position: new google.maps.LatLng(this.latitude, this.longitude),
+            position: position,
             map: _map,
             title: this.markerTitle,
             draggable: this.draggable
@@ -22167,7 +22542,7 @@ Roo.extend(Roo.bootstrap.LocationPicker, Roo.bootstrap.Component,  {
             map: _map,
             marker: _marker,
             circle: null,
-            location: _marker.position,
+            location: position,
             radius: this.radius,
             locationName: this.locationName,
             addressComponents: {