update to include securepass
[roojs1] / roojs-bootstrap-debug.js
index 41199ae..4226495 100644 (file)
@@ -1293,6 +1293,15 @@ Roo.extend(Roo.bootstrap.Container, Roo.bootstrap.Component,  {
         return this.el.select('.panel-heading',true).first()
     },
     
+    bodyEl : function()
+    {
+        if(!this.el || !this.panel.length){
+            return;
+        }
+        
+        return this.el.select('.panel-body',true).first()
+    },
+    
     titleEl : function()
     {
         if(!this.el || !this.panel.length || !this.header.length){
@@ -2495,7 +2504,14 @@ Roo.bootstrap.Modal = function(config){
          * The raw btnclick event for the button
          * @param {Roo.EventObject} e
          */
-        "btnclick" : true
+        "btnclick" : true,
+        /**
+         * @event resize
+         * Fire when dialog resize
+         * @param {Roo.bootstrap.Modal} this
+         * @param {Roo.EventObject} e
+         */
+        "resize" : true
     });
     this.buttons = this.buttons || [];
 
@@ -2569,10 +2585,9 @@ Roo.extend(Roo.bootstrap.Modal, Roo.bootstrap.Component,  {
         this.dialogEl = this.el.select('.modal-dialog',true).first();
         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.headerEl = this.el.select('.modal-header',true).first();
         this.titleEl = this.el.select('.modal-title',true).first();
-
-
+        this.footerEl = this.el.select('.modal-footer',true).first();
 
         this.maskEl = Roo.DomHelper.append(document.body, {tag: "div", cls:"x-dlg-mask"}, true);
         this.maskEl.enableDisplayMode("block");
@@ -2756,13 +2771,17 @@ Roo.extend(Roo.bootstrap.Modal, Roo.bootstrap.Component,  {
         //}
 
         Roo.get(document.body).addClass("x-body-masked");
+        
         this.maskEl.setSize(Roo.lib.Dom.getViewWidth(true),   Roo.lib.Dom.getViewHeight(true));
+        this.maskEl.setStyle('z-index', Roo.bootstrap.Modal.zIndex++);
         this.maskEl.show();
-        this.el.setStyle('zIndex', '10001');
-
+        
+        this.resize();
+        
         this.fireEvent('show', this);
 
-        this.resize();
+        // set zindex here - otherwise it appears to be ignored...
+        this.el.setStyle('z-index', Roo.bootstrap.Modal.zIndex++);
 
         (function () {
             this.items.forEach( function(e) {
@@ -2826,6 +2845,7 @@ Roo.extend(Roo.bootstrap.Modal, Roo.bootstrap.Component,  {
 
         this.bodyEl.setHeight(h-this.diff);
 
+        this.fireEvent('resize', this);
 
     },
     setContentSize  : function(w, h)
@@ -2926,7 +2946,9 @@ Roo.apply(Roo.bootstrap.Modal,  {
                 name : 'cancel',
                 html : 'Cancel'
             }
-        ]
+        ],
+        
+        zIndex : 10001
 });
 /*
  * - LGPL
@@ -3034,7 +3056,7 @@ Roo.bootstrap.MessageBox = function(){
                     //collapsible : false,
                     //shim:true,
                     //modal: true,
-                  //  width:400,
+                //    width: 'auto',
                   //  height:100,
                     //buttonAlign:"center",
                     closeClick : function(){
@@ -3079,11 +3101,13 @@ Roo.bootstrap.MessageBox = function(){
                 textareaEl.enableDisplayMode();
                 progressEl = Roo.get(bodyEl.dom.childNodes[4]);
                 progressEl.enableDisplayMode();
-                var pf = progressEl.dom.firstChild;
-                if (pf) {
-                    pp = Roo.get(pf.firstChild);
-                    pp.setHeight(pf.offsetHeight);
-                }
+                
+                // This is supposed to be the progessElement.. but I think it's controlling the height of everything..
+                //var pf = progressEl.dom.firstChild;
+                //if (pf) {
+                    //pp = Roo.get(pf.firstChild);
+                    //pp.setHeight(pf.offsetHeight);
+                //}
                 
             }
             return dlg;
@@ -3095,9 +3119,11 @@ Roo.bootstrap.MessageBox = function(){
          * the XHTML-compliant non-breaking space character ' ')
          * @return {Roo.MessageBox} This message box
          */
-        updateText : function(text){
+        updateText : function(text)
+        {
             if(!dlg.isVisible() && !opt.width){
-                dlg.resizeTo(this.maxWidth, 100); // resize first so content is never clipped from previous shows
+                dlg.dialogEl.setWidth(this.maxWidth);
+                // dlg.resizeTo(this.maxWidth, 100); // forcing the height breaks long alerts()
             }
             msgEl.innerHTML = text || ' ';
       
@@ -3328,12 +3354,14 @@ Roo.Msg.show({
          * @param {Object} scope (optional) The scope of the callback function
          * @return {Roo.MessageBox} This message box
          */
-        alert : function(title, msg, fn, scope){
+        alert : function(title, msg, fn, scope)
+        {
             this.show({
                 title : title,
                 msg : msg,
                 buttons: this.OK,
                 fn: fn,
+                closable : false,
                 scope : scope,
                 modal : true
             });
@@ -5657,20 +5685,18 @@ Roo.LoadMask.prototype = {
         }
         */
     
-        
-        
-        this.el.unmask(this.removeMask);
+        (function() { this.el.unmask(this.removeMask); }).defer(50, this);
     },
     // private
     onLoad : function()
     {
-        this.el.unmask(this.removeMask);
+        (function() { this.el.unmask(this.removeMask); }).defer(50, this);
     },
 
     // private
     onBeforeLoad : function(){
         if(!this.disabled){
-            this.el.mask(this.msg, this.msgCls);
+            (function() { this.el.mask(this.msg, this.msgCls); }).defer(50, this);
         }
     },
 
@@ -7431,6 +7457,9 @@ Roo.form.Action.ACTION_TYPES = {
 
 Roo.bootstrap.Form = function(config){
     Roo.bootstrap.Form.superclass.constructor.call(this, config);
+    
+    Roo.bootstrap.Form.popover.apply();
+    
     this.addEvents({
         /**
          * @event clientvalidation
@@ -7505,6 +7534,11 @@ Roo.extend(Roo.bootstrap.Form, Roo.bootstrap.Component,  {
     waitMsgTarget : false,
 
     loadMask : true,
+    
+    /**
+     * @cfg {Boolean} errorMask (true|false) default false
+     */
+    errorMask : false,
 
     getAutoCreate : function(){
 
@@ -7546,7 +7580,7 @@ Roo.extend(Roo.bootstrap.Form, Roo.bootstrap.Component,  {
             e.preventDefault();
             return false;
         });
-
+        
     },
     // private
     onSubmit : function(e){
@@ -7560,14 +7594,28 @@ Roo.extend(Roo.bootstrap.Form, Roo.bootstrap.Component,  {
     isValid : function(){
         var items = this.getItems();
         var valid = true;
+        var target = false;
+        
         items.each(function(f){
-           if(!f.validate()){
-               valid = false;
+            
+            if(f.validate()){
+                return;
+            }
+            valid = false;
 
-           }
+            if(!target && f.el.isVisible(true)){
+                target = f;
+            }
+           
         });
+        
+        if(this.errorMask && !valid){
+            Roo.bootstrap.Form.popover.mask(this, target);
+        }
+        
         return valid;
     },
+    
     /**
      * Returns true if any fields in this form have changed since their original load.
      * @return Boolean
@@ -7860,7 +7908,7 @@ clientValidation  Boolean          Applies to submit only.  Pass true to call fo
                 v = f.getRawValue() ; // dates..
             }
             // combo boxes where name != hiddenName...
-            if (f.name != f.getName()) {
+            if (f.name !== false && f.name != '' && f.name != f.getName()) {
                 ret[f.name] = f.getRawValue();
             }
             ret[f.getName()] = v;
@@ -7930,6 +7978,180 @@ clientValidation  Boolean          Applies to submit only.  Pass true to call fo
     }
 
 });
+
+Roo.apply(Roo.bootstrap.Form, {
+    
+    popover : {
+        
+        padding : 5,
+        
+        isApplied : false,
+        
+        isMasked : false,
+        
+        form : false,
+        
+        target : false,
+        
+        toolTip : false,
+        
+        intervalID : false,
+        
+        maskEl : false,
+        
+        apply : function()
+        {
+            if(this.isApplied){
+                return;
+            }
+            
+            this.maskEl = {
+                top : Roo.DomHelper.append(Roo.get(document.body), { tag: "div", cls:"x-dlg-mask roo-form-top-mask" }, true),
+                left : Roo.DomHelper.append(Roo.get(document.body), { tag: "div", cls:"x-dlg-mask roo-form-left-mask" }, true),
+                bottom : Roo.DomHelper.append(Roo.get(document.body), { tag: "div", cls:"x-dlg-mask roo-form-bottom-mask" }, true),
+                right : Roo.DomHelper.append(Roo.get(document.body), { tag: "div", cls:"x-dlg-mask roo-form-right-mask" }, true)
+            };
+            
+            this.maskEl.top.enableDisplayMode("block");
+            this.maskEl.left.enableDisplayMode("block");
+            this.maskEl.bottom.enableDisplayMode("block");
+            this.maskEl.right.enableDisplayMode("block");
+            
+            this.toolTip = new Roo.bootstrap.Tooltip({
+                cls : 'roo-form-error-popover',
+                alignment : {
+                    'left' : ['r-l', [-2,0], 'right'],
+                    'right' : ['l-r', [2,0], 'left'],
+                    'bottom' : ['tl-bl', [0,2], 'top'],
+                    'top' : [ 'bl-tl', [0,-2], 'bottom']
+                }
+            });
+            
+            this.toolTip.render(Roo.get(document.body));
+
+            this.toolTip.el.enableDisplayMode("block");
+            
+            Roo.get(document.body).on('click', function(){
+                this.unmask();
+            }, this);
+            
+            this.isApplied = true
+        },
+        
+        mask : function(form, target)
+        {
+            this.form = form;
+            
+            this.target = target;
+            
+            if(!this.form.errorMask || !target.el){
+                return;
+            }
+            
+            var scrollable = this.target.el.findScrollableParent() || this.target.el.findParent('div.modal', 100, true) || Roo.get(document.body);
+            
+            var scrolled = scrollable.getScroll();
+            
+            var ot = this.target.el.calcOffsetsTo(scrollable);
+            
+            scrollTo = ot[1] - 100;
+            
+            scrollable.scrollTo('top', scrollTo);
+            
+            var box = this.target.el.getBox();
+
+            var zIndex = Roo.bootstrap.Modal.zIndex++;
+
+            this.maskEl.top.setStyle('position', 'fixed');
+            this.maskEl.top.setStyle('z-index', zIndex);
+            this.maskEl.top.setSize(Roo.lib.Dom.getDocumentWidth(), box.y - this.padding);
+            this.maskEl.top.setXY([0, 0]);
+            this.maskEl.top.show();
+
+            this.maskEl.left.setStyle('position', 'fixed');
+            this.maskEl.left.setStyle('z-index', zIndex);
+            this.maskEl.left.setSize(Roo.lib.Dom.getDocumentWidth() - box.right - this.padding, box.height + this.padding * 2);
+            this.maskEl.left.setXY([box.right + this.padding, box.y - this.padding]);
+            this.maskEl.left.show();
+
+            this.maskEl.bottom.setStyle('position', 'fixed');
+            this.maskEl.bottom.setStyle('z-index', zIndex);
+            this.maskEl.bottom.setSize(Roo.lib.Dom.getDocumentWidth(), Roo.lib.Dom.getDocumentHeight() - box.bottom - this.padding);
+            this.maskEl.bottom.setXY([0, box.bottom + this.padding]);
+            this.maskEl.bottom.show();
+
+            this.maskEl.right.setStyle('position', 'fixed');
+            this.maskEl.right.setStyle('z-index', zIndex);
+            this.maskEl.right.setSize(box.x - this.padding, box.height + this.padding * 2);
+            this.maskEl.right.setXY([0, box.y - this.padding]);
+            this.maskEl.right.show();
+
+
+            this.toolTip.bindEl = this.target.el;
+
+            this.toolTip.el.setStyle('z-index', Roo.bootstrap.Modal.zIndex++);
+
+            var tip = this.target.blankText;
+
+            if(this.target.getValue() !== '' && this.target.regexText.length){
+                tip = this.target.regexText;
+            }
+
+            this.toolTip.show(tip);
+
+            this.intervalID = window.setInterval(function() {
+                Roo.bootstrap.Form.popover.unmask();
+            }, 10000);
+
+            window.onwheel = function(){ return false;};
+            
+            (function(){ this.isMasked = true; }).defer(500, this);
+                
+            
+            
+        },
+        
+        unmask : function()
+        {
+            if(!this.isApplied || !this.isMasked || !this.form || !this.target || !this.form.errorMask){
+                return;
+            }
+            
+            this.maskEl.top.setStyle('position', 'absolute');
+            this.maskEl.top.setSize(0, 0).setXY([0, 0]);
+            this.maskEl.top.hide();
+
+            this.maskEl.left.setStyle('position', 'absolute');
+            this.maskEl.left.setSize(0, 0).setXY([0, 0]);
+            this.maskEl.left.hide();
+
+            this.maskEl.bottom.setStyle('position', 'absolute');
+            this.maskEl.bottom.setSize(0, 0).setXY([0, 0]);
+            this.maskEl.bottom.hide();
+
+            this.maskEl.right.setStyle('position', 'absolute');
+            this.maskEl.right.setSize(0, 0).setXY([0, 0]);
+            this.maskEl.right.hide();
+            
+            this.toolTip.hide();
+            
+            this.toolTip.el.hide();
+            
+            window.onwheel = function(){ return true;};
+            
+            if(this.intervalID){
+                window.clearInterval(this.intervalID);
+                this.intervalID = false;
+            }
+            
+            this.isMasked = false;
+            
+        }
+        
+    }
+    
+});
+
 /*
  * Based on:
  * Ext JS Library 1.1.1
@@ -8045,7 +8267,11 @@ Roo.form.VTypes = function(){
  * @cfg {Number} md colspan out of 12 for computer-sized screens
  * @cfg {Number} lg colspan out of 12 for large computer-sized screens
  * @cfg {string} value default value of the input
- * @cfg {Number} labelWidth set the width of label (0-12)
+ * @cfg {Number} labelWidth set the width of label 
+ * @cfg {Number} labellg set the width of label (1-12)
+ * @cfg {Number} labelmd set the width of label (1-12)
+ * @cfg {Number} labelsm set the width of label (1-12)
+ * @cfg {Number} labelxs set the width of label (1-12)
  * @cfg {String} labelAlign (top|left)
  * @cfg {Boolean} readOnly Specifies that the field should be read-only
  * @cfg {String} autocomplete - default is new-password see: https://developers.google.com/web/fundamentals/input/form/label-and-name-inputs?hl=en
@@ -8063,58 +8289,59 @@ Roo.form.VTypes = function(){
  */
 
 Roo.bootstrap.Input = function(config){
+    
     Roo.bootstrap.Input.superclass.constructor.call(this, config);
-   
-        this.addEvents({
-            /**
-             * @event focus
-             * Fires when this field receives input focus.
-             * @param {Roo.form.Field} this
-             */
-            focus : true,
-            /**
-             * @event blur
-             * Fires when this field loses input focus.
-             * @param {Roo.form.Field} this
-             */
-            blur : true,
-            /**
-             * @event specialkey
-             * Fires when any key related to navigation (arrows, tab, enter, esc, etc.) is pressed.  You can check
-             * {@link Roo.EventObject#getKey} to determine which key was pressed.
-             * @param {Roo.form.Field} this
-             * @param {Roo.EventObject} e The event object
-             */
-            specialkey : true,
-            /**
-             * @event change
-             * Fires just before the field blurs if the field value has changed.
-             * @param {Roo.form.Field} this
-             * @param {Mixed} newValue The new value
-             * @param {Mixed} oldValue The original value
-             */
-            change : true,
-            /**
-             * @event invalid
-             * Fires after the field has been marked as invalid.
-             * @param {Roo.form.Field} this
-             * @param {String} msg The validation message
-             */
-            invalid : true,
-            /**
-             * @event valid
-             * Fires after the field has been validated with no errors.
-             * @param {Roo.form.Field} this
-             */
-            valid : true,
-             /**
-             * @event keyup
-             * Fires after the key up
-             * @param {Roo.form.Field} this
-             * @param {Roo.EventObject}  e The event Object
-             */
-            keyup : true
-        });
+    
+    this.addEvents({
+        /**
+         * @event focus
+         * Fires when this field receives input focus.
+         * @param {Roo.form.Field} this
+         */
+        focus : true,
+        /**
+         * @event blur
+         * Fires when this field loses input focus.
+         * @param {Roo.form.Field} this
+         */
+        blur : true,
+        /**
+         * @event specialkey
+         * Fires when any key related to navigation (arrows, tab, enter, esc, etc.) is pressed.  You can check
+         * {@link Roo.EventObject#getKey} to determine which key was pressed.
+         * @param {Roo.form.Field} this
+         * @param {Roo.EventObject} e The event object
+         */
+        specialkey : true,
+        /**
+         * @event change
+         * Fires just before the field blurs if the field value has changed.
+         * @param {Roo.form.Field} this
+         * @param {Mixed} newValue The new value
+         * @param {Mixed} oldValue The original value
+         */
+        change : true,
+        /**
+         * @event invalid
+         * Fires after the field has been marked as invalid.
+         * @param {Roo.form.Field} this
+         * @param {String} msg The validation message
+         */
+        invalid : true,
+        /**
+         * @event valid
+         * Fires after the field has been validated with no errors.
+         * @param {Roo.form.Field} this
+         */
+        valid : true,
+         /**
+         * @event keyup
+         * Fires after the key up
+         * @param {Roo.form.Field} this
+         * @param {Roo.EventObject}  e The event Object
+         */
+        keyup : true
+    });
 };
 
 Roo.extend(Roo.bootstrap.Input, Roo.bootstrap.Component,  {
@@ -8192,7 +8419,7 @@ Roo.extend(Roo.bootstrap.Input, Roo.bootstrap.Component,  {
     /**
      * @cfg {String} blankText Error text to display if the allow blank validation fails (defaults to "This field is required")
      */
-    blankText : "This field is required",
+    blankText : "Please complete this mandatory field",
     
      /**
      * @cfg {Number} minLength Minimum input field length required (defaults to 0)
@@ -8253,6 +8480,11 @@ Roo.extend(Roo.bootstrap.Input, Roo.bootstrap.Component,  {
     
     indicatorpos : 'left',
     
+    labellg : 0,
+    labelmd : 0,
+    labelsm : 0,
+    labelxs : 0,
+    
     parentLabelAlign : function()
     {
         var parent = this;
@@ -8389,6 +8621,8 @@ Roo.extend(Roo.bootstrap.Input, Roo.bootstrap.Component,  {
         
         if (align ==='left' && this.fieldLabel.length) {
             
+            cfg.cls += ' roo-form-group-label-left';
+            
             cfg.cn = [
                 {
                     tag : 'i',
@@ -8398,25 +8632,27 @@ Roo.extend(Roo.bootstrap.Input, Roo.bootstrap.Component,  {
                 {
                     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: [
                         inputblock
                     ]
                 }
-
             ];
             
+            var labelCfg = cfg.cn[1];
+            var contentCfg = cfg.cn[2];
+            
             if(this.indicatorpos == 'right'){
                 cfg.cn = [
                     {
                         tag: 'label',
                         'for' :  id,
-                        cls : 'control-label col-sm-' + this.labelWidth,
+                        cls : 'control-label',
                         html : this.fieldLabel
 
                     },
@@ -8426,15 +8662,48 @@ Roo.extend(Roo.bootstrap.Input, Roo.bootstrap.Component,  {
                         tooltip : 'This field is required'
                     },
                     {
-                        cls : "col-sm-" + (12 - this.labelWidth), 
+                        cls : "",
                         cn: [
                             inputblock
                         ]
                     }
 
                 ];
+                
+                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 = [
@@ -8833,7 +9102,7 @@ Roo.extend(Roo.bootstrap.Input, Roo.bootstrap.Component,  {
      */
     markValid : function()
     {
-        if(!this.el  || this.preventMark){ // not rendered
+        if(!this.el  || this.preventMark){ // not rendered...
             return;
         }
         
@@ -8845,7 +9114,11 @@ Roo.extend(Roo.bootstrap.Input, Roo.bootstrap.Component,  {
             this.el.select('.form-control-feedback', true).first().removeClass([this.invalidFeedbackClass, this.validFeedbackClass]);
         }
 
-        if(this.disabled || this.allowBlank){
+        if(this.disabled){
+            return;
+        }
+        
+        if(this.allowBlank && !this.getRawValue().length){
             return;
         }
         
@@ -8887,7 +9160,11 @@ Roo.extend(Roo.bootstrap.Input, Roo.bootstrap.Component,  {
             this.el.select('.form-control-feedback', true).first().removeClass([this.invalidFeedbackClass, this.validFeedbackClass]);
         }
 
-        if(this.disabled || this.allowBlank){
+        if(this.disabled){
+            return;
+        }
+        
+        if(this.allowBlank && !this.getRawValue().length){
             return;
         }
         
@@ -9107,48 +9384,71 @@ Roo.extend(Roo.bootstrap.TextArea, Roo.bootstrap.Input,  {
         }
         
         if (align ==='left' && this.fieldLabel.length) {
-//                Roo.log("left and has label");
-                cfg.cn = [
-                    
-                    {
-                        tag: 'label',
-                        'for' :  id,
-                        cls : 'control-label col-sm-' + this.labelWidth,
-                        html : this.fieldLabel
-                        
-                    },
-                    {
-                        cls : "col-sm-" + (12 - this.labelWidth), 
-                        cn: [
-                            inputblock
-                        ]
-                    }
-                    
-                ];
+            cfg.cn = [
+                {
+                    tag: 'label',
+                    'for' :  id,
+                    cls : 'control-label',
+                    html : this.fieldLabel
+                },
+                {
+                    cls : "",
+                    cn: [
+                        inputblock
+                    ]
+                }
+
+            ];
+            
+            if(this.labelWidth > 12){
+                cfg.cn[0].style = "width: " + this.labelWidth + 'px';
+            }
+
+            if(this.labelWidth < 13 && this.labelmd == 0){
+                this.labelmd = this.labelWidth;
+            }
+
+            if(this.labellg > 0){
+                cfg.cn[0].cls += ' col-lg-' + this.labellg;
+                cfg.cn[1].cls += ' col-lg-' + (12 - this.labellg);
+            }
+
+            if(this.labelmd > 0){
+                cfg.cn[0].cls += ' col-md-' + this.labelmd;
+                cfg.cn[1].cls += ' col-md-' + (12 - this.labelmd);
+            }
+
+            if(this.labelsm > 0){
+                cfg.cn[0].cls += ' col-sm-' + this.labelsm;
+                cfg.cn[1].cls += ' col-sm-' + (12 - this.labelsm);
+            }
+
+            if(this.labelxs > 0){
+                cfg.cn[0].cls += ' col-xs-' + this.labelxs;
+                cfg.cn[1].cls += ' col-xs-' + (12 - this.labelxs);
+            }
+            
         } else if ( this.fieldLabel.length) {
-//                Roo.log(" label");
-                 cfg.cn = [
-                   
-                    {
-                        tag: 'label',
-                        //cls : 'input-group-addon',
-                        html : this.fieldLabel
-                        
-                    },
-                    
-                    inputblock
-                    
-                ];
+            cfg.cn = [
+
+               {
+                   tag: 'label',
+                   //cls : 'input-group-addon',
+                   html : this.fieldLabel
+
+               },
+
+               inputblock
+
+           ];
 
         } else {
-            
-//                   Roo.log(" no label && no align");
-                cfg.cn = [
-                    
-                        inputblock
-                    
-                ];
-                
+
+            cfg.cn = [
+
+                inputblock
+
+            ];
                 
         }
         
@@ -9569,9 +9869,10 @@ Roo.extend(Roo.bootstrap.TriggerField, Roo.bootstrap.Input,  {
             combobox.cls += ' roo-select2-container-multi';
         }
         
-        if (align ==='left' && this.fieldLabel.length && this.labelWidth) {
+        if (align ==='left' && this.fieldLabel.length) {
             
-//                Roo.log("left and has label");
+            cfg.cls += ' roo-form-group-label-left';
+
             cfg.cn = [
                 {
                     tag : 'i',
@@ -9581,12 +9882,12 @@ Roo.extend(Roo.bootstrap.TriggerField, Roo.bootstrap.Input,  {
                 {
                     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
                     ]
@@ -9594,28 +9895,66 @@ Roo.extend(Roo.bootstrap.TriggerField, Roo.bootstrap.Input,  {
 
             ];
             
+            var labelCfg = cfg.cn[1];
+            var contentCfg = cfg.cn[2];
+            
             if(this.indicatorpos == 'right'){
                 cfg.cn = [
                     {
                         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);
             }
             
         } else if ( this.fieldLabel.length) {
@@ -9642,16 +9981,19 @@ Roo.extend(Roo.bootstrap.TriggerField, Roo.bootstrap.Input,  {
                 cfg.cn = [
                     {
                        tag: 'label',
-                       //cls : 'input-group-addon',
-                       html : this.fieldLabel
+                       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'
+                           }
+                       ]
 
                     },
-                    {
-                       tag : 'i',
-                       cls : 'roo-required-indicator right-indicator text-danger fa fa-lg fa-star',
-                       tooltip : 'This field is required'
-                    },
-                    
                     combobox
 
                 ];
@@ -9665,7 +10007,7 @@ Roo.extend(Roo.bootstrap.TriggerField, Roo.bootstrap.Input,  {
                      
                 
         }
-         
+        
         var settings=this;
         ['xs','sm','md','lg'].map(function(size){
             if (settings[size]) {
@@ -12267,9 +12609,9 @@ Roo.extend(Roo.bootstrap.ComboBox, Roo.bootstrap.TriggerField, {
     // element that contains real text value.. (when hidden is used..)
     
     getAutoCreate : function()
-    {
+    {   
         var cfg = false;
-        
+        //render
         /*
          * Render classic select for iso
          */
@@ -12293,6 +12635,10 @@ Roo.extend(Roo.bootstrap.ComboBox, Roo.bootstrap.TriggerField, {
          */
         if(!this.tickable){
             cfg = Roo.bootstrap.ComboBox.superclass.getAutoCreate.call(this);
+            if(this.name == 'info_year_invest_id_display_name'){
+                Roo.log('cfg.................................................');
+                Roo.log(cfg);
+            }
             return cfg;
         }
         
@@ -12306,6 +12652,16 @@ Roo.extend(Roo.bootstrap.ComboBox, Roo.bootstrap.TriggerField, {
             cls : 'form-group roo-combobox-tickable' //input-group
         };
         
+        var btn_text_select = '';
+        var btn_text_done = '';
+        var btn_text_cancel = '';
+        
+        if (this.btn_text_show) {
+            btn_text_select = 'Select';
+            btn_text_done = 'Done';
+            btn_text_cancel = 'Cancel'; 
+        }
+        
         var buttons = {
             tag : 'div',
             cls : 'tickable-buttons',
@@ -12314,21 +12670,24 @@ Roo.extend(Roo.bootstrap.ComboBox, Roo.bootstrap.TriggerField, {
                     tag : 'button',
                     type : 'button',
                     cls : 'btn btn-link btn-edit pull-' + this.btnPosition,
-                    html : this.triggerText
+                    //html : this.triggerText
+                    html: btn_text_select
                 },
                 {
                     tag : 'button',
                     type : 'button',
                     name : 'ok',
                     cls : 'btn btn-link btn-ok pull-' + this.btnPosition,
-                    html : 'Done'
+                    //html : 'Done'
+                    html: btn_text_done
                 },
                 {
                     tag : 'button',
                     type : 'button',
                     name : 'cancel',
                     cls : 'btn btn-link btn-cancel pull-' + this.btnPosition,
-                    html : 'Cancel'
+                    //html : 'Cancel'
+                    html: btn_text_cancel
                 }
             ]
         };
@@ -12368,7 +12727,6 @@ Roo.extend(Roo.bootstrap.ComboBox, Roo.bootstrap.TriggerField, {
                             tag: 'li',
                             cls: 'roo-select2-search-field',
                             cn: [
-
                                 buttons
                             ]
                         }
@@ -12399,9 +12757,11 @@ 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';
             
-//                Roo.log("left and has label");
             cfg.cn = [
                 {
                     tag : 'i',
@@ -12411,18 +12771,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'){
                 
@@ -12430,24 +12794,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);
             }
                 
                 
@@ -12476,15 +12877,20 @@ Roo.extend(Roo.bootstrap.ComboBox, Roo.bootstrap.TriggerField, {
                         {
                             tag: 'label',
                             //cls : 'input-group-addon',
-                            html : this.fieldLabel
-
+                            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'
+                                }
+                            ]
                         },
                         
-                        {
-                            tag : 'i',
-                            cls : 'roo-required-indicator right-indicator text-danger fa fa-lg fa-star',
-                            tooltip : 'This field is required'
-                        },
+                        
                         
                         combobox
 
@@ -12841,7 +13247,7 @@ Roo.extend(Roo.bootstrap.ComboBox, Roo.bootstrap.TriggerField, {
         this.list.on('scroll', this.onViewScroll, this);
         
         if(!this.tpl){
-            this.tpl = '<li class="roo-select2-result"><div class="checkbox"><input id="{roo-id}" type="checkbox" {roo-data-checked}><label for="{roo-id}"><b>{' + this.displayField + '}</b></label></li>';
+            this.tpl = '<li class="roo-select2-result"><div class="checkbox"><input id="{roo-id}" type="checkbox" {roo-data-checked}><label for="{roo-id}"><b>{' + this.displayField + '}</b></label></div></li>';
         }
 
         this.view = new Roo.View(this.list, this.tpl, {
@@ -12916,6 +13322,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(){
@@ -13595,8 +14008,9 @@ Roo.extend(Roo.bootstrap.ComboBox, Roo.bootstrap.TriggerField, {
         
         this.list.hide();
         
+        this.hasFocus = false;
+        
         if(this.tickable){
-            this.hasFocus = false;
             this.okBtn.hide();
             this.cancelBtn.hide();
             this.trigger.show();
@@ -13649,8 +14063,7 @@ Roo.extend(Roo.bootstrap.ComboBox, Roo.bootstrap.TriggerField, {
         var lw = this.listWidth || Math.max(this.inputEl().getWidth(), this.minListWidth);
         this.list.setWidth(lw);
         
-        
-         Roo.log('expand');
+        Roo.log('expand');
         
         this.list.show();
         
@@ -14189,13 +14602,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',
@@ -14204,41 +14612,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){
@@ -14346,6 +14838,7 @@ Roo.extend(Roo.bootstrap.ComboBox, Roo.bootstrap.TriggerField, {
             this.touchViewHeaderEl.show();
         }
 
+        this.touchViewEl.setStyle('z-index', Roo.bootstrap.Modal.zIndex++);
         this.touchViewEl.show();
 
         this.touchViewEl.select('.modal-dialog', true).first().setStyle('margin', '0px');
@@ -19626,23 +20119,50 @@ Roo.extend(Roo.bootstrap.CheckBox, Roo.bootstrap.Input,  {
         
         if (align ==='left' && this.fieldLabel.length) {
 //                Roo.log("left and has label");
-                cfg.cn = [
-                    
-                    {
-                        tag: 'label',
-                        'for' :  id,
-                        cls : 'control-label col-md-' + this.labelWidth,
-                        html : this.fieldLabel
-                        
-                    },
-                    {
-                        cls : "col-md-" + (12 - this.labelWidth), 
-                        cn: [
-                            inputblock
-                        ]
-                    }
-                    
-                ];
+            cfg.cn = [
+                {
+                    tag: 'label',
+                    'for' :  id,
+                    cls : 'control-label',
+                    html : this.fieldLabel
+
+                },
+                {
+                    cls : "", 
+                    cn: [
+                        inputblock
+                    ]
+                }
+            ];
+            
+            if(this.labelWidth > 12){
+                cfg.cn[0].style = "width: " + this.labelWidth + 'px';
+            }
+            
+            if(this.labelWidth < 13 && this.labelmd == 0){
+                this.labelmd = this.labelWidth;
+            }
+            
+            if(this.labellg > 0){
+                cfg.cn[0].cls += ' col-lg-' + this.labellg;
+                cfg.cn[1].cls += ' col-lg-' + (12 - this.labellg);
+            }
+            
+            if(this.labelmd > 0){
+                cfg.cn[0].cls += ' col-md-' + this.labelmd;
+                cfg.cn[1].cls += ' col-md-' + (12 - this.labelmd);
+            }
+            
+            if(this.labelsm > 0){
+                cfg.cn[0].cls += ' col-sm-' + this.labelsm;
+                cfg.cn[1].cls += ' col-sm-' + (12 - this.labelsm);
+            }
+            
+            if(this.labelxs > 0){
+                cfg.cn[0].cls += ' col-xs-' + this.labelxs;
+                cfg.cn[1].cls += ' col-xs-' + (12 - this.labelxs);
+            }
+            
         } else if ( this.fieldLabel.length) {
 //                Roo.log(" label");
                 cfg.cn = [
@@ -19744,7 +20264,7 @@ Roo.extend(Roo.bootstrap.CheckBox, Roo.bootstrap.Input,  {
     setChecked : function(state,suppressEvent)
     {
         this.startValue = this.getValue();
-        
+
         if(this.inputType == 'radio'){
             
             Roo.each(this.el.up('form').select('input[name='+this.name+']', true).elements, function(e){
@@ -19870,6 +20390,7 @@ Roo.extend(Roo.bootstrap.CheckBox, Roo.bootstrap.Input,  {
     {
         if(!this.groupId){
             return (this.getValue() == this.inputValue || this.allowBlank) ? true : false;
+            //return (this.getValue() == this.inputValue) ? true : false;
         }
         
         var group = Roo.bootstrap.CheckBox.get(this.groupId);
@@ -19896,10 +20417,6 @@ Roo.extend(Roo.bootstrap.CheckBox, Roo.bootstrap.Input,  {
      */
     markValid : function()
     {
-        if(this.allowBlank){
-            return;
-        }
-        
         var _this = this;
         
         this.fireEvent('valid', this);
@@ -19922,7 +20439,7 @@ Roo.extend(Roo.bootstrap.CheckBox, Roo.bootstrap.Input,  {
             
             return;
         }
-        
+
         if(!this.groupId){
             this.el.findParent('.form-group', false, true).removeClass([this.invalidClass, this.validClass]);
             this.el.findParent('.form-group', false, true).addClass(this.validClass);
@@ -19930,7 +20447,7 @@ Roo.extend(Roo.bootstrap.CheckBox, Roo.bootstrap.Input,  {
         }
         
         var group = Roo.bootstrap.CheckBox.get(this.groupId);
-            
+        
         if(!group){
             return;
         }
@@ -19993,6 +20510,20 @@ Roo.extend(Roo.bootstrap.CheckBox, Roo.bootstrap.Input,  {
         
     },
     
+    clearInvalid : function()
+    {
+        Roo.bootstrap.Input.prototype.clearInvalid.call(this);
+        
+        // this.el.findParent('.form-group', false, true).removeClass([this.invalidClass, this.validClass]);
+        
+        var label = Roo.bootstrap.FieldLabel.get(this.name + '-group');
+        
+        if (label) {
+            label.iconEl.removeClass(label.validClass);
+            label.iconEl.removeClass(label.invalidClass);
+        }
+    },
+    
     disable : function()
     {
         if(this.inputType != 'radio'){
@@ -20076,244 +20607,431 @@ Roo.apply(Roo.bootstrap.CheckBox, {
 /*
  * - LGPL
  *
- * Radio
- *
- *
- * not inline
- *<div class="radio">
-  <label>
-    <input type="radio" name="optionsRadios" id="optionsRadios1" value="option1" checked>
-    Option one is this and that&mdash;be sure to include why it's great
-  </label>
-</div>
- *
- *
- *inline
- *<span>
- *<label class="radio-inline">fieldLabel</label>
- *<label class="radio-inline">
-  <input type="radio" name="inlineRadioOptions" id="inlineRadio1" value="option1"> 1
-</label>
-<span>
- *
- *
+ * RadioItem
+ * 
  */
 
 /**
  * @class Roo.bootstrap.Radio
- * @extends Roo.bootstrap.CheckBox
+ * @extends Roo.bootstrap.Component
  * Bootstrap Radio class
-
+ * @cfg {String} boxLabel - the label associated
+ * @cfg {String} value - the value of radio
+ * 
  * @constructor
  * Create a new Radio
  * @param {Object} config The config object
  */
-
 Roo.bootstrap.Radio = function(config){
     Roo.bootstrap.Radio.superclass.constructor.call(this, config);
-
+    
 };
 
-Roo.extend(Roo.bootstrap.Radio, Roo.bootstrap.CheckBox,  {
-
-    inputType: 'radio',
-    inputValue: '',
-    valueOff: '',
-
+Roo.extend(Roo.bootstrap.Radio, Roo.bootstrap.Component, {
+    
+    boxLabel : '',
+    
+    value : '',
+    
     getAutoCreate : function()
     {
-        var align = (!this.labelAlign) ? this.parentLabelAlign() : this.labelAlign;
-        align = align || 'left'; // default...
-
-
-
-        var id = Roo.id();
-
         var cfg = {
-                tag : this.inline ? 'span' : 'div',
-                cls : 'form-group',
-                cn : []
-        };
-
-        var inline = this.inline ? ' radio-inline' : '';
-
-        var lbl = {
-                tag: 'label' ,
-                // does not need for, as we wrap the input with it..
-                'for' : id,
-                cls : 'control-label box-label' + inline,
-                cn : []
-        };
-        var labelWidth = this.labelWidth ? this.labelWidth *1 : 100;
-
-        var fieldLabel = {
-            tag: 'label' ,
-            //cls : 'control-label' + inline,
-            html : this.fieldLabel,
-            style : 'width:' +  labelWidth  + 'px;line-height:1;vertical-align:bottom;cursor:default;' // should be css really.
+            tag : 'div',
+            cls : 'form-group radio',
+            cn : [
+                {
+                    tag : 'label',
+                    cls : 'box-label',
+                    html : this.boxLabel
+                }
+            ]
         };
+        
+        return cfg;
+    },
+    
+    initEvents : function() 
+    {
+        this.parent().register(this);
+        
+        this.el.on('click', this.onClick, this);
+        
+    },
+    
+    onClick : function()
+    {
+        this.setChecked(true);
+    },
+    
+    setChecked : function(state, suppressEvent)
+    {
+        this.parent().setValue(this.value, suppressEvent);
+        
+    }
+    
+});
 
-        var input =  {
-            tag: 'input',
-            id : id,
-            type : this.inputType,
-            //value : (!this.checked) ? this.valueOff : this.inputValue,
-            value : this.inputValue,
-            cls : 'roo-radio',
-            placeholder : this.placeholder || '' // ?? needed????
-
-        };
-        if (this.weight) { // Validity check?
-            input.cls += " radio-" + this.weight;
-        }
-        if (this.disabled) {
-            input.disabled=true;
-        }
+ /*
+ * - LGPL
+ *
+ * Input
+ * 
+ */
 
-        if(this.checked){
-            input.checked = this.checked;
-        }
+/**
+ * @class Roo.bootstrap.SecurePass
+ * @extends Roo.bootstrap.Input
+ * Bootstrap SecurePass class
+ *
+ * 
+ * @constructor
+ * Create a new SecurePass
+ * @param {Object} config The config object
+ */
+Roo.bootstrap.SecurePass = function (config) {
+    // these go here, so the translation tool can replace them..
+    this.errors = {
+        PwdEmpty: "Please type a password, and then retype it to confirm.",
+        PwdShort: "Your password must be at least 6 characters long. Please type a different password.",
+        PwdLong: "Your password can't contain more than 16 characters. Please type a different password.",
+        PwdBadChar: "The password contains characters that aren't allowed. Please type a different password.",
+        IDInPwd: "Your password can't include the part of your ID. Please type a different password.",
+        FNInPwd: "Your password can't contain your first name. Please type a different password.",
+        LNInPwd: "Your password can't contain your last name. Please type a different password.",
+        TooWeak: "Your password is Too Weak."
+    },
+    this.meterLabel = "Password strength:";
+    this.pwdStrengths = ["Too Weak", "Weak", "Medium", "Strong"];
+    this.meterClass = ["roo-password-meter-tooweak", 
+                       "roo-password-meter-weak", 
+                       "roo-password-meter-medium", 
+                       "roo-password-meter-strong", 
+                       "roo-password-meter-grey"],    
+    Roo.bootstrap.SecurePass.superclass.constructor.call(this, config);
+}
 
-        if (this.name) {
-            input.name = this.name;
-        }
+Roo.extend(Roo.bootstrap.SecurePass, Roo.bootstrap.Input, {
+    /**
+     * @cfg {String/Object} errors A Error spec, or true for a default spec (defaults to
+     * {
+     *  PwdEmpty: "Please type a password, and then retype it to confirm.",
+     *  PwdShort: "Your password must be at least 6 characters long. Please type a different password.",
+     *  PwdLong: "Your password can't contain more than 16 characters. Please type a different password.",
+     *  PwdBadChar: "The password contains characters that aren't allowed. Please type a different password.",
+     *  IDInPwd: "Your password can't include the part of your ID. Please type a different password.",
+     *  FNInPwd: "Your password can't contain your first name. Please type a different password.",
+     *  LNInPwd: "Your password can't contain your last name. Please type a different password."
+     * })
+     */
+    // private
+    
+    meterWidth: 300,
+    errorMsg :'',    
+    errors: {},
+    imageRoot: '/',
+    /**
+     * @cfg {String/Object} Label for the strength meter (defaults to
+     * 'Password strength:')
+     */
+    // private
+    meterLabel: '',
+    /**
+     * @cfg {String/Object} pwdStrengths A pwdStrengths spec, or true for a default spec (defaults to
+     * ['Weak', 'Medium', 'Strong'])
+     */
+    // private    
+    pwdStrengths: [],    
+    // private
+    strength: 0,
+    // private
+    _lastPwd: null,
+    // private
+    kCapitalLetter: 0,
+    kSmallLetter: 1,
+    kDigit: 2,
+    kPunctuation: 3,
+    
+    insecure: false,
+    // private
+    initEvents: function () {
+        Roo.bootstrap.SecurePass.superclass.initEvents.call(this);
 
-        if (this.size) {
-            input.cls += ' input-' + this.size;
+        if (this.el.is('input[type=password]') && Roo.isSafari) {
+            this.el.on('keydown', this.SafariOnKeyDown, this);
         }
 
-        //?? can span's inline have a width??
+        this.el.on('keyup', this.checkStrength, this, {buffer: 50});
+    },
+    // private
+    onRender: function (ct, position) {
+        Roo.bootstrap.SecurePass.superclass.onRender.call(this, ct, position);
+        this.wrap = this.el.wrap({cls: 'x-form-field-wrap'});
+        this.trigger = this.wrap.createChild({tag: 'div', cls: 'StrengthMeter ' + this.triggerClass});
 
-        var settings=this;
-        ['xs','sm','md','lg'].map(function(size){
-            if (settings[size]) {
-                cfg.cls += ' col-' + size + '-' + settings[size];
-            }
+        this.trigger.createChild({
+                  cn: [
+                    {
+                    //id: 'PwdMeter',
+                    tag: 'div',
+                    cls: 'roo-password-meter-grey col-xs-12',
+                    style: {
+                        //width: 0,
+                        //width: this.meterWidth + 'px'                                                
+                        }
+                    },
+                    {                           
+                        cls: 'roo-password-meter-text'                          
+                    }
+                ]            
         });
 
-        var inputblock = input;
-
-        if (this.before || this.after) {
-
-            inputblock = {
-                cls : 'input-group',
-                tag : 'span',
-                cn :  []
-            };
-            if (this.before) {
-                inputblock.cn.push({
-                    tag :'span',
-                    cls : 'input-group-addon',
-                    html : this.before
-                });
-            }
-            inputblock.cn.push(input);
-            if (this.after) {
-                inputblock.cn.push({
-                    tag :'span',
-                    cls : 'input-group-addon',
-                    html : this.after
-                });
+        /*
+        this.trigger.createChild({
+            tag: 'div',
+            cls: 'roo-password-meter-container col-xs-12',
+            style: {               
+                //width: this.meterWidth + 'px'
+            },
+            cn: {
+                tag: 'div',
+                cls: 'roo-password-meter-grey',
+                style: {
+                    //width: this.meterWidth + 'px'                                        
+                },
+                cn: [
+                    {
+                    //id: 'PwdMeter',
+                    tag: 'div',
+                    cls: 'roo-password-meter-grey col-xs-12',
+                    style: {
+                        //width: 0,
+                        //width: this.meterWidth + 'px'                                                
+                        }
+                    },
+                    {                           
+                        cls: 'roo-password-meter-text'                          
+                    }
+                ]                
             }
-
-        };
-
-
-        if (this.fieldLabel && this.fieldLabel.length) {
-            cfg.cn.push(fieldLabel);
+        });
+        */
+        if (this.hideTrigger) {
+            this.trigger.setDisplayed(false);
         }
-
-        // normal bootstrap puts the input inside the label.
-        // however with our styled version - it has to go after the input.
-
-        //lbl.cn.push(inputblock);
-
-        var lblwrap =  {
-            tag: 'span',
-            cls: 'radio' + inline,
-            cn: [
-                inputblock,
-                lbl
-            ]
-        };
-
-        cfg.cn.push( lblwrap);
-
-        if(this.boxLabel){
-            lbl.cn.push({
-                tag: 'span',
-                html: this.boxLabel
-            })
+        this.setSize(this.width || '', this.height || '');
+    },
+    // private
+    onDestroy: function () {
+        if (this.trigger) {
+            this.trigger.removeAllListeners();
+            this.trigger.remove();
         }
-
-
-        return cfg;
-
+        if (this.wrap) {
+            this.wrap.remove();
+        }
+        Roo.bootstrap.TriggerField.superclass.onDestroy.call(this);
     },
+    // private
+    checkStrength: function () {
+        var pwd = this.inputEl().getValue();
+        if (pwd == this._lastPwd) {
+            return;
+        }
 
-    initEvents : function()
-    {
-//        Roo.bootstrap.CheckBox.superclass.initEvents.call(this);
+        var strength;
+        if (this.ClientSideStrongPassword(pwd)) {
+            strength = 3;
+        } else if (this.ClientSideMediumPassword(pwd)) {
+            strength = 2;
+        } else if (this.ClientSideWeakPassword(pwd)) {
+            strength = 1;
+        } else {
+            strength = 0;
+        }
+        
+        console.log('strength1: ' + strength);
+        
+        //var pm = this.trigger.child('div/div/div').dom;
+        var pm = this.trigger.child('div/div');
+        pm.removeClass(this.meterClass);
+        pm.addClass(this.meterClass[strength]);
+                
+        
+        var pt = this.trigger.child('/div').child('>*[class=roo-password-meter-text]').dom;        
+                
+        pt.innerHTML = this.meterLabel + '&nbsp;' + this.pwdStrengths[strength];
+        
+        this._lastPwd = pwd;
+    },
+    reset: function () {
+        Roo.bootstrap.SecurePass.superclass.reset.call(this);
+        
+        this._lastPwd = '';
+        
+        var pm = this.trigger.child('div/div');
+        pm.removeClass(this.meterClass);
+        pm.addClass('roo-password-meter-grey');        
+        
+        
+        var pt = this.trigger.child('/div').child('>*[class=roo-password-meter-text]').dom;        
+        
+        pt.innerHTML = '';
+        this.inputEl().dom.type='password';
+    },
+    // private
+    validateValue: function (value) {
+        
+        if (!Roo.bootstrap.SecurePass.superclass.validateValue.call(this, value)) {
+            return false;
+        }
+        if (value.length == 0) {
+            if (this.allowBlank) {
+                this.clearInvalid();
+                return true;
+            }
 
-        this.inputEl().on('click', this.onClick,  this);
-        if (this.boxLabel) {
-            //Roo.log('find label');
-            this.el.select('span.radio label span',true).first().on('click', this.onClick,  this);
+            this.markInvalid(this.errors.PwdEmpty);
+            this.errorMsg = this.errors.PwdEmpty;
+            return false;
+        }
+        
+        if(this.insecure){
+            return true;
+        }
+        
+        if ('[\x21-\x7e]*'.match(value)) {
+            this.markInvalid(this.errors.PwdBadChar);
+            this.errorMsg = this.errors.PwdBadChar;
+            return false;
+        }
+        if (value.length < 6) {
+            this.markInvalid(this.errors.PwdShort);
+            this.errorMsg = this.errors.PwdShort;
+            return false;
+        }
+        if (value.length > 16) {
+            this.markInvalid(this.errors.PwdLong);
+            this.errorMsg = this.errors.PwdLong;
+            return false;
+        }
+        var strength;
+        if (this.ClientSideStrongPassword(value)) {
+            strength = 3;
+        } else if (this.ClientSideMediumPassword(value)) {
+            strength = 2;
+        } else if (this.ClientSideWeakPassword(value)) {
+            strength = 1;
+        } else {
+            strength = 0;
         }
 
+        
+        if (strength < 2) {
+            //this.markInvalid(this.errors.TooWeak);
+            this.errorMsg = this.errors.TooWeak;
+            //return false;
+        }
+        
+        
+        console.log('strength2: ' + strength);
+        
+        //var pm = this.trigger.child('div/div/div').dom;
+        
+        var pm = this.trigger.child('div/div');
+        pm.removeClass(this.meterClass);
+        pm.addClass(this.meterClass[strength]);
+                
+        var pt = this.trigger.child('/div').child('>*[class=roo-password-meter-text]').dom;        
+                
+        pt.innerHTML = this.meterLabel + '&nbsp;' + this.pwdStrengths[strength];
+        
+        this.errorMsg = ''; 
+        return true;
+    },
+    // private
+    CharacterSetChecks: function (type) {
+        this.type = type;
+        this.fResult = false;
     },
+    // private
+    isctype: function (character, type) {
+        switch (type) { //why needed break after return in js ? very odd bug
+            case this.kCapitalLetter:
+                if (character >= 'A' && character <= 'Z') {
+                    return true;
+                }
+                break;
+            case this.kSmallLetter:
+                if (character >= 'a' && character <= 'z') {
+                    return true;
+                }
+                break;
+            case this.kDigit:
+                if (character >= '0' && character <= '9') {
+                    return true;
+                }
+                break;
+            case this.kPunctuation:
+                if ('!@#$%^&*()_+-=\'";:[{]}|.>,</?`~'.indexOf(character) >= 0) {
+                    return true;
+                }
+                break;
+            default:
+                return false;
+        }
 
-    inputEl: function ()
-    {
-        return this.el.select('input.roo-radio',true).first();
     },
-    onClick : function()
-    {
-        Roo.log("click");
-        this.setChecked(true);
+    // private
+    IsLongEnough: function (pwd, size) {
+        return !(pwd == null || isNaN(size) || pwd.length < size);
     },
-
-    setChecked : function(state,suppressEvent)
-    {
-        if(state){
-            Roo.each(this.inputEl().up('form').select('input[name='+this.inputEl().dom.name+']', true).elements, function(v){
-                v.dom.checked = false;
-            });
+    // private
+    SpansEnoughCharacterSets: function (word, nb) {
+        if (!this.IsLongEnough(word, nb))
+        {
+            return false;
         }
-        Roo.log(this.inputEl().dom);
-        this.checked = state;
-        this.inputEl().dom.checked = state;
 
-        if(suppressEvent !== true){
-            this.fireEvent('check', this, state);
+        var characterSetChecks = new Array(
+                new this.CharacterSetChecks(this.kCapitalLetter), new this.CharacterSetChecks(this.kSmallLetter),
+                new this.CharacterSetChecks(this.kDigit), new this.CharacterSetChecks(this.kPunctuation));
+        for (var index = 0; index < word.length; ++index) {
+            for (var nCharSet = 0; nCharSet < characterSetChecks.length; ++nCharSet) {
+                if (!characterSetChecks[nCharSet].fResult && this.isctype(word.charAt(index), characterSetChecks[nCharSet].type)) {
+                    characterSetChecks[nCharSet].fResult = true;
+                    break;
+                }
+            }
         }
 
-        //this.inputEl().dom.value = state ? this.inputValue : this.valueOff;
-
-    },
-
-    getGroupValue : function()
-    {
-        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;
+        var nCharSets = 0;
+        for (var nCharSet = 0; nCharSet < characterSetChecks.length; ++nCharSet) {
+            if (characterSetChecks[nCharSet].fResult) {
+                ++nCharSets;
             }
-        });
+        }
 
-        return value;
+        if (nCharSets < nb) {
+            return false;
+        }
+        return true;
     },
-
-    /**
-     * Returns the normalized data value (undefined or emptyText will be returned as '').  To return the raw value see {@link #getRawValue}.
-     * @return {Mixed} value The field value
-     */
-    getValue : function(){
-        return this.getGroupValue();
+    // private
+    ClientSideStrongPassword: function (pwd) {
+        return this.IsLongEnough(pwd, 8) && this.SpansEnoughCharacterSets(pwd, 3);
+    },
+    // private
+    ClientSideMediumPassword: function (pwd) {
+        return this.IsLongEnough(pwd, 7) && this.SpansEnoughCharacterSets(pwd, 2);
+    },
+    // private
+    ClientSideWeakPassword: function (pwd) {
+        return this.IsLongEnough(pwd, 6) || !this.IsLongEnough(pwd, 0);
     }
-
-});
-//<script type="text/javascript">
+          
+})//<script type="text/javascript">
 
 /*
  * Based  Ext JS Library 1.1.1
@@ -24759,6 +25477,13 @@ Roo.extend(Roo.bootstrap.menu.Separator, Roo.bootstrap.Component,  {
 
 Roo.bootstrap.Tooltip = function(config){
     Roo.bootstrap.Tooltip.superclass.constructor.call(this, config);
+    
+    this.alignment = Roo.bootstrap.Tooltip.alignment;
+    
+    if(typeof(config) != 'undefined' && typeof(config.alignment) != 'undefined'){
+        this.alignment = config.alignment;
+    }
+    
 };
 
 Roo.apply(Roo.bootstrap.Tooltip, {
@@ -24884,6 +25609,8 @@ Roo.extend(Roo.bootstrap.Tooltip, Roo.bootstrap.Component,  {
     
     placement : 'bottom', 
     
+    alignment : false,
+    
     getAutoCreate : function(){
     
         var cfg = {
@@ -24947,7 +25674,7 @@ Roo.extend(Roo.bootstrap.Tooltip, Roo.bootstrap.Component,  {
         }, delay);
     },
     
-    show : function ()
+    show : function (msg)
     {
         if (!this.el) {
             this.render(document.body);
@@ -24955,7 +25682,7 @@ Roo.extend(Roo.bootstrap.Tooltip, Roo.bootstrap.Component,  {
         // set content.
         //Roo.log([this.bindEl, this.bindEl.attr('tooltip')]);
         
-        var tip = this.bindEl.attr('tooltip') || this.bindEl.select("[tooltip]").first().attr('tooltip');
+        var tip = msg || this.bindEl.attr('tooltip') || this.bindEl.select("[tooltip]").first().attr('tooltip');
         
         this.el.select('.tooltip-inner',true).first().dom.innerHTML = tip;
         
@@ -24985,7 +25712,7 @@ Roo.extend(Roo.bootstrap.Tooltip, Roo.bootstrap.Component,  {
             // fixme..
         }
         
-        var align = Roo.bootstrap.Tooltip.alignment[placement];
+        var align = this.alignment[placement];
         
         var xy = this.el.getAlignToXY(this.bindEl, align[0], align[1]);
         
@@ -25006,8 +25733,6 @@ Roo.extend(Roo.bootstrap.Tooltip, Roo.bootstrap.Component,  {
             
         }
         
-        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], 
@@ -27410,6 +28135,10 @@ Roo.apply(Roo.bootstrap.UploadCropbox, {
  * @cfg {Number} labelWidth default 4
  * @cfg {String} labelAlign (left|top) default left
  * @cfg {Boolean} editable (true|false) allow edit when upload a image default true
+* @cfg {Number} labellg set the width of label (1-12)
+ * @cfg {Number} labelmd set the width of label (1-12)
+ * @cfg {Number} labelsm set the width of label (1-12)
+ * @cfg {Number} labelxs set the width of label (1-12)
  * 
  * @constructor
  * Create a new DocumentManager
@@ -27519,6 +28248,11 @@ Roo.extend(Roo.bootstrap.DocumentManager, Roo.bootstrap.Component,  {
     delegates : false,
     xhr : false, 
     
+    labellg : 0,
+    labelmd : 0,
+    labelsm : 0,
+    labelxs : 0,
+    
     getAutoCreate : function()
     {   
         var managerWidget = {
@@ -27572,16 +28306,44 @@ Roo.extend(Roo.bootstrap.DocumentManager, Roo.bootstrap.Component,  {
                 content = [
                     {
                         tag : 'div',
-                        cls : 'column col-md-' + this.labelWidth,
+                        cls : 'column',
                         html : this.fieldLabel
                     },
                     {
                         tag : 'div',
-                        cls : 'column col-md-' + (12 - this.labelWidth),
+                        cls : 'column',
                         cn : managerWidget
                     }
                 ];
                 
+                if(this.labelWidth > 12){
+                    content[0].style = "width: " + this.labelWidth + 'px';
+                }
+
+                if(this.labelWidth < 13 && this.labelmd == 0){
+                    this.labelmd = this.labelWidth;
+                }
+
+                if(this.labellg > 0){
+                    content[0].cls += ' col-lg-' + this.labellg;
+                    content[1].cls += ' col-lg-' + (12 - this.labellg);
+                }
+
+                if(this.labelmd > 0){
+                    content[0].cls += ' col-md-' + this.labelmd;
+                    content[1].cls += ' col-md-' + (12 - this.labelmd);
+                }
+
+                if(this.labelsm > 0){
+                    content[0].cls += ' col-sm-' + this.labelsm;
+                    content[1].cls += ' col-sm-' + (12 - this.labelsm);
+                }
+
+                if(this.labelxs > 0){
+                    content[0].cls += ' col-xs-' + this.labelxs;
+                    content[1].cls += ' col-xs-' + (12 - this.labelxs);
+                }
+                
             }
         }
         
@@ -28131,6 +28893,8 @@ Roo.extend(Roo.bootstrap.DocumentManager, Roo.bootstrap.Component,  {
             formData.append('mimetype', file.mimetype);
         }
         
+        Roo.log(formData);
+        
         if(this.fireEvent('prepare', this, formData) != false){
             this.xhr.send(formData);
         };
@@ -28253,7 +29017,6 @@ Roo.extend(Roo.bootstrap.DocumentViewer, Roo.bootstrap.Component,  {
     
     initEvents : function()
     {
-        
         this.bodyEl = this.el.select('.roo-document-viewer-body', true).first();
         this.bodyEl.setVisibilityMode(Roo.Element.DISPLAY);
         
@@ -28295,9 +29058,6 @@ Roo.extend(Roo.bootstrap.DocumentViewer, Roo.bootstrap.Component,  {
     
     initial : function()
     {
-//        this.thumbEl.setStyle('line-height', this.thumbEl.getHeight(true) + 'px');
-        
-        
         this.fireEvent('initial', this);
         
     },
@@ -28901,6 +29661,10 @@ Roo.apply(Roo.bootstrap.FieldLabel, {
  * @cfg {string} dayFormat default 'd'
  * @cfg {string} monthFormat default 'm'
  * @cfg {string} yearFormat default 'Y'
+ * @cfg {Number} labellg set the width of label (1-12)
+ * @cfg {Number} labelmd set the width of label (1-12)
+ * @cfg {Number} labelsm set the width of label (1-12)
+ * @cfg {Number} labelxs set the width of label (1-12)
 
  *     
  * @constructor
@@ -28958,6 +29722,10 @@ Roo.extend(Roo.bootstrap.DateSplitField, Roo.bootstrap.Component,  {
     monthFormat : 'm',
     yearFormat : 'Y',
     isFormField : true,
+    labellg : 0,
+    labelmd : 0,
+    labelsm : 0,
+    labelxs : 0,
     
     getAutoCreate : function()
     {
@@ -28974,8 +29742,12 @@ Roo.extend(Roo.bootstrap.DateSplitField, Roo.bootstrap.Component,  {
             ]
         };
         
+        var labelCls = 'col-md-12';
+        var contentCls = 'col-md-4';
+        
         if(this.fieldLabel){
-            cfg.cn.push({
+            
+            var label = {
                 tag : 'div',
                 cls : 'column roo-date-split-field-label col-md-' + ((this.labelAlign == 'top') ? '12' : this.labelWidth),
                 cn : [
@@ -28984,13 +29756,48 @@ Roo.extend(Roo.bootstrap.DateSplitField, Roo.bootstrap.Component,  {
                         html : this.fieldLabel
                     }
                 ]
-            });
+            };
+            
+            if(this.labelAlign == 'left'){
+            
+                if(this.labelWidth > 12){
+                    label.style = "width: " + this.labelWidth + 'px';
+                }
+
+                if(this.labelWidth < 13 && this.labelmd == 0){
+                    this.labelmd = this.labelWidth;
+                }
+
+                if(this.labellg > 0){
+                    labelCls = ' col-lg-' + this.labellg;
+                    contentCls = ' col-lg-' + ((12 - this.labellg) / 3);
+                }
+
+                if(this.labelmd > 0){
+                    labelCls = ' col-md-' + this.labelmd;
+                    contentCls = ' col-md-' + ((12 - this.labelmd) / 3);
+                }
+
+                if(this.labelsm > 0){
+                    labelCls = ' col-sm-' + this.labelsm;
+                    contentCls = ' col-sm-' + ((12 - this.labelsm) / 3);
+                }
+
+                if(this.labelxs > 0){
+                    labelCls = ' col-xs-' + this.labelxs;
+                    contentCls = ' col-xs-' + ((12 - this.labelxs) / 3);
+                }
+            }
+            
+            label.cls += ' ' + labelCls;
+            
+            cfg.cn.push(label);
         }
         
         Roo.each(['day', 'month', 'year'], function(t){
             cfg.cn.push({
                 tag : 'div',
-                cls : 'column roo-date-split-field-' + t + ' col-md-' + ((this.labelAlign == 'top') ? '4' : ((12 - this.labelWidth) / 3))
+                cls : 'column roo-date-split-field-' + t + ' ' + contentCls
             });
         }, this);
         
@@ -29288,6 +30095,17 @@ Roo.bootstrap.LayoutMasonry = function(config){
     
     this.bricks = [];
     
+    this.addEvents({
+        // raw events
+        /**
+         * @event layout
+         * Fire after layout the items
+         * @param {Roo.bootstrap.LayoutMasonry} this
+         * @param {Roo.EventObject} e
+         */
+        "layout" : true
+    });
+    
 };
 
 Roo.extend(Roo.bootstrap.LayoutMasonry, Roo.bootstrap.Component,  {
@@ -29410,14 +30228,24 @@ Roo.extend(Roo.bootstrap.LayoutMasonry, Roo.bootstrap.Component,  {
         
     },
     
+    addItem : function(cfg)
+    {
+        Roo.log('adding item!!!!!!!!!!!!!!!!!!!!!!!!!!');
+        var brick = Roo.factory(cfg);
+        brick.render(this.getChildContainer());
+    },
+    
     resize : function()
     {
-        Roo.log('resize');
-        
         var cs = this.el.getBox(true);
         
-        if (this.currentSize.width == cs.width && this.currentSize.x == cs.x ) {
-            Roo.log("no change in with or X");
+        if (
+                this.currentSize.width == cs.width && 
+                this.currentSize.x == cs.x && 
+                this.currentSize.height == cs.height && 
+                this.currentSize.y == cs.y 
+        ) {
+            Roo.log("no change in with or X or Y");
             return;
         }
         
@@ -29437,6 +30265,8 @@ Roo.extend(Roo.bootstrap.LayoutMasonry, Roo.bootstrap.Component,  {
       
         this._isLayoutInited = true;
         
+        this.fireEvent('layout', this);
+        
     },
     
     _resetLayout : function()
@@ -29506,6 +30336,8 @@ Roo.extend(Roo.bootstrap.LayoutMasonry, Roo.bootstrap.Component,  {
     
     layoutItems : function( isInstant )
     {
+        Roo.log(this.bricks);
+        
         var items = Roo.apply([], this.bricks);
         
         if(this.isHorizontal){
@@ -31035,12 +31867,12 @@ Roo.extend(Roo.bootstrap.MasonryBrick, Roo.bootstrap.Component,  {
      */   
     href : '',
     /**
-     * @cfg {String} (xs|sm|md|md-left|md-right|tall|wide) size
+     * @cfg {String} size (xs|sm|md|md-left|md-right|tall|wide)
      */   
     size : 'xs',
     
     /**
-     * @cfg {String} (center|bottom) placetitle
+     * @cfg {String} placetitle (center|bottom)
      */   
     placetitle : '',
     
@@ -31054,6 +31886,11 @@ Roo.extend(Roo.bootstrap.MasonryBrick, Roo.bootstrap.Component,  {
      */   
     preventDefault : false, 
     
+    /**
+     * @cfg {Boolean} inverse defalut false
+     */   
+    maskInverse : false, 
+    
     getAutoCreate : function()
     {
         if(!this.isFitContainer){
@@ -31070,7 +31907,11 @@ Roo.extend(Roo.bootstrap.MasonryBrick, Roo.bootstrap.Component,  {
             cls += ' masonry-brick-image';
         }
         
-        if(!this.html.length){
+        if(this.maskInverse){
+            cls += ' mask-inverse';
+        }
+        
+        if(!this.html.length && !this.maskInverse){
             cls += ' enable-mask';
         }
         
@@ -31351,7 +32192,7 @@ Roo.extend(Roo.bootstrap.MasonryBrick, Roo.bootstrap.Component,  {
     {
         e.preventDefault();
         
-        if(!this.isFitContainer){
+        if(!this.isFitContainer || this.maskInverse){
             return;
         }
         
@@ -31364,7 +32205,7 @@ Roo.extend(Roo.bootstrap.MasonryBrick, Roo.bootstrap.Component,  {
     {
         e.preventDefault();
         
-        if(!this.isFitContainer){
+        if(!this.isFitContainer || this.maskInverse){
             return;
         }
         
@@ -31689,6 +32530,10 @@ Roo.extend(Roo.bootstrap.NumberField, Roo.bootstrap.Input, {
      * if a valid character like '.' or '-' is left in the field with no number (defaults to "{value} is not a valid number")
      */
     nanText : "{0} is not a valid number",
+    /**
+     * @cfg {Boolean} castInt (true|false) cast int if true (defalut true)
+     */
+    castInt : true,
 
     // private
     initEvents : function()
@@ -31708,13 +32553,22 @@ Roo.extend(Roo.bootstrap.NumberField, Roo.bootstrap.Input, {
         this.stripCharsRe = new RegExp('[^'+allowed+']', 'gi');
         
         var keyPress = function(e){
+            
             var k = e.getKey();
             
-            if(!Roo.isIE && (e.isSpecialKey() || k == e.BACKSPACE || k == e.DELETE)){
+            var c = e.getCharCode();
+            
+            if(
+                    (String.fromCharCode(c) == '.' || String.fromCharCode(c) == '-') &&
+                    allowed.indexOf(String.fromCharCode(c)) === -1
+            ){
+                e.stopEvent();
                 return;
             }
             
-            var c = e.getCharCode();
+            if(!Roo.isIE && (e.isSpecialKey() || k == e.BACKSPACE || k == e.DELETE)){
+                return;
+            }
             
             if(allowed.indexOf(String.fromCharCode(c)) === -1){
                 e.stopEvent();
@@ -31785,6 +32639,10 @@ Roo.extend(Roo.bootstrap.NumberField, Roo.bootstrap.Input, {
 
     beforeBlur : function()
     {
+        if(!this.castInt){
+            return;
+        }
+        
         var v = this.parseValue(this.getRawValue());
         if(v){
             this.setValue(v);
@@ -31794,6 +32652,500 @@ Roo.extend(Roo.bootstrap.NumberField, Roo.bootstrap.Input, {
 });
 
  
+
+/*
+* Licence: LGPL
+*/
+
+/**
+ * @class Roo.bootstrap.DocumentSlider
+ * @extends Roo.bootstrap.Component
+ * Bootstrap DocumentSlider class
+ * 
+ * @constructor
+ * Create a new DocumentViewer
+ * @param {Object} config The config object
+ */
+
+Roo.bootstrap.DocumentSlider = function(config){
+    Roo.bootstrap.DocumentSlider.superclass.constructor.call(this, config);
+    
+    this.files = [];
+    
+    this.addEvents({
+        /**
+         * @event initial
+         * Fire after initEvent
+         * @param {Roo.bootstrap.DocumentSlider} this
+         */
+        "initial" : true,
+        /**
+         * @event update
+         * Fire after update
+         * @param {Roo.bootstrap.DocumentSlider} this
+         */
+        "update" : true,
+        /**
+         * @event click
+         * Fire after click
+         * @param {Roo.bootstrap.DocumentSlider} this
+         */
+        "click" : true
+    });
+};
+
+Roo.extend(Roo.bootstrap.DocumentSlider, Roo.bootstrap.Component,  {
+    
+    files : false,
+    
+    indicator : 0,
+    
+    getAutoCreate : function()
+    {
+        var cfg = {
+            tag : 'div',
+            cls : 'roo-document-slider',
+            cn : [
+                {
+                    tag : 'div',
+                    cls : 'roo-document-slider-header',
+                    cn : [
+                        {
+                            tag : 'div',
+                            cls : 'roo-document-slider-header-title'
+                        }
+                    ]
+                },
+                {
+                    tag : 'div',
+                    cls : 'roo-document-slider-body',
+                    cn : [
+                        {
+                            tag : 'div',
+                            cls : 'roo-document-slider-prev',
+                            cn : [
+                                {
+                                    tag : 'i',
+                                    cls : 'fa fa-chevron-left'
+                                }
+                            ]
+                        },
+                        {
+                            tag : 'div',
+                            cls : 'roo-document-slider-thumb',
+                            cn : [
+                                {
+                                    tag : 'img',
+                                    cls : 'roo-document-slider-image'
+                                }
+                            ]
+                        },
+                        {
+                            tag : 'div',
+                            cls : 'roo-document-slider-next',
+                            cn : [
+                                {
+                                    tag : 'i',
+                                    cls : 'fa fa-chevron-right'
+                                }
+                            ]
+                        }
+                    ]
+                }
+            ]
+        };
+        
+        return cfg;
+    },
+    
+    initEvents : function()
+    {
+        this.headerEl = this.el.select('.roo-document-slider-header', true).first();
+        this.headerEl.setVisibilityMode(Roo.Element.DISPLAY);
+        
+        this.titleEl = this.el.select('.roo-document-slider-header .roo-document-slider-header-title', true).first();
+        this.titleEl.setVisibilityMode(Roo.Element.DISPLAY);
+        
+        this.bodyEl = this.el.select('.roo-document-slider-body', true).first();
+        this.bodyEl.setVisibilityMode(Roo.Element.DISPLAY);
+        
+        this.thumbEl = this.el.select('.roo-document-slider-thumb', true).first();
+        this.thumbEl.setVisibilityMode(Roo.Element.DISPLAY);
+        
+        this.imageEl = this.el.select('.roo-document-slider-image', true).first();
+        this.imageEl.setVisibilityMode(Roo.Element.DISPLAY);
+        
+        this.prevIndicator = this.el.select('.roo-document-slider-prev i', true).first();
+        this.prevIndicator.setVisibilityMode(Roo.Element.DISPLAY);
+        
+        this.nextIndicator = this.el.select('.roo-document-slider-next i', true).first();
+        this.nextIndicator.setVisibilityMode(Roo.Element.DISPLAY);
+        
+        this.thumbEl.on('click', this.onClick, this);
+        
+        this.prevIndicator.on('click', this.prev, this);
+        
+        this.nextIndicator.on('click', this.next, this);
+        
+    },
+    
+    initial : function()
+    {
+        if(this.files.length){
+            this.indicator = 1;
+            this.update()
+        }
+        
+        this.fireEvent('initial', this);
+    },
+    
+    update : function()
+    {
+        this.imageEl.attr('src', this.files[this.indicator - 1]);
+        
+        this.titleEl.dom.innerHTML = String.format('{0} / {1}', this.indicator, this.files.length);
+        
+        this.prevIndicator.show();
+        
+        if(this.indicator == 1){
+            this.prevIndicator.hide();
+        }
+        
+        this.nextIndicator.show();
+        
+        if(this.indicator == this.files.length){
+            this.nextIndicator.hide();
+        }
+        
+        this.thumbEl.scrollTo('top');
+        
+        this.fireEvent('update', this);
+    },
+    
+    onClick : function(e)
+    {
+        e.preventDefault();
+        
+        this.fireEvent('click', this);
+    },
+    
+    prev : function(e)
+    {
+        e.preventDefault();
+        
+        this.indicator = Math.max(1, this.indicator - 1);
+        
+        this.update();
+    },
+    
+    next : function(e)
+    {
+        e.preventDefault();
+        
+        this.indicator = Math.min(this.files.length, this.indicator + 1);
+        
+        this.update();
+    }
+});
+/*
+ * - LGPL
+ *
+ * RadioSet
+ *
+ *
+ */
+
+/**
+ * @class Roo.bootstrap.RadioSet
+ * @extends Roo.bootstrap.Input
+ * Bootstrap RadioSet class
+ * @cfg {String} indicatorpos (left|right) default left
+ * @cfg {Boolean} inline (true|false) inline the element (default true)
+ * @cfg {String} weight (primary|warning|info|danger|success) The text that appears beside the radio
+ * @constructor
+ * Create a new RadioSet
+ * @param {Object} config The config object
+ */
+
+Roo.bootstrap.RadioSet = function(config){
+    
+    Roo.bootstrap.RadioSet.superclass.constructor.call(this, config);
+    
+    this.radioes = [];
+    
+    Roo.bootstrap.RadioSet.register(this);
+    
+    this.addEvents({
+        /**
+        * @event check
+        * Fires when the element is checked or unchecked.
+        * @param {Roo.bootstrap.RadioSet} this This radio
+        * @param {Roo.bootstrap.Radio} item The checked item
+        */
+       check : true
+    });
+    
+};
+
+Roo.extend(Roo.bootstrap.RadioSet, Roo.bootstrap.Input,  {
+
+    radioes : false,
+    
+    inline : true,
+    
+    weight : '',
+    
+    indicatorpos : 'left',
+    
+    getAutoCreate : function()
+    {
+        var label = {
+            tag : 'label',
+            cls : 'roo-radio-set-label',
+            cn : [
+                {
+                    tag : 'span',
+                    html : this.fieldLabel
+                }
+            ]
+        };
+        
+        if(this.indicatorpos == 'left'){
+            label.cn.unshift({
+                tag : 'i',
+                cls : 'roo-required-indicator left-indicator text-danger fa fa-lg fa-star',
+                tooltip : 'This field is required'
+            });
+        } else {
+            label.cn.push({
+                tag : 'i',
+                cls : 'roo-required-indicator right-indicator text-danger fa fa-lg fa-star',
+                tooltip : 'This field is required'
+            });
+        }
+        
+        var items = {
+            tag : 'div',
+            cls : 'roo-radio-set-items'
+        };
+        
+        var align = (!this.labelAlign) ? this.parentLabelAlign() : this.labelAlign;
+        
+        if (align === 'left' && this.fieldLabel.length) {
+            
+            items = {
+                cls : "roo-radio-set-right", 
+                cn: [
+                    items
+                ]
+            };
+            
+            if(this.labelWidth > 12){
+                label.style = "width: " + this.labelWidth + 'px';
+            }
+            
+            if(this.labelWidth < 13 && this.labelmd == 0){
+                this.labelmd = this.labelWidth;
+            }
+            
+            if(this.labellg > 0){
+                label.cls += ' col-lg-' + this.labellg;
+                items.cls += ' col-lg-' + (12 - this.labellg);
+            }
+            
+            if(this.labelmd > 0){
+                label.cls += ' col-md-' + this.labelmd;
+                items.cls += ' col-md-' + (12 - this.labelmd);
+            }
+            
+            if(this.labelsm > 0){
+                label.cls += ' col-sm-' + this.labelsm;
+                items.cls += ' col-sm-' + (12 - this.labelsm);
+            }
+            
+            if(this.labelxs > 0){
+                label.cls += ' col-xs-' + this.labelxs;
+                items.cls += ' col-xs-' + (12 - this.labelxs);
+            }
+        }
+        
+        var cfg = {
+            tag : 'div',
+            cls : 'roo-radio-set',
+            cn : [
+                {
+                    tag : 'input',
+                    cls : 'roo-radio-set-input',
+                    type : 'hidden',
+                    name : this.name,
+                    value : this.value ? this.value :  ''
+                },
+                label,
+                items
+            ]
+        };
+        
+        if(this.weight.length){
+            cfg.cls += ' roo-radio-' + this.weight;
+        }
+        
+        if(this.inline) {
+            cfg.cls += ' roo-radio-set-inline';
+        }
+        
+        return cfg;
+        
+    },
+
+    initEvents : function()
+    {
+        this.labelEl = this.el.select('.roo-radio-set-label', true).first();
+        this.labelEl.setVisibilityMode(Roo.Element.DISPLAY);
+        
+        if(!this.fieldLabel.length){
+            this.labelEl.hide();
+        }
+        
+        this.itemsEl = this.el.select('.roo-radio-set-items', true).first();
+        this.itemsEl.setVisibilityMode(Roo.Element.DISPLAY);
+        
+        this.indicatorEl().setVisibilityMode(Roo.Element.DISPLAY);
+        this.indicatorEl().hide();
+        
+        this.originalValue = this.getValue();
+        
+    },
+    
+    inputEl: function ()
+    {
+        return this.el.select('.roo-radio-set-input', true).first();
+    },
+    
+    getChildContainer : function()
+    {
+        return this.itemsEl;
+    },
+    
+    register : function(item)
+    {
+        this.radioes.push(item);
+        
+    },
+    
+    validate : function()
+    {   
+        var valid = false;
+        
+        Roo.each(this.radioes, function(i){
+            if(!i.checked){
+                return;
+            }
+            
+            valid = true;
+            return false;
+        });
+        
+        if(this.allowBlank) {
+            return true;
+        }
+        
+        if(this.disabled || valid){
+            this.markValid();
+            return true;
+        }
+        
+        this.markInvalid();
+        return false;
+        
+    },
+    
+    markValid : function()
+    {
+        if(this.labelEl.isVisible(true)){
+            this.indicatorEl().hide();
+        }
+        
+        this.el.removeClass([this.invalidClass, this.validClass]);
+        this.el.addClass(this.validClass);
+        
+        this.fireEvent('valid', this);
+    },
+    
+    markInvalid : function(msg)
+    {
+        if(this.allowBlank || this.disabled){
+            return;
+        }
+        
+        if(this.labelEl.isVisible(true)){
+            this.indicatorEl().show();
+        }
+        
+        this.el.removeClass([this.invalidClass, this.validClass]);
+        this.el.addClass(this.invalidClass);
+        
+        this.fireEvent('invalid', this, msg);
+        
+    },
+    
+    setValue : function(v, suppressEvent)
+    {   
+        Roo.each(this.radioes, function(i){
+            
+            i.checked = false;
+            i.el.removeClass('checked');
+            
+            if(i.value === v || i.value.toString() === v.toString()){
+                i.checked = true;
+                i.el.addClass('checked');
+                
+                if(suppressEvent !== true){
+                    this.fireEvent('check', this, i);
+                }
+            }
+            
+        }, this);
+        
+        Roo.bootstrap.RadioSet.superclass.setValue.call(this, v);
+        
+    },
+    
+    clearInvalid : function(){
+        
+        if(!this.el || this.preventMark){
+            return;
+        }
+        
+        if(this.labelEl.isVisible(true)){
+            this.indicatorEl().hide();
+        }
+        
+        this.el.removeClass([this.invalidClass]);
+        
+        this.fireEvent('valid', this);
+    }
+    
+});
+
+Roo.apply(Roo.bootstrap.RadioSet, {
+    
+    groups: {},
+    
+    register : function(set)
+    {
+        this.groups[set.name] = set;
+    },
+    
+    get: function(name) 
+    {
+        if (typeof(this.groups[name]) == 'undefined') {
+            return false;
+        }
+        
+        return this.groups[name] ;
+    }
+    
+});
 /*
  * Based on:
  * Ext JS Library 1.1.1
@@ -34908,15 +36260,13 @@ panel.load({
         }
         if(this.toolbar){
             var te = this.toolbar.getEl();
-            height -= te.getHeight();
             te.setWidth(width);
+            height -= te.getHeight();
         }
         if(this.footer){
             var te = this.footer.getEl();
-            Roo.log("footer:" + te.getHeight());
-            
-            height -= te.getHeight();
             te.setWidth(width);
+            height -= te.getHeight();
         }
         
         
@@ -34943,7 +36293,27 @@ panel.load({
      * @return {String} 
      */
     getTitle : function(){
-        return this.title;
+        
+        if (typeof(this.title) != 'object') {
+            return this.title;
+        }
+        
+        var t = '';
+        for (var k in this.title) {
+            if (!this.title.hasOwnProperty(k)) {
+                continue;
+            }
+            
+            if (k.indexOf('-') >= 0) {
+                var s = k.split('-');
+                for (var i = 0; i<s.length; i++) {
+                    t += "<span class='visible-"+s[i]+"'>"+this.title[k]+"</span>";
+                }
+            } else {
+                t += "<span class='visible-"+k+"'>"+this.title[k]+"</span>";
+            }
+        }
+        return t;
     },
     
     /**