buildSDK/dependancy_bootstrap.txt
[roojs1] / roojs-bootstrap-debug.js
index 0760dde..503be75 100644 (file)
@@ -916,7 +916,7 @@ Roo.extend(Roo.bootstrap.Column, Roo.bootstrap.Component,  {
             
         }
         if (this.icon) {
-            cfg.html = '<i class="glyphicon glyphicon-'+this.icon + '"></i>' + + (cfg.html || '')
+            cfg.html = '<i class="glyphicon glyphicon-'+this.icon + '"></i>' +  (cfg.html || '');
         }
         
         return cfg;
@@ -1123,6 +1123,16 @@ Roo.extend(Roo.bootstrap.Container, Roo.bootstrap.Component,  {
         }
         
         return titleEl.dom.innerHTML;
+    },
+    
+    show : function() {
+        this.el.removeClass('hidden');
+    },
+    hide: function() {
+        if (!this.el.hasClass('hidden')) {
+            this.el.addClass('hidden');
+        }
+        
     }
    
 });
@@ -2965,7 +2975,7 @@ Roo.Msg.show({
 /**
  * Shorthand for {@link Roo.MessageBox}
  */
-Roo.MessageBox = Roo.MessageBox || Roo.bootstrap.MessageBox 
+Roo.MessageBox = Roo.MessageBox || Roo.bootstrap.MessageBox;
 Roo.Msg = Roo.Msg || Roo.MessageBox;
 /*
  * - LGPL
@@ -3802,10 +3812,10 @@ Roo.extend(Roo.bootstrap.NavItem, Roo.bootstrap.Component,  {
     
     onClick : function(e)
     {
-         
-        if(this.preventDefault){
+        if(this.preventDefault || this.href == '#'){
             e.preventDefault();
         }
+        
         if (this.disabled) {
             return;
         }
@@ -5278,12 +5288,20 @@ Roo.extend(Roo.bootstrap.Table, Roo.bootstrap.Component,  {
             return;
         }
         
-        
         if(e.getTarget().nodeName.toLowerCase() != 'td'){
             cell = cell.findParent('td', false, true);
         }
         
+        if(!cell || typeof(cell) == 'undefined'){
+            return;
+        }
+        
         var row = cell.findParent('tr', false, true);
+        
+        if(!row || typeof(row) == 'undefined'){
+            return;
+        }
+        
         var cellIndex = cell.dom.cellIndex;
         var rowIndex = this.getRowIndex(row);
         
@@ -5310,7 +5328,16 @@ Roo.extend(Roo.bootstrap.Table, Roo.bootstrap.Component,  {
             cell = cell.findParent('td', false, true);
         }
         
+        if(!cell || typeof(cell) == 'undefined'){
+            return;
+        }
+        
         var row = cell.findParent('tr', false, true);
+        
+        if(!row || typeof(row) == 'undefined'){
+            return;
+        }
+        
         var cellIndex = cell.dom.cellIndex;
         var rowIndex = this.getRowIndex(row);
         
@@ -5325,7 +5352,7 @@ Roo.extend(Roo.bootstrap.Table, Roo.bootstrap.Component,  {
     
     sort : function(e,el)
     {
-        var col = Roo.get(el)
+        var col = Roo.get(el);
         
         if(!col.hasClass('sortable')){
             return;
@@ -5368,7 +5395,7 @@ Roo.extend(Roo.bootstrap.Table, Roo.bootstrap.Component,  {
                 html: cm.getColumnHeader(i)
             };
             
-            if(typeof(config.tooltip != 'undefined')){
+            if(typeof(config.tooltip) != 'undefined'){
                 c.tooltip = config.tooltip;
             }
             
@@ -11246,6 +11273,7 @@ Roo.extend(Roo.bootstrap.ComboBox, Roo.bootstrap.TriggerField, {
         if(this.typeAhead){
             this.taTask = new Roo.util.DelayedTask(this.onTypeAhead, this);
         }
+        
     },
 
     onDestroy : function(){
@@ -11600,7 +11628,7 @@ Roo.extend(Roo.bootstrap.ComboBox, Roo.bootstrap.TriggerField, {
                     rm = true;
                     return;
                 }
-            })
+            });
             
             if(rm){
                 return;
@@ -11820,6 +11848,7 @@ Roo.extend(Roo.bootstrap.ComboBox, Roo.bootstrap.TriggerField, {
         this.list.hide();
         
         if(this.tickable){
+            this.hasFocus = false;
             this.okBtn.hide();
             this.cancelBtn.hide();
             this.trigger.show();
@@ -11941,6 +11970,11 @@ Roo.extend(Roo.bootstrap.ComboBox, Roo.bootstrap.TriggerField, {
     
     onSearchFieldClick : function(e)
     {
+        if(this.hasFocus && !this.disabled && e.getTarget().nodeName.toLowerCase() != 'button'){
+            this.onTickableFooterButtonClick(e, false, false);
+            return;
+        }
+        
         if(this.hasFocus || this.disabled || e.getTarget().nodeName.toLowerCase() == 'button'){
             return;
         }
@@ -13105,7 +13139,7 @@ Roo.extend(Roo.bootstrap.Calendar, Roo.bootstrap.Component,  {
         };
         var cal_rows = function() {
             
-            var ret = []
+            var ret = [];
             for (var r = 0; r < 6; r++) {
                 var row= {
                     tag : 'tr',
@@ -13933,8 +13967,8 @@ Roo.extend(Roo.bootstrap.Popover, Roo.bootstrap.Component,  {
             if (trigger == 'click') {
                 on_el.on('click', this.toggle, this);
             } else if (trigger != 'manual') {
-                var eventIn  = trigger == 'hover' ? 'mouseenter' : 'focusin'
-                var eventOut = trigger == 'hover' ? 'mouseleave' : 'focusout'
+                var eventIn  = trigger == 'hover' ? 'mouseenter' : 'focusin';
+                var eventOut = trigger == 'hover' ? 'mouseleave' : 'focusout';
       
                 on_el.on(eventIn  ,this.enter, this);
                 on_el.on(eventOut, this.leave, this);
@@ -13957,11 +13991,11 @@ Roo.extend(Roo.bootstrap.Popover, Roo.bootstrap.Component,  {
     
         clearTimeout(this.timeout);
     
-        this.hoverState = 'in'
+        this.hoverState = 'in';
     
         if (!this.delay || !this.delay.show) {
             this.show();
-            return 
+            return;
         }
         var _t = this;
         this.timeout = setTimeout(function () {
@@ -13973,11 +14007,11 @@ Roo.extend(Roo.bootstrap.Popover, Roo.bootstrap.Component,  {
     leave : function() {
         clearTimeout(this.timeout);
     
-        this.hoverState = 'out'
+        this.hoverState = 'out';
     
         if (!this.delay || !this.delay.hide) {
             this.hide();
-            return 
+            return;
         }
         var _t = this;
         this.timeout = setTimeout(function () {
@@ -14026,7 +14060,7 @@ Roo.extend(Roo.bootstrap.Popover, Roo.bootstrap.Component,  {
         if (autoPlace) {
             // fixme..
         }
-        var align = Roo.bootstrap.Popover.alignment[placement]
+        var align = Roo.bootstrap.Popover.alignment[placement];
         this.el.alignTo(on_el, align[0],align[1]);
         //var arrow = this.el.select('.arrow',true).first();
         //arrow.set(align[2], 
@@ -14328,7 +14362,8 @@ Roo.extend(Roo.bootstrap.TabGroup, Roo.bootstrap.Column,  {
             return false;
         }
         
-        if (this.carousel) {
+        if (this.carousel && typeof(Roo.get(document.body).dom.style.transition) != 'undefined') {
+            
             this.transition = true;
             var dir = this.indexOfPanel(pan) > this.indexOfPanel(cur)  ? 'next' : 'prev';
             var lr = dir == 'next' ? 'left' : 'right';
@@ -14723,7 +14758,7 @@ Roo.extend(Roo.bootstrap.DateField, Roo.bootstrap.Input,  {
             Roo.each(this.picker().select('thead > tr > th', true).elements, function(v){
                 v.setVisibilityMode(Roo.Element.DISPLAY)
                 v.hide();
-            })
+            });
             
             Roo.each(this.picker().select('tbody > tr > td', true).elements, function(v){
                 v.setStyle('width', '189px');
@@ -14734,9 +14769,9 @@ Roo.extend(Roo.bootstrap.DateField, Roo.bootstrap.Input,  {
             if(!this.calendarWeeks){
                 v.remove();
                 return;
-            };
+            }
             
-            v.dom.innerHTML = Roo.bootstrap.DateField.dates[this.language].today
+            v.dom.innerHTML = Roo.bootstrap.DateField.dates[this.language].today;
             v.attr('colspan', function(i, val){
                 return parseInt(val) + 1;
             });
@@ -14798,7 +14833,7 @@ Roo.extend(Roo.bootstrap.DateField, Roo.bootstrap.Input,  {
     
     fillMonths: function()
     {    
-        var i = 0
+        var i = 0;
         var months = this.picker().select('>.datepicker-months td', true).first();
         
         months.dom.innerHTML = '';
@@ -15622,7 +15657,7 @@ Roo.bootstrap.TimeField = function(config){
             /**
              * @event show
              * Fires when this field show.
-             * @param {Roo.bootstrap.DateField} this
+             * @param {Roo.bootstrap.DateField} thisthis
              * @param {Mixed} date The date value
              */
             show : true,
@@ -15662,7 +15697,7 @@ Roo.extend(Roo.bootstrap.TimeField, Roo.bootstrap.Input,  {
         this.picker().setVisibilityMode(Roo.Element.DISPLAY).originalDisplay = 'block';
         
         this.pop = this.picker().select('>.datepicker-time',true).first();
-        this.pop.setVisibilityMode(Roo.Element.DISPLAY).originalDisplay = 'block' 
+        this.pop.setVisibilityMode(Roo.Element.DISPLAY).originalDisplay = 'block';
         
         this.picker().on('mousedown', this.onMousedown, this);
         this.picker().on('click', this.onClick, this);
@@ -15683,8 +15718,9 @@ Roo.extend(Roo.bootstrap.TimeField, Roo.bootstrap.Input,  {
     
     fireKey: function(e){
         if (!this.picker().isVisible()){
-            if (e.keyCode == 27) // allow escape to hide and re-show picker
+            if (e.keyCode == 27) // allow escape to hide and re-show picker
                 this.show();
+            }
             return;
         }
 
@@ -16105,6 +16141,391 @@ Roo.apply(Roo.bootstrap.TimeField,  {
 
  
 
+ /*
+ * - LGPL
+ *
+ * MonthField
+ * 
+ */
+
+/**
+ * @class Roo.bootstrap.MonthField
+ * @extends Roo.bootstrap.Input
+ * Bootstrap MonthField class
+ * 
+ * @cfg {String} language default en
+ * 
+ * @constructor
+ * Create a new MonthField
+ * @param {Object} config The config object
+ */
+
+Roo.bootstrap.MonthField = function(config){
+    Roo.bootstrap.MonthField.superclass.constructor.call(this, config);
+    
+    this.addEvents({
+        /**
+         * @event show
+         * Fires when this field show.
+         * @param {Roo.bootstrap.MonthField} this
+         * @param {Mixed} date The date value
+         */
+        show : true,
+        /**
+         * @event show
+         * Fires when this field hide.
+         * @param {Roo.bootstrap.MonthField} this
+         * @param {Mixed} date The date value
+         */
+        hide : true,
+        /**
+         * @event select
+         * Fires when select a date.
+         * @param {Roo.bootstrap.MonthField} this
+         * @param {Mixed} date The date value
+         */
+        select : true
+    });
+};
+
+Roo.extend(Roo.bootstrap.MonthField, Roo.bootstrap.Input,  {
+    
+    onRender: function(ct, position)
+    {
+        
+        Roo.bootstrap.MonthField.superclass.onRender.call(this, ct, position);
+        
+        this.language = this.language || 'en';
+        this.language = this.language in Roo.bootstrap.MonthField.dates ? this.language : this.language.split('-')[0];
+        this.language = this.language in Roo.bootstrap.MonthField.dates ? this.language : "en";
+        
+        this.isRTL = Roo.bootstrap.MonthField.dates[this.language].rtl || false;
+        this.isInline = false;
+        this.isInput = true;
+        this.component = this.el.select('.add-on', true).first() || false;
+        this.component = (this.component && this.component.length === 0) ? false : this.component;
+        this.hasInput = this.component && this.inputEL().length;
+        
+        this.minViewMode = 1;
+        this.viewMode = 1;
+                
+        this.pickerEl = Roo.get(document.body).createChild(Roo.bootstrap.MonthField.template);
+        
+        this.picker().setVisibilityMode(Roo.Element.DISPLAY).originalDisplay = 'block';
+        
+        this.picker().on('mousedown', this.onMousedown, this);
+        this.picker().on('click', this.onClick, this);
+        
+        this.picker().addClass('datepicker-dropdown');
+        
+        this.startViewMode = this.viewMode;
+
+        Roo.each(this.picker().select('tbody > tr > td', true).elements, function(v){
+            v.setStyle('width', '189px');
+        });
+        
+        this.fillMonths();
+        this.update();
+        
+        if(this.isInline) {
+            this.show();
+        }
+    },
+    
+    setValue: function(v)
+    {   
+        Roo.bootstrap.MonthField.superclass.setValue.call(this, v);
+        
+        this.update();
+
+        this.fireEvent('select', this, this.date);
+        
+    },
+    
+    getValue: function()
+    {
+        return this.value;
+    },
+    
+    onClick: function(e) 
+    {
+        e.stopPropagation();
+        e.preventDefault();
+        
+        var target = e.getTarget();
+        
+        if(target.nodeName.toLowerCase() === 'i'){
+            target = Roo.get(target).dom.parentNode;
+        }
+        
+        var nodeName = target.nodeName;
+        var className = target.className;
+        var html = target.innerHTML;
+        
+        if(nodeName.toLowerCase() != 'span' || className.indexOf('disabled') > -1 || className.indexOf('month') == -1){
+            return;
+        }
+        
+        this.vIndex = Roo.bootstrap.MonthField.dates[this.language].monthsShort.indexOf(html);
+        
+        this.setValue(Roo.bootstrap.MonthField.dates[this.language].months[this.vIndex]);
+        
+        this.hide();
+                        
+    },
+    
+    picker : function()
+    {
+        return this.pickerEl;
+    },
+    
+    fillMonths: function()
+    {    
+        var i = 0
+        var months = this.picker().select('>.datepicker-months td', true).first();
+        
+        months.dom.innerHTML = '';
+        
+        while (i < 12) {
+            var month = {
+                tag: 'span',
+                cls: 'month',
+                html: Roo.bootstrap.MonthField.dates[this.language].monthsShort[i++]
+            }
+            
+            months.createChild(month);
+        }
+        
+    },
+    
+    update: function()
+    {
+        var _this = this;
+        
+        if(typeof(this.vIndex) == 'undefined' && this.value.length){
+            this.vIndex = Roo.bootstrap.MonthField.dates[this.language].months.indexOf(this.value);
+        }
+        
+        Roo.each(this.pickerEl.select('> .datepicker-months tbody > tr > td > span', true).elements, function(e, k){
+            e.removeClass('active');
+            
+            if(typeof(_this.vIndex) != 'undefined' && k == _this.vIndex){
+                e.addClass('active');
+            }
+        })
+    },
+    
+    place: function()
+    {
+        if(this.isInline) return;
+        
+        this.picker().removeClass(['bottom', 'top']);
+        
+        if((Roo.lib.Dom.getViewHeight() + Roo.get(document.body).getScroll().top) - (this.inputEl().getBottom() + this.picker().getHeight()) < 0){
+            /*
+             * place to the top of element!
+             *
+             */
+            
+            this.picker().addClass('top');
+            this.picker().setTop(this.inputEl().getTop() - this.picker().getHeight()).setLeft(this.inputEl().getLeft());
+            
+            return;
+        }
+        
+        this.picker().addClass('bottom');
+        
+        this.picker().setTop(this.inputEl().getBottom()).setLeft(this.inputEl().getLeft());
+    },
+    
+    onFocus : function()
+    {
+        Roo.bootstrap.MonthField.superclass.onFocus.call(this);
+        this.show();
+    },
+    
+    onBlur : function()
+    {
+        Roo.bootstrap.MonthField.superclass.onBlur.call(this);
+        
+        var d = this.inputEl().getValue();
+        
+        this.setValue(d);
+                
+        this.hide();
+    },
+    
+    show : function()
+    {
+        this.picker().show();
+        this.picker().select('>.datepicker-months', true).first().show();
+        this.update();
+        this.place();
+        
+        this.fireEvent('show', this, this.date);
+    },
+    
+    hide : function()
+    {
+        if(this.isInline) return;
+        this.picker().hide();
+        this.fireEvent('hide', this, this.date);
+        
+    },
+    
+    onMousedown: function(e)
+    {
+        e.stopPropagation();
+        e.preventDefault();
+    },
+    
+    keyup: function(e)
+    {
+        Roo.bootstrap.MonthField.superclass.keyup.call(this);
+        this.update();
+    },
+
+    fireKey: function(e)
+    {
+        if (!this.picker().isVisible()){
+            if (e.keyCode == 27) // allow escape to hide and re-show picker
+                this.show();
+            return;
+        }
+        
+        var dir;
+        
+        switch(e.keyCode){
+            case 27: // escape
+                this.hide();
+                e.preventDefault();
+                break;
+            case 37: // left
+            case 39: // right
+                dir = e.keyCode == 37 ? -1 : 1;
+                
+                this.vIndex = this.vIndex + dir;
+                
+                if(this.vIndex < 0){
+                    this.vIndex = 0;
+                }
+                
+                if(this.vIndex > 11){
+                    this.vIndex = 11;
+                }
+                
+                if(isNaN(this.vIndex)){
+                    this.vIndex = 0;
+                }
+                
+                this.setValue(Roo.bootstrap.MonthField.dates[this.language].months[this.vIndex]);
+                
+                break;
+            case 38: // up
+            case 40: // down
+                
+                dir = e.keyCode == 38 ? -1 : 1;
+                
+                this.vIndex = this.vIndex + dir * 4;
+                
+                if(this.vIndex < 0){
+                    this.vIndex = 0;
+                }
+                
+                if(this.vIndex > 11){
+                    this.vIndex = 11;
+                }
+                
+                if(isNaN(this.vIndex)){
+                    this.vIndex = 0;
+                }
+                
+                this.setValue(Roo.bootstrap.MonthField.dates[this.language].months[this.vIndex]);
+                break;
+                
+            case 13: // enter
+                
+                if(typeof(this.vIndex) != 'undefined' && !isNaN(this.vIndex)){
+                    this.setValue(Roo.bootstrap.MonthField.dates[this.language].months[this.vIndex]);
+                }
+                
+                this.hide();
+                e.preventDefault();
+                break;
+            case 9: // tab
+                if(typeof(this.vIndex) != 'undefined' && !isNaN(this.vIndex)){
+                    this.setValue(Roo.bootstrap.MonthField.dates[this.language].months[this.vIndex]);
+                }
+                this.hide();
+                break;
+            case 16: // shift
+            case 17: // ctrl
+            case 18: // alt
+                break;
+            default :
+                this.hide();
+                
+        }
+    },
+    
+    remove: function() 
+    {
+        this.picker().remove();
+    }
+   
+});
+
+Roo.apply(Roo.bootstrap.MonthField,  {
+    
+    content : {
+        tag: 'tbody',
+        cn: [
+        {
+            tag: 'tr',
+            cn: [
+            {
+                tag: 'td',
+                colspan: '7'
+            }
+            ]
+        }
+        ]
+    },
+    
+    dates:{
+        en: {
+            months: ["January", "February", "March", "April", "May", "June", "July", "August", "September", "October", "November", "December"],
+            monthsShort: ["Jan", "Feb", "Mar", "Apr", "May", "Jun", "Jul", "Aug", "Sep", "Oct", "Nov", "Dec"]
+        }
+    }
+});
+
+Roo.apply(Roo.bootstrap.MonthField,  {
+  
+    template : {
+        tag: 'div',
+        cls: 'datepicker dropdown-menu roo-dynamic',
+        cn: [
+            {
+                tag: 'div',
+                cls: 'datepicker-months',
+                cn: [
+                {
+                    tag: 'table',
+                    cls: 'table-condensed',
+                    cn:[
+                        Roo.bootstrap.DateField.content
+                    ]
+                }
+                ]
+            }
+        ]
+    }
+});
+
+
  /*
  * - LGPL
  *
@@ -16132,15 +16553,15 @@ Roo.apply(Roo.bootstrap.TimeField,  {
 Roo.bootstrap.CheckBox = function(config){
     Roo.bootstrap.CheckBox.superclass.constructor.call(this, config);
    
-        this.addEvents({
-            /**
-            * @event check
-            * Fires when the element is checked or unchecked.
-            * @param {Roo.bootstrap.CheckBox} this This input
-            * @param {Boolean} checked The new checked value
-            */
-           check : true
-        });
+    this.addEvents({
+        /**
+        * @event check
+        * Fires when the element is checked or unchecked.
+        * @param {Roo.bootstrap.CheckBox} this This input
+        * @param {Boolean} checked The new checked value
+        */
+       check : true
+    });
 };
 
 Roo.extend(Roo.bootstrap.CheckBox, Roo.bootstrap.Input,  {
@@ -16161,7 +16582,7 @@ Roo.extend(Roo.bootstrap.CheckBox, Roo.bootstrap.Input,  {
         
         var cfg = {};
         
-        cfg.cls = 'form-group ' + this.inputType //input-group
+        cfg.cls = 'form-group ' + this.inputType; //input-group
         
         if(this.inline){
             cfg.cls += ' ' + this.inputType + '-inline';
@@ -16198,6 +16619,7 @@ Roo.extend(Roo.bootstrap.CheckBox, Roo.bootstrap.Input,  {
         }
         
         var settings=this;
+        
         ['xs','sm','md','lg'].map(function(size){
             if (settings[size]) {
                 cfg.cls += ' col-' + size + '-' + settings[size];
@@ -16217,6 +16639,7 @@ Roo.extend(Roo.bootstrap.CheckBox, Roo.bootstrap.Input,  {
                 cls : 'input-group',
                 cn :  [] 
             };
+            
             if (this.before) {
                 inputblock.cn.push({
                     tag :'span',
@@ -16224,7 +16647,9 @@ Roo.extend(Roo.bootstrap.CheckBox, Roo.bootstrap.Input,  {
                     html : this.before
                 });
             }
+            
             inputblock.cn.push(input);
+            
             if (this.after) {
                 inputblock.cn.push({
                     tag :'span',
@@ -16233,7 +16658,7 @@ Roo.extend(Roo.bootstrap.CheckBox, Roo.bootstrap.Input,  {
                 });
             }
             
-        };
+        }
         
         if (align ==='left' && this.fieldLabel.length) {
                 Roo.log("left and has label");
@@ -16277,8 +16702,8 @@ Roo.extend(Roo.bootstrap.CheckBox, Roo.bootstrap.Input,  {
                 cfg.cn = [  inputblock ] ;
                 
                 
-        };
-         if(this.boxLabel){
+        }
+        if(this.boxLabel){
              var boxLabelCfg = {
                 tag: 'label',
                 //'for': id, // box label is handled by onclick - so no for...
@@ -16377,6 +16802,10 @@ Roo.extend(Roo.bootstrap.CheckBox, Roo.bootstrap.Input,  {
     
     getGroupValue : function()
     {
+        if(typeof(this.el.up('form').child('input[name='+this.name+']:checked', true)) == 'undefined'){
+            return '';
+        }
+        
         return this.el.up('form').child('input[name='+this.name+']:checked', true).value;
     },
     
@@ -16484,10 +16913,10 @@ Roo.extend(Roo.bootstrap.Radio, Roo.bootstrap.CheckBox,  {
         var labelWidth = this.labelWidth ? this.labelWidth *1 : 100;
         
         var fieldLabel = {
-            tag: 'span' ,
+            tag: 'label' ,
             //cls : 'control-label' + inline,
             html : this.fieldLabel,
-            style : 'width:' +  labelWidth  + 'px'
+            style : 'width:' +  labelWidth  + 'px;line-height:1;vertical-align:bottom;cursor:default;' // should be css really.
         };
         
  
@@ -16634,7 +17063,7 @@ Roo.extend(Roo.bootstrap.Radio, Roo.bootstrap.CheckBox,  {
     
     getGroupValue : function()
     {
-        var value = ''
+        var value = '';
         Roo.each(this.inputEl().up('form').select('input[name='+this.inputEl().dom.name+']', true).elements, function(v){
             if(v.dom.checked == true){
                 value = v.dom.value;
@@ -19573,11 +20002,13 @@ Roo.extend(Roo.bootstrap.PagingToolbar, Roo.bootstrap.NavSimplebar, {
             _this.navgroup.addItem(e);
         });
         
+        
         this.first = this.navgroup.addItem({
             tooltip: this.firstText,
             cls: "prev",
             icon : 'fa fa-backward',
             disabled: true,
+            preventDefault: true,
             listeners : { click : this.onClick.createDelegate(this, ["first"]) }
         });
         
@@ -19586,6 +20017,7 @@ Roo.extend(Roo.bootstrap.PagingToolbar, Roo.bootstrap.NavSimplebar, {
             cls: "prev",
             icon : 'fa fa-step-backward',
             disabled: true,
+            preventDefault: true,
             listeners : { click :  this.onClick.createDelegate(this, ["prev"]) }
         });
     //this.addSeparator();
@@ -19613,6 +20045,7 @@ Roo.extend(Roo.bootstrap.PagingToolbar, Roo.bootstrap.NavSimplebar, {
             cls: "next",
             html : ' <i class="fa fa-step-forward">',
             disabled: true,
+            preventDefault: true,
             listeners : { click :  this.onClick.createDelegate(this, ["next"]) }
         });
         this.last = this.navgroup.addItem({
@@ -19620,13 +20053,14 @@ Roo.extend(Roo.bootstrap.PagingToolbar, Roo.bootstrap.NavSimplebar, {
             icon : 'fa fa-forward',
             cls: "next",
             disabled: true,
+            preventDefault: true,
             listeners : { click :  this.onClick.createDelegate(this, ["last"]) }
         });
     //this.addSeparator();
         this.loading = this.navgroup.addItem({
             tooltip: this.refreshText,
             icon: 'fa fa-refresh',
-            
+            preventDefault: true,
             listeners : { click : this.onClick.createDelegate(this, ["refresh"]) }
         });
 
@@ -19635,7 +20069,7 @@ Roo.extend(Roo.bootstrap.PagingToolbar, Roo.bootstrap.NavSimplebar, {
     // private
     updateInfo : function(){
         if(this.displayEl){
-            var count = this.ds.getCount();
+            var count = (typeof(this.getCount) == 'undefined') ? this.ds.getCount() : this.getCount();
             var msg = count == 0 ?
                 this.emptyMsg :
                 String.format(
@@ -19728,10 +20162,12 @@ Roo.extend(Roo.bootstrap.PagingToolbar, Roo.bootstrap.NavSimplebar, {
 
     // private
     onClick : function(which){
+        
         var ds = this.ds;
         if (!ds) {
             return;
         }
+        
         switch(which){
             case "first":
                 ds.load({params:{start: 0, limit: this.pageSize}});
@@ -21081,7 +21517,7 @@ Roo.extend(Roo.bootstrap.Tooltip, Roo.bootstrap.Component,  {
             clearTimeout(this.timeout);
         }
         
-        this.hoverState = 'in'
+        this.hoverState = 'in';
          //Roo.log("enter - show");
         if (!this.delay || !this.delay.show) {
             this.show();
@@ -21098,7 +21534,7 @@ Roo.extend(Roo.bootstrap.Tooltip, Roo.bootstrap.Component,  {
     {
         clearTimeout(this.timeout);
     
-        this.hoverState = 'out'
+        this.hoverState = 'out';
          if (!this.delay || !this.delay.hide) {
             this.hide();
             return 
@@ -21150,7 +21586,7 @@ Roo.extend(Roo.bootstrap.Tooltip, Roo.bootstrap.Component,  {
         if (autoPlace) {
             // fixme..
         }
-        var align = Roo.bootstrap.Tooltip.alignment[placement]
+        var align = Roo.bootstrap.Tooltip.alignment[placement];
         this.el.alignTo(this.bindEl, align[0],align[1]);
         //var arrow = this.el.select('.arrow',true).first();
         //arrow.set(align[2], 
@@ -21214,40 +21650,99 @@ Roo.bootstrap.LocationPicker = function(config){
     
     Roo.bootstrap.LocationPicker.superclass.constructor.call(this, config);
     
-     this.addEvents({
-            /**
-             * @event initial
-             * Fires when the picker initialized.
-             * @param {Roo.bootstrap.LocationPicker} this
-             * @param {Google Location} location
-             */
-            initial : true,
-            /**
-             * @event positionchanged
-             * Fires when the picker position changed.
-             * @param {Roo.bootstrap.LocationPicker} this
-             * @param {Google Location} location
-             */
-            positionchanged : true,
-            /**
-             * @event resize
-             * Fires when the map resize.
-             * @param {Roo.bootstrap.LocationPicker} this
-             */
-            resize : true,
-            /**
-             * @event show
-             * Fires when the map show.
-             * @param {Roo.bootstrap.LocationPicker} this
-             */
-            show : true,
-            /**
-             * @event hide
-             * Fires when the map hide.
-             * @param {Roo.bootstrap.LocationPicker} this
-             */
-            hide : true
-        });
+    this.addEvents({
+        /**
+         * @event initial
+         * Fires when the picker initialized.
+         * @param {Roo.bootstrap.LocationPicker} this
+         * @param {Google Location} location
+         */
+        initial : true,
+        /**
+         * @event positionchanged
+         * Fires when the picker position changed.
+         * @param {Roo.bootstrap.LocationPicker} this
+         * @param {Google Location} location
+         */
+        positionchanged : true,
+        /**
+         * @event resize
+         * Fires when the map resize.
+         * @param {Roo.bootstrap.LocationPicker} this
+         */
+        resize : true,
+        /**
+         * @event show
+         * Fires when the map show.
+         * @param {Roo.bootstrap.LocationPicker} this
+         */
+        show : true,
+        /**
+         * @event hide
+         * Fires when the map hide.
+         * @param {Roo.bootstrap.LocationPicker} this
+         */
+        hide : true,
+        /**
+         * @event mapClick
+         * Fires when click the map.
+         * @param {Roo.bootstrap.LocationPicker} this
+         * @param {Map event} e
+         */
+        mapClick : true,
+        /**
+         * @event mapRightClick
+         * Fires when right click the map.
+         * @param {Roo.bootstrap.LocationPicker} this
+         * @param {Map event} e
+         */
+        mapRightClick : true,
+        /**
+         * @event markerClick
+         * Fires when click the marker.
+         * @param {Roo.bootstrap.LocationPicker} this
+         * @param {Map event} e
+         */
+        markerClick : true,
+        /**
+         * @event markerRightClick
+         * Fires when right click the marker.
+         * @param {Roo.bootstrap.LocationPicker} this
+         * @param {Map event} e
+         */
+        markerRightClick : true,
+        /**
+         * @event OverlayViewDraw
+         * Fires when OverlayView Draw
+         * @param {Roo.bootstrap.LocationPicker} this
+         */
+        OverlayViewDraw : true,
+        /**
+         * @event OverlayViewOnAdd
+         * Fires when OverlayView Draw
+         * @param {Roo.bootstrap.LocationPicker} this
+         */
+        OverlayViewOnAdd : true,
+        /**
+         * @event OverlayViewOnRemove
+         * Fires when OverlayView Draw
+         * @param {Roo.bootstrap.LocationPicker} this
+         */
+        OverlayViewOnRemove : true,
+        /**
+         * @event OverlayViewShow
+         * Fires when OverlayView Draw
+         * @param {Roo.bootstrap.LocationPicker} this
+         * @param {Pixel} cpx
+         */
+        OverlayViewShow : true,
+        /**
+         * @event OverlayViewHide
+         * Fires when OverlayView Draw
+         * @param {Roo.bootstrap.LocationPicker} this
+         */
+        OverlayViewHide : true
+    });
         
 };
 
@@ -21282,11 +21777,7 @@ Roo.extend(Roo.bootstrap.LocationPicker, Roo.bootstrap.Component,  {
     },
     
     initEvents: function(ct, position)
-    {   
-        if(!this.mapTypeId){
-            this.mapTypeId = google.maps.MapTypeId.ROADMAP;
-        }
-            
+    {       
         if(!this.el.getWidth() || this.isApplied()){
             return;
         }
@@ -21298,19 +21789,95 @@ Roo.extend(Roo.bootstrap.LocationPicker, Roo.bootstrap.Component,  {
     
     initial: function()
     {
+        if(!this.mapTypeId){
+            this.mapTypeId = google.maps.MapTypeId.ROADMAP;
+        }
+        
         this.gMapContext = this.GMapContext();
         
-        var _this = this;
+        this.initOverlayView();
         
+        this.OverlayView = new Roo.bootstrap.LocationPicker.OverlayView(this.gMapContext.map);
+        
+        var _this = this;
+                
         google.maps.event.addListener(this.gMapContext.marker, "dragend", function(event) {
             _this.setPosition(_this.gMapContext.marker.position);
         });
         
+        google.maps.event.addListener(this.gMapContext.map, 'click', function(event){
+            Roo.log('mapClick');
+            _this.fireEvent('mapClick', this, event);
+            
+        });
+
+        google.maps.event.addListener(this.gMapContext.map, 'rightclick', function(event){
+            Roo.log('mapRightClick');
+            _this.fireEvent('mapRightClick', this, event);
+            
+        });
+        
+        google.maps.event.addListener(this.gMapContext.marker, 'click', function(event){
+            Roo.log('markerClick');
+            _this.fireEvent('markerClick', this, event);
+            
+        });
+
+        google.maps.event.addListener(this.gMapContext.marker, 'rightclick', function(event){
+            Roo.log('markerRightClick');
+            _this.fireEvent('markerRightClick', this, event);
+            
+        });
+        
         this.setPosition(this.gMapContext.location);
         
         this.fireEvent('initial', this, this.gMapContext.location);
     },
     
+    initOverlayView: function()
+    {
+        var _this = this;
+        
+        Roo.bootstrap.LocationPicker.OverlayView.prototype = Roo.apply(new google.maps.OverlayView(), {
+            
+            draw: function()
+            {
+                Roo.log('OverlayView draw');
+                _this.fireEvent('OverlayViewDraw', _this);
+            },
+            
+            onAdd: function()
+            {
+                Roo.log('OverlayView onAdd');
+                _this.fireEvent('OverlayViewOnAdd', _this);
+            },
+            
+            onRemove: function()
+            {
+                Roo.log('OverlayView onRemove');
+                _this.fireEvent('OverlayViewOnRemove', _this);
+            },
+            
+            show: function(cpx)
+            {
+                Roo.log('OverlayView show');
+                _this.fireEvent('OverlayViewShow', _this, cpx);
+            },
+            
+            hide: function()
+            {
+                Roo.log('OverlayView hide');
+                _this.fireEvent('OverlayViewHide', _this);
+            }
+            
+        });
+    },
+    
+    fromLatLngToContainerPixel: function(event)
+    {
+        return this.OverlayView.getProjection().fromLatLngToContainerPixel(event.latLng);
+    },
+    
     isApplied: function() 
     {
         return this.getGmapContext() == false ? false : true;
@@ -21500,7 +22067,18 @@ Roo.extend(Roo.bootstrap.LocationPicker, Roo.bootstrap.Component,  {
     }
     
 });
-/*
+
+Roo.apply(Roo.bootstrap.LocationPicker, {
+    
+    OverlayView : function(map, options)
+    {
+        options = options || {};
+        
+        this.setMap(map);
+    }
+    
+    
+});/*
  * - LGPL
  *
  * Alert