roojs-bootstrap.js
authoredward <edward@roojs.com>
Mon, 27 Mar 2017 02:46:32 +0000 (10:46 +0800)
committeredward <edward@roojs.com>
Mon, 27 Mar 2017 02:46:32 +0000 (10:46 +0800)
roojs-bootstrap-debug.js

roojs-bootstrap-debug.js
roojs-bootstrap.js

index 0cc1888..8a69cc1 100644 (file)
@@ -136,9 +136,9 @@ Roo.extend(Roo.bootstrap.Component, Roo.BoxComponent,  {
         if(this.tabIndex !== undefined){
             this.el.dom.setAttribute('tabIndex', this.tabIndex);
         }
+        
         this.initEvents();
        
-        
     },
     /**
      * Fetch the element to add children to
@@ -2000,6 +2000,9 @@ Roo.extend(Roo.bootstrap.Menu, Roo.bootstrap.Component,  {
         
        // Roo.log("ADD event");
        // Roo.log(this.triggerEl.dom);
+        
+        this.triggerEl.on('click', this.onTriggerClick, this);
+        
         this.triggerEl.on(Roo.isTouch ? 'touchstart' : 'mouseup', this.onTriggerPress, this);
         
         this.triggerEl.addClass('dropdown-toggle');
@@ -2034,6 +2037,7 @@ Roo.extend(Roo.bootstrap.Menu, Roo.bootstrap.Component,  {
     
     onTouch : function(e) 
     {
+        Roo.log("menu.onTouch");
         //e.stopEvent(); this make the user popdown broken
         this.onClick(e);
     },
@@ -2041,6 +2045,7 @@ Roo.extend(Roo.bootstrap.Menu, Roo.bootstrap.Component,  {
     onClick : function(e)
     {
         Roo.log("menu.onClick");
+        
         var t = this.findTargetItem(e);
         if(!t || t.isContainer){
             return;
@@ -2136,7 +2141,10 @@ Roo.extend(Roo.bootstrap.Menu, Roo.bootstrap.Component,  {
             xy[0] = xy[0] - this.el.getWidth() + this.triggerEl.getWidth();
         }
         
-        this.el.setXY(xy);
+        if(this.el.getStyle('top').slice(-1) != "%"){
+            this.el.setXY(xy);
+        }
+        
         this.focus();
         this.fireEvent("show", this);
     },
@@ -2177,9 +2185,22 @@ Roo.extend(Roo.bootstrap.Menu, Roo.bootstrap.Component,  {
         }
     },
     
-    onTriggerPress  : function(e)
+    onTriggerClick : function(e)
     {
+        Roo.log('trigger click');
+        
+        var target = e.getTarget();
         
+        Roo.log(target.nodeName.toLowerCase());
+        
+        if(target.nodeName.toLowerCase() === 'i'){
+            e.preventDefault();
+        }
+        
+    },
+    
+    onTriggerPress  : function(e)
+    {
         Roo.log('trigger press');
         //Roo.log(e.getTarget());
        // Roo.log(this.triggerEl.dom);
@@ -4502,11 +4523,8 @@ Roo.extend(Roo.bootstrap.NavSidebarItem, Roo.bootstrap.NavItem,  {
         if (this.menu) {
             a.cn.push({ tag : 'i', cls : 'glyphicon glyphicon-chevron-down pull-right'});
             a.cls += 'dropdown-toggle treeview' ;
-            
         }
         
-        
-        
         return cfg;
          
           
@@ -13852,6 +13870,10 @@ Roo.extend(Roo.bootstrap.ComboBox, Roo.bootstrap.TriggerField, {
         this.store.data.each(function(d, rowIndex){
             var row = this.touchViewListGroup.createChild(template);
             
+            if(typeof(d.data.cls) != 'undefined' && d.data.cls.length){
+                row.addClass(d.data.cls);
+            }
+            
             if(this.displayField && typeof(d.data[this.displayField]) != 'undefined'){
                 var cfg = {
                     data : d.data,
@@ -13923,38 +13945,40 @@ Roo.extend(Roo.bootstrap.ComboBox, Roo.bootstrap.TriggerField, {
         
         var r = this.store.getAt(rowIndex);
         
-        if(!this.multiple){
-            Roo.each(this.touchViewListGroup.select('.list-group-item > .roo-combobox-list-group-item-box > input:checked', true).elements, function(c){
-                c.dom.removeAttribute('checked');
-            }, this);
-            
-            row.select('.roo-combobox-list-group-item-box > input', true).first().attr('checked', true);
-        
-            this.setFromData(r.data);
+        if(this.fireEvent('beforeselect', this, r, rowIndex) !== false){
             
-            var close = this.closeTriggerEl();
-        
-            if(close){
-                close.show();
+            if(!this.multiple){
+                Roo.each(this.touchViewListGroup.select('.list-group-item > .roo-combobox-list-group-item-box > input:checked', true).elements, function(c){
+                    c.dom.removeAttribute('checked');
+                }, this);
+
+                row.select('.roo-combobox-list-group-item-box > input', true).first().attr('checked', true);
+
+                this.setFromData(r.data);
+
+                var close = this.closeTriggerEl();
+
+                if(close){
+                    close.show();
+                }
+
+                this.hideTouchView();
+
+                this.fireEvent('select', this, r, rowIndex);
+
+                return;
             }
 
-            this.hideTouchView();
-            
-            this.fireEvent('select', this, r, rowIndex);
-            
-            return;
-        }
-        
-        if(this.valueField && typeof(r.data[this.valueField]) != 'undefined' && this.getValue().indexOf(r.data[this.valueField]) != -1){
-            row.select('.roo-combobox-list-group-item-box > input', true).first().dom.removeAttribute('checked');
-            this.tickItems.splice(this.tickItems.indexOf(r.data), 1);
-            return;
+            if(this.valueField && typeof(r.data[this.valueField]) != 'undefined' && this.getValue().indexOf(r.data[this.valueField]) != -1){
+                row.select('.roo-combobox-list-group-item-box > input', true).first().dom.removeAttribute('checked');
+                this.tickItems.splice(this.tickItems.indexOf(r.data), 1);
+                return;
+            }
+
+            row.select('.roo-combobox-list-group-item-box > input', true).first().attr('checked', true);
+            this.addItem(r.data);
+            this.tickItems.push(r.data);
         }
-        
-        row.select('.roo-combobox-list-group-item-box > input', true).first().attr('checked', true);
-        this.addItem(r.data);
-        this.tickItems.push(r.data);
-        
     }
     
 
@@ -18764,6 +18788,7 @@ Roo.extend(Roo.bootstrap.CheckBox, Roo.bootstrap.Input,  {
                 
                 
         }
+        
         if(this.boxLabel){
              var boxLabelCfg = {
                 tag: 'label',
@@ -18804,6 +18829,11 @@ Roo.extend(Roo.bootstrap.CheckBox, Roo.bootstrap.Input,  {
         return this.labelEl();
     },
     
+    boxLabelEl: function()
+    {
+        return this.el.select('label.box-label',true).first();
+    },
+    
     initEvents : function()
     {
 //        Roo.bootstrap.CheckBox.superclass.initEvents.call(this);
@@ -28196,66 +28226,56 @@ Roo.extend(Roo.bootstrap.DateSplitField, Roo.bootstrap.Component,  {
 
 Roo.bootstrap.LayoutMasonry = function(config){
     Roo.bootstrap.LayoutMasonry.superclass.constructor.call(this, config);
+    
+    this.bricks = [];
+    
 };
 
 Roo.extend(Roo.bootstrap.LayoutMasonry, Roo.bootstrap.Component,  {
     
-      /**
-     * @cfg {Boolean} isFitWidth  - resize the width..
-     */   
-    isFitWidth : false,  // options..
-    /**
-     * @cfg {Boolean} isOriginLeft = left align?
-     */   
-    isOriginLeft : true,
-    /**
-     * @cfg {Boolean} isOriginTop = top align?
-     */   
-    isOriginTop : false,
     /**
      * @cfg {Boolean} isLayoutInstant = no animation?
      */   
     isLayoutInstant : false, // needed?
+   
     /**
-     * @cfg {Boolean} isResizingContainer = not sure if this is used..
+     * @cfg {Number} boxWidth  width of the columns
      */   
-    isResizingContainer : true,
+    boxWidth : 450,
+    
     /**
-     * @cfg {Number} columnWidth  width of the columns 
+     * @cfg {Number} padWidth padding below box..
      */   
+    padWidth : 10, 
     
-    columnWidth : 0,
     /**
-     * @cfg {Number} padHeight padding below box..
+     * @cfg {Number} gutter gutter width..
      */   
-    
-    padHeight : 10, 
+    gutter : 10, 
     
     /**
      * @cfg {Boolean} isAutoInitial defalut true
      */   
-    
     isAutoInitial : true, 
     
-    // private?
-    gutter : 0,
-    
     containerWidth: 0,
-    initialColumnWidth : 0,
-    currentSize : null,
-    
-    colYs : null, // array.
-    maxY : 0,
-    padWidth: 10,
     
+    /**
+     * @cfg {Boolean} isHorizontal defalut false
+     */   
+    isHorizontal : false, 
+
+    currentSize : null,
     
     tag: 'div',
+    
     cls: '',
+    
     bricks: null, //CompositeElement
-    cols : 0, // array?
-    // element : null, // wrapped now this.el
-    _isLayoutInited : null, 
     
+    cols : 1,
+    
+    _isLayoutInited : false,
     
     getAutoCreate : function(){
         
@@ -28267,7 +28287,6 @@ Roo.extend(Roo.bootstrap.LayoutMasonry, Roo.bootstrap.Component,  {
             }
         };
         
-       
         return cfg;
     },
     
@@ -28294,16 +28313,12 @@ Roo.extend(Roo.bootstrap.LayoutMasonry, Roo.bootstrap.Component,  {
                 _this.initial();
             } ,this);
         }
-        
     },
     
     initial : function()
     {
-        this.reloadItems();
-
         this.currentSize = this.el.getBox(true);
-
-        /// was window resize... - let's see if this works..
+        
         Roo.EventManager.onWindowResize(this.resize, this); 
 
         if(!this.isAutoInitial){
@@ -28311,358 +28326,554 @@ Roo.extend(Roo.bootstrap.LayoutMasonry, Roo.bootstrap.Component,  {
             return;
         }
         
-        this.layout.defer(500,this);
-    },
-    
-    reloadItems: function()
-    {
-        this.bricks = this.el.select('.masonry-brick', true);
+        this.layout();
         
-        this.bricks.each(function(b) {
-            //Roo.log(b.getSize());
-            if (!b.attr('originalwidth')) {
-                b.attr('originalwidth',  b.getSize().width);
-            }
-            
-        });
+        return;
+        //this.layout.defer(500,this);
         
-        Roo.log(this.bricks.elements.length);
     },
     
     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");
             return;
         }
+        
         this.currentSize = cs;
+        
         this.layout();
     },
     
     layout : function()
-    {
-         Roo.log('layout');
+    {   
         this._resetLayout();
-        //this._manageStamps();
-      
-        // don't animate first layout
+        
         var isInstant = this.isLayoutInstant !== undefined ? this.isLayoutInstant : !this._isLayoutInited;
+        
         this.layoutItems( isInstant );
       
-        // flag for initalized
         this._isLayoutInited = true;
+        
     },
     
     layoutItems : function( isInstant )
     {
-        //var items = this._getItemsForLayout( this.items );
-        // original code supports filtering layout items.. we just ignore it..
+        var items = Roo.apply([], this.bricks);
+        
+        if(this.isHorizontal){
+            this._horizontalLayoutItems( items , isInstant );
+            return;
+        }
+        
+        this._verticalLayoutItems( items , isInstant );
         
-        this._layoutItems( this.bricks , isInstant );
-      
-        this._postLayout();
     },
-    _layoutItems : function ( items , isInstant)
-    {
-       //this.fireEvent( 'layout', this, items );
     
-
-        if ( !items || !items.elements.length ) {
-          // no items, emit event with empty array
+    _verticalLayoutItems : function ( items , isInstant)
+    {
+        if ( !items || !items.length ) {
             return;
         }
 
+        if(this.isHorizontal){
+            
+            if(items.length < 3){
+                return;
+            }
+            
+            var eItems = items.slice(items.length - 3, items.length);
+            items = items.slice(0, items.length - 3);
+            
+        }
+        
         var queue = [];
-        items.each(function(item) {
-            Roo.log("layout item");
-            Roo.log(item);
-            // get x/y object from method
-            var position = this._getItemLayoutPosition( item );
-            // enqueue
-            position.item = item;
-            position.isInstant = isInstant; // || item.isLayoutInstant; << not set yet...
-            queue.push( position );
+        
+        var box = [];
+        var size = 0;
+        
+        Roo.each(items, function(item, k){
+            
+            if(size + item.intSize > 3){
+                queue.push(box);
+                box = [];
+                size = 0;
+            }
+            
+            size = size + item.intSize;
+            
+            box.push(item);
+            
+            if(k == items.length - 1){
+                queue.push(box);
+                box = [];
+                size = 0;
+            }
+            
         }, this);
-      
-        this._processLayoutQueue( queue );
+        
+        this._processVerticalLayoutQueue( queue, isInstant );
     },
+    
+    _horizontalLayoutItems : function ( items , isInstant)
+    {
+        if ( !items || !items.length || items.length < 3) {
+            return;
+        }
+        
+        items.reverse();
+        
+        var eItems = items.slice(0, 3);
+        
+        items = items.slice(3, items.length);
+        
+        var pos = this.el.getBox(true);
+        
+        var minX = pos.x;
+        
+        var maxX = pos.right - this.boxColWidth['sm'] - this.boxColWidth['xs'] - this.gutter * 2;
+        var x = maxX;
+        
+        var queue = [];
+        
+        var box = [];
+        var size = 0;
+        var hit_end = false;
+        
+        Roo.each(items, function(item, k){
+            
+            item.el.setVisibilityMode(Roo.Element.DISPLAY);
+            item.el.show();
+            
+            if(hit_end){
+                item.el.hide();
+                return;
+            }
+            
+            if(queue.length >= this.cols - 1){
+                item.el.hide();
+                return;
+            }
+            
+            if(size + item.intSize > 3){
+                queue.push(box);
+                box = [];
+                size = 0;
+                maxX = x;
+            }
+            
+            var width = this.boxColWidth[item.size] + item.el.getPadding('lr');
+            
+            x = Math.min(maxX, maxX - width - this.gutter);
+            
+            if(x < minX){
+                item.el.hide();
+                hit_end = true;
+                return;
+            }
+            
+            size = size + item.intSize;
+            
+            box.push(item);
+            
+        }, this);
+        
+        if(box.length){
+            queue.push(box);
+        }
+        
+        this._processHorizontalLayoutQueue( queue, eItems, isInstant );
+    },
+    
     /** Sets position of item in DOM
     * @param {Element} item
     * @param {Number} x - horizontal position
     * @param {Number} y - vertical position
     * @param {Boolean} isInstant - disables transitions
     */
-    _processLayoutQueue : function( queue )
-    {
-        for ( var i=0, len = queue.length; i < len; i++ ) {
-            var obj = queue[i];
-            obj.item.position('absolute');
-            obj.item.setXY([obj.x,obj.y], obj.isInstant ? false : true);
-        }
-    },
-      
-    
-    /**
-    * Any logic you want to do after each layout,
-    * i.e. size the container
-    */
-    _postLayout : function()
-    {
-        this.resizeContainer();
-    },
-    
-    resizeContainer : function()
+    _processVerticalLayoutQueue : function( queue, isInstant )
     {
-        if ( !this.isResizingContainer ) {
-            return;
+        var pos = this.el.getBox(true);
+        var x = pos.x;
+        var y = pos.y;
+        var maxY = [];
+        
+        for (var i = 0; i < this.cols; i++){
+            maxY[i] = pos.y;
         }
-        var size = this._getContainerSize();
-        if ( size ) {
-            this.el.setSize(size.width,size.height);
-            this.boxesEl.setSize(size.width,size.height);
+        
+        Roo.each(queue, function(box, k){
+            
+            var col = k % this.cols;
+            
+            Roo.each(box, function(b,kk){
+                
+                b.el.position('absolute');
+                
+                var width = this.boxColWidth[b.size] + b.el.getPadding('lr');
+                
+                b.el.setWidth(width);
+                
+                if(b.square){
+                    b.el.setHeight(width);
+                }
+                
+            }, this);
+            
+            for (var i = 0; i < this.cols; i++){
+                if(maxY[i] >= maxY[col]){
+                    continue;
+                }
+                
+                col = i;
+            }
+            
+            x = pos.x + col * (this.colWidth + this.padWidth);
+            
+            y = maxY[col];
+            
+            var positions = [];
+            
+            switch (box.length){
+                case 1 :
+                    positions = this.getVerticalOneBoxColPositions(x, y, box);
+                    break;
+                case 2 :
+                    positions = this.getVerticalTwoBoxColPositions(x, y, box);
+                    break;
+                case 3 :
+                    positions = this.getVerticalThreeBoxColPositions(x, y, box);
+                    break;
+                default :
+                    break;
+            }
+            
+            Roo.each(box, function(b,kk){
+                
+                b.el.setXY([positions[kk].x, positions[kk].y], isInstant ? false : true);
+                
+                var sz = b.el.getSize();
+                
+                maxY[col] = Math.max(maxY[col], positions[kk].y + sz.height + this.padWidth);
+                
+            }, this);
+            
+        }, this);
+        
+        var mY = 0;
+        
+        for (var i = 0; i < this.cols; i++){
+            mY = Math.max(mY, maxY[i]);
         }
+        
+        this.el.setHeight(mY);
+        
     },
     
-    
-    
-    _resetLayout : function()
+    _processHorizontalLayoutQueue : function( queue, eItems, isInstant )
     {
-        //this.getSize();  // -- does not really do anything.. it probably applies left/right etc. to obuject but not used
-        this.colWidth = this.el.getWidth();
-        //this.gutter = this.el.getWidth(); 
+        var pos = this.el.getBox(true);
+        
+        var minX = pos.x;
+        var minY = pos.y;
+        
+        var maxX = pos.right - (pos.width - this.containerWidth) - this.padWidth;
+        var maxY = pos.bottom;
+        
+        this._processHorizontalEndItem(eItems, maxX, minX, minY, isInstant);
+        
+        var maxX = maxX - this.boxColWidth['sm'] - this.boxColWidth['xs'] - this.gutter * 2;
+        
+        Roo.each(queue, function(box, k){
+            
+            Roo.each(box, function(b, kk){
+                
+                b.el.position('absolute');
+                
+                var width = this.boxColWidth[b.size] + b.el.getPadding('lr');
+                
+                b.el.setWidth(width);
+                
+                if(b.square){
+                    b.el.setHeight(width);
+                }
+                
+            }, this);
+            
+            if(!box.length){
+                return;
+            }
+            
+            var positions = [];
+            
+            switch (box.length){
+                case 1 :
+                    positions = this.getHorizontalOneBoxColPositions(maxX, minY, box);
+                    break;
+                case 2 :
+                    positions = this.getHorizontalTwoBoxColPositions(maxX, minY, box);
+                    break;
+                case 3 :
+                    positions = this.getHorizontalThreeBoxColPositions(maxX, minY, box);
+                    break;
+                default :
+                    break;
+            }
+            
+            Roo.each(box, function(b,kk){
+                
+                b.el.setXY([positions[kk].x, positions[kk].y], isInstant ? false : true);
+                
+                maxX = Math.min(maxX, positions[kk].x - this.gutter);
+                
+            }, this);
+            
+        }, this);
         
-        this.measureColumns();
-
-        // reset column Y
-        var i = this.cols;
-        this.colYs = [];
-        while (i--) {
-            this.colYs.push( 0 );
-        }
-    
-        this.maxY = 0;
     },
-
-    measureColumns : function()
+    
+    _processHorizontalEndItem : function(eItems, maxX, minX, minY, isInstant)
     {
-        this.getContainerWidth();
-      // if columnWidth is 0, default to outerWidth of first item
-        if ( !this.columnWidth ) {
-            var firstItem = this.bricks.first();
-            Roo.log(firstItem);
-            this.columnWidth  = this.containerWidth;
-            if (firstItem && firstItem.attr('originalwidth') ) {
-                this.columnWidth = 1* (firstItem.attr('originalwidth') || firstItem.getWidth());
+        Roo.each(eItems, function(b,k){
+            
+            b.size = 'xs';
+            b.intSize = 1;
+            
+            if(k == 0) {
+                b.size = 'sm';
+                b.intSize = 2;
             }
-            // columnWidth fall back to item of first element
-            Roo.log("set column width?");
-                        this.initialColumnWidth = this.columnWidth  ;
+            
+            b.el.position('absolute');
+            
+            var width = this.boxColWidth[b.size] + b.el.getPadding('lr');
+                
+            b.el.setWidth(width);
 
-            // if first elem has no width, default to size of container
+            if(b.square){
+                b.el.setHeight(width);
+            }
             
-        }
+        }, this);
+
+        var positions = [];
         
+        positions.push({
+            x : maxX - this.boxColWidth['sm'],
+            y : minY
+        });
         
-        if (this.initialColumnWidth) {
-            this.columnWidth = this.initialColumnWidth;
-        }
+        positions.push({
+            x : maxX - this.boxColWidth['xs'],
+            y : minY + this.boxColWidth['sm'] + this.gutter
+        });
         
+        positions.push({
+            x : maxX - this.boxColWidth['sm'] - this.gutter - this.boxColWidth['xs'],
+            y : minY
+        });
         
+        Roo.each(eItems, function(b,k){
             
-        // column width is fixed at the top - however if container width get's smaller we should
-        // reduce it...
-        
-        // this bit calcs how man columns..
+            b.el.setXY([positions[k].x, positions[k].y], isInstant ? false : true);
+
+            var sz = b.el.getSize();
             
-        var columnWidth = this.columnWidth += this.gutter;
-      
-        // calculate columns
-        var containerWidth = this.containerWidth + this.gutter;
-        
-        var cols = (containerWidth - this.padWidth) / (columnWidth - this.padWidth);
-        // fix rounding errors, typically with gutters
-        var excess = columnWidth - containerWidth % columnWidth;
+        }, this);
         
+    },
+    
+    _resetLayout : function()
+    {
+        this.measureColumns();
+    },
+    
+    measureColumns : function()
+    {
+        this.getContainerWidth();
         
-        // if overshoot is less than a pixel, round up, otherwise floor it
-        var mathMethod = excess && excess < 1 ? 'round' : 'floor';
-        cols = Math[ mathMethod ]( cols );
-        this.cols = Math.max( cols, 1 );
+        if(this.containerWidth < this.boxWidth){
+            this.boxWidth = this.containerWidth
+        }
         
+        var boxWidth = this.boxWidth + this.padWidth;
         
-         // padding positioning..
-        var totalColWidth = this.cols * this.columnWidth;
-        var padavail = this.containerWidth - totalColWidth;
-        // so for 2 columns - we need 3 'pads'
+        var containerWidth = this.containerWidth;
         
-        var padNeeded = (1+this.cols) * this.padWidth;
+        var cols = Math.floor(containerWidth / boxWidth);
         
-        var padExtra = Math.floor((padavail - padNeeded) / this.cols);
+        this.cols = Math.max( cols, 1 );
         
-        this.columnWidth += padExtra
-        //this.padWidth = Math.floor(padavail /  ( this.cols));
+        var totalBoxWidth = this.cols * boxWidth;
         
-        // adjust colum width so that padding is fixed??
+        var avail = Math.floor((containerWidth - totalBoxWidth) / this.cols);
         
-        // we have 3 columns ... total = width * 3
-        // we have X left over... that should be used by 
+        this.colWidth = this.boxWidth + avail;
         
-        //if (this.expandC) {
-            
-        //}
+        var xsWidth = Math.floor((this.colWidth - (this.gutter * 2)) / 3);
         
+        this.boxColWidth = {
+            xs : xsWidth,
+            sm : this.colWidth - xsWidth - this.gutter,
+            md : this.colWidth
+        };
         
+        if(this.isHorizontal){
+            this.el.setHeight(this.colWidth);
+        }
         
     },
     
     getContainerWidth : function()
     {
-       /* // container is parent if fit width
-        var container = this.isFitWidth ? this.element.parentNode : this.element;
-        // check that this.size and size are there
-        // IE8 triggers resize on body size change, so they might not be
-        
-        var size = getSize( container );  //FIXME
-        this.containerWidth = size && size.innerWidth; //FIXME
-        */
-         
         this.containerWidth = this.el.getBox(true).width;  //maybe use getComputedWidth
-        
     },
     
-    _getItemLayoutPosition : function( item )  // what is item?
+    getVerticalOneBoxColPositions : function(x, y, box)
     {
-        // we resize the item to our columnWidth..
-      
-        item.setWidth(this.columnWidth);
-        item.autoBoxAdjust  = false;
-        
-        var sz = item.getSize();
-        // how many columns does this brick span
-        var remainder = this.containerWidth % this.columnWidth;
+        var pos = [];
         
-        var mathMethod = remainder && remainder < 1 ? 'round' : 'ceil';
-        // round if off by 1 pixel, otherwise use ceil
-        var colSpan = Math[ mathMethod ]( sz.width  / this.columnWidth );
-        colSpan = Math.min( colSpan, this.cols );
+        var rand = Math.floor(Math.random() * (4 - box[0].intSize));
         
-        // normally this should be '1' as we dont' currently allow multi width columns..
+        pos.push({
+            x : x + (this.boxColWidth['xs'] + this.gutter) * rand,
+            y : y
+        });
         
-        var colGroup = this._getColGroup( colSpan );
-        // get the minimum Y value from the columns
-        var minimumY = Math.min.apply( Math, colGroup );
-        Roo.log([ 'setHeight',  minimumY, sz.height, setHeight ]);
+        return pos;
+    },
+    
+    getVerticalTwoBoxColPositions : function(x, y, box)
+    {
+        var pos = [];
         
-        var shortColIndex = colGroup.indexOf(  minimumY ); // broken on ie8..?? probably...
-         
-        // position the brick
-        var position = {
-            x: this.currentSize.x + (this.padWidth /2) + ((this.columnWidth + this.padWidth )* shortColIndex),
-            y: this.currentSize.y + minimumY + this.padHeight
-        };
+        if(box[0].size == 'xs' && box[1].size == 'xs'){
+            
+            pos.push({
+                x : x,
+                y : y
+            });
+
+            pos.push({
+                x : x + (this.boxColWidth['xs'] + this.gutter) * 2,
+                y : y
+            });
+            
+        }
         
-        Roo.log(position);
-        // apply setHeight to necessary columns
-        var setHeight = minimumY + sz.height + this.padHeight;
-        //Roo.log([ 'setHeight',  minimumY, sz.height, setHeight ]);
+        if(box[0].size == 'xs' && box[1].size == 'sm'){
+            
+            pos.push({
+                x : x,
+                y : y + ((box[1].el.getHeight() - box[0].el.getHeight()) * Math.floor(Math.random() * 2))
+            });
+
+            pos.push({
+                x : x + this.boxColWidth['xs'] + this.gutter,
+                y : y
+            });
+            
+        }
         
-        var setSpan = this.cols + 1 - colGroup.length;
-        for ( var i = 0; i < setSpan; i++ ) {
-          this.colYs[ shortColIndex + i ] = setHeight ;
+        if(box[0].size == 'sm' && box[1].size == 'xs'){
+            
+            pos.push({
+                x : x,
+                y : y
+            });
+
+            pos.push({
+                x : x + this.boxColWidth['sm'] + this.gutter,
+                y : y + ((box[0].el.getHeight() - box[1].el.getHeight()) * Math.floor(Math.random() * 2))
+            });
+            
         }
-      
-        return position;
+        
+        return pos;
+        
     },
     
-    /**
-     * @param {Number} colSpan - number of columns the element spans
-     * @returns {Array} colGroup
-     */
-    _getColGroup : function( colSpan )
+    getVerticalThreeBoxColPositions : function(x, y, box)
     {
-        if ( colSpan < 2 ) {
-          // if brick spans only one column, use all the column Ys
-          return this.colYs;
-        }
-      
-        var colGroup = [];
-        // how many different places could this brick fit horizontally
-        var groupCount = this.cols + 1 - colSpan;
-        // for each group potential horizontal position
-        for ( var i = 0; i < groupCount; i++ ) {
-          // make an array of colY values for that one group
-          var groupColYs = this.colYs.slice( i, i + colSpan );
-          // and get the max value of the array
-          colGroup[i] = Math.max.apply( Math, groupColYs );
-        }
-        return colGroup;
-    },
-    /*
-    _manageStamp : function( stamp )
-    {
-        var stampSize =  stamp.getSize();
-        var offset = stamp.getBox();
-        // get the columns that this stamp affects
-        var firstX = this.isOriginLeft ? offset.x : offset.right;
-        var lastX = firstX + stampSize.width;
-        var firstCol = Math.floor( firstX / this.columnWidth );
-        firstCol = Math.max( 0, firstCol );
+        var pos = [];
         
-        var lastCol = Math.floor( lastX / this.columnWidth );
-        // lastCol should not go over if multiple of columnWidth #425
-        lastCol -= lastX % this.columnWidth ? 0 : 1;
-        lastCol = Math.min( this.cols - 1, lastCol );
+        pos.push({
+            x : x,
+            y : y
+        });
         
-        // set colYs to bottom of the stamp
-        var stampMaxY = ( this.isOriginTop ? offset.y : offset.bottom ) +
-            stampSize.height;
+        pos.push({
+            x : x + this.boxColWidth['xs'] + this.gutter,
+            y : y
+        });
+
+        pos.push({
+            x : x + this.boxColWidth['sm'] + this.gutter,
+            y : y
+        });
             
-        for ( var i = firstCol; i <= lastCol; i++ ) {
-          this.colYs[i] = Math.max( stampMaxY, this.colYs[i] );
-        }
+        return pos;
     },
-    */
     
-    _getContainerSize : function()
+    getHorizontalOneBoxColPositions : function(maxX, minY, box)
     {
-        this.maxY = Math.max.apply( Math, this.colYs );
-        var size = {
-            height: this.maxY
-        };
-      
-        if ( this.isFitWidth ) {
-            size.width = this._getContainerFitWidth();
-        }
-      
-        return size;
+        var pos = [];
+        
+        var rand = Math.floor(Math.random() * (4 - box[0].intSize));
+        
+        pos.push({
+            x : maxX - box[0].el.getWidth(),
+            y : minY + (this.boxColWidth['xs'] + this.gutter) * rand
+        });
+        
+        return pos;
     },
     
-    _getContainerFitWidth : function()
+    getHorizontalTwoBoxColPositions : function(maxX, minY, box)
     {
-        var unusedCols = 0;
-        // count unused columns
-        var i = this.cols;
-        while ( --i ) {
-          if ( this.colYs[i] !== 0 ) {
-            break;
-          }
-          unusedCols++;
-        }
-        // fit container to columns that have been used
-        return ( this.cols - unusedCols ) * this.columnWidth - this.gutter;
+        var pos = [];
+        
+        pos.push({
+            x : maxX - box[0].el.getWidth(),
+            y : minY
+        });
+
+        pos.push({
+            x : maxX - box[1].el.getWidth(),
+            y : minY + box[0].el.getHeight() + this.gutter
+        });
+        
+        return pos;
+        
     },
     
-    needsResizeLayout : function()
+    getHorizontalThreeBoxColPositions : function(maxX, minY, box)
     {
-        var previousWidth = this.containerWidth;
-        this.getContainerWidth();
-        return previousWidth !== this.containerWidth;
+        var pos = [];
+        
+        pos.push({
+            x : maxX - box[0].el.getWidth(),
+            y : minY
+        });
+        
+        pos.push({
+            x : maxX - box[1].el.getWidth(),
+            y : minY - box[0].el.getHeight() - this.gutter
+        });
+        
+        pos.push({
+            x : maxX - box[2].el.getWidth(),
+            y : minY - box[0].el.getHeight() - box[1].el.getHeight() - this.gutter * 2
+        });
+        
+        return pos;
+        
     }
+    
 });
 
  
index 1621dfc..506ec47 100644 (file)
@@ -78,16 +78,18 @@ if(g){C[g].remove(F);F.un("beforecheckchange",onBeforeCheck);}}};}();
 // Roo/bootstrap/Menu.js
 Roo.bootstrap.Menu=function(A){Roo.bootstrap.Menu.superclass.constructor.call(this,A);if(this.registerMenu&&this.type!='treeview'){Roo.bootstrap.MenuMgr.register(this);}this.addEvents({beforeshow:true,beforehide:true,show:true,hide:true,click:true,mouseover:true,mouseout:true,itemclick:true}
 );this.menuitems=new Roo.util.MixedCollection(false,function(o){return o.el.id;});};Roo.extend(Roo.bootstrap.Menu,Roo.bootstrap.Component,{triggerEl:false,type:false,registerMenu:true,menuItems:false,hidden:true,parentMenu:false,getChildContainer:function(){return this.el;
-},getAutoCreate:function(){var A={tag:'ul',cls:'dropdown-menu',style:'z-index:1000'};if(this.type==='submenu'){A.cls='submenu active';}if(this.type==='treeview'){A.cls='treeview-menu';}return A;},initEvents:function(){this.triggerEl.on(Roo.isTouch?'touchstart':'mouseup',this.onTriggerPress,this);
-this.triggerEl.addClass('dropdown-toggle');if(Roo.isTouch){this.el.on('touchstart',this.onTouch,this);}this.el.on('click',this.onClick,this);this.el.on("mouseover",this.onMouseOver,this);this.el.on("mouseout",this.onMouseOut,this);},findTargetItem:function(e){var t=e.getTarget(".dropdown-menu-item",this.el,true);
-if(!t){return false;}if(t&&t.id){return this.menuitems.get(t.id);}return false;},onTouch:function(e){this.onClick(e);},onClick:function(e){Roo.log("menu.onClick");var t=this.findTargetItem(e);if(!t||t.isContainer){return;}Roo.log(e);Roo.log('pass click event');
-t.onClick(e);this.fireEvent("click",this,t,e);this.hide();},onMouseOver:function(e){var t=this.findTargetItem(e);this.fireEvent("mouseover",this,e,t);},isVisible:function(){return !this.hidden;},onMouseOut:function(e){var t=this.findTargetItem(e);this.fireEvent("mouseout",this,e,t);
-},show:function(el,A,B){this.parentMenu=B;if(!this.el){this.render();}this.fireEvent("beforeshow",this);this.showAt(this.el.getAlignToXY(el,A||this.defaultAlign),B,false);},showAt:function(xy,A,_e){this.parentMenu=A;if(!this.el){this.render();}if(_e!==false){this.fireEvent("beforeshow",this);
-}this.hideMenuItems();this.hidden=false;this.triggerEl.addClass('open');if(this.el.getWidth()+xy[0]>Roo.lib.Dom.getViewWidth()){xy[0]=xy[0]-this.el.getWidth()+this.triggerEl.getWidth();}this.el.setXY(xy);this.focus();this.fireEvent("show",this);},focus:function(){return;
-if(!this.hidden){this.doFocus.defer(50,this);}},doFocus:function(){if(!this.hidden){this.focusEl.focus();}},hide:function(A){this.hideMenuItems();if(this.el&&this.isVisible()){this.fireEvent("beforehide",this);if(this.activeItem){this.activeItem.deactivate();
-this.activeItem=null;}this.triggerEl.removeClass('open');;this.hidden=true;this.fireEvent("hide",this);}if(A===true&&this.parentMenu){this.parentMenu.hide(true);}},onTriggerPress:function(e){Roo.log('trigger press');var A=Roo.get(e.getTarget());if(A.findParent('.dropdown-menu')||A.findParent('.treeview-menu')){return;
-}if(this.isVisible()){Roo.log('hide');this.hide();}else{Roo.log('show');this.show(this.triggerEl,false,false);}e.stopEvent();},hideMenuItems:function(){Roo.log("hide Menu Items");if(!this.el){return;}this.el.select('.open',true).each(function(aa){aa.removeClass('open');
-});},addxtypeChild:function(A,B){var C=Roo.bootstrap.Menu.superclass.addxtypeChild.call(this,A,B);this.menuitems.add(C);return C;},getEl:function(){Roo.log(this.el);return this.el;}});
+},getAutoCreate:function(){var A={tag:'ul',cls:'dropdown-menu',style:'z-index:1000'};if(this.type==='submenu'){A.cls='submenu active';}if(this.type==='treeview'){A.cls='treeview-menu';}return A;},initEvents:function(){this.triggerEl.on('click',this.onTriggerClick,this);
+this.triggerEl.on(Roo.isTouch?'touchstart':'mouseup',this.onTriggerPress,this);this.triggerEl.addClass('dropdown-toggle');if(Roo.isTouch){this.el.on('touchstart',this.onTouch,this);}this.el.on('click',this.onClick,this);this.el.on("mouseover",this.onMouseOver,this);
+this.el.on("mouseout",this.onMouseOut,this);},findTargetItem:function(e){var t=e.getTarget(".dropdown-menu-item",this.el,true);if(!t){return false;}if(t&&t.id){return this.menuitems.get(t.id);}return false;},onTouch:function(e){Roo.log("menu.onTouch");this.onClick(e);
+},onClick:function(e){Roo.log("menu.onClick");var t=this.findTargetItem(e);if(!t||t.isContainer){return;}Roo.log(e);Roo.log('pass click event');t.onClick(e);this.fireEvent("click",this,t,e);this.hide();},onMouseOver:function(e){var t=this.findTargetItem(e);
+this.fireEvent("mouseover",this,e,t);},isVisible:function(){return !this.hidden;},onMouseOut:function(e){var t=this.findTargetItem(e);this.fireEvent("mouseout",this,e,t);},show:function(el,A,B){this.parentMenu=B;if(!this.el){this.render();}this.fireEvent("beforeshow",this);
+this.showAt(this.el.getAlignToXY(el,A||this.defaultAlign),B,false);},showAt:function(xy,A,_e){this.parentMenu=A;if(!this.el){this.render();}if(_e!==false){this.fireEvent("beforeshow",this);}this.hideMenuItems();this.hidden=false;this.triggerEl.addClass('open');
+if(this.el.getWidth()+xy[0]>Roo.lib.Dom.getViewWidth()){xy[0]=xy[0]-this.el.getWidth()+this.triggerEl.getWidth();}if(this.el.getStyle('top').slice(-1)!="%"){this.el.setXY(xy);}this.focus();this.fireEvent("show",this);},focus:function(){return;if(!this.hidden){this.doFocus.defer(50,this);
+}},doFocus:function(){if(!this.hidden){this.focusEl.focus();}},hide:function(A){this.hideMenuItems();if(this.el&&this.isVisible()){this.fireEvent("beforehide",this);if(this.activeItem){this.activeItem.deactivate();this.activeItem=null;}this.triggerEl.removeClass('open');
+;this.hidden=true;this.fireEvent("hide",this);}if(A===true&&this.parentMenu){this.parentMenu.hide(true);}},onTriggerClick:function(e){Roo.log('trigger click');var A=e.getTarget();Roo.log(A.nodeName.toLowerCase());if(A.nodeName.toLowerCase()==='i'){e.preventDefault();
+}},onTriggerPress:function(e){Roo.log('trigger press');var A=Roo.get(e.getTarget());if(A.findParent('.dropdown-menu')||A.findParent('.treeview-menu')){return;}if(this.isVisible()){Roo.log('hide');this.hide();}else{Roo.log('show');this.show(this.triggerEl,false,false);
+}e.stopEvent();},hideMenuItems:function(){Roo.log("hide Menu Items");if(!this.el){return;}this.el.select('.open',true).each(function(aa){aa.removeClass('open');});},addxtypeChild:function(A,B){var C=Roo.bootstrap.Menu.superclass.addxtypeChild.call(this,A,B);
+this.menuitems.add(C);return C;},getEl:function(){Roo.log(this.el);return this.el;}});
 // Roo/bootstrap/MenuItem.js
 Roo.bootstrap.MenuItem=function(A){Roo.bootstrap.MenuItem.superclass.constructor.call(this,A);this.addEvents({"click":true});};Roo.extend(Roo.bootstrap.MenuItem,Roo.bootstrap.Component,{href:false,html:false,preventDefault:true,isContainer:false,active:false,fa:false,getAutoCreate:function(){if(this.isContainer){return {tag:'li',cls:'dropdown-menu-item'}
 ;}var A={tag:'span',html:'Link'};var B={tag:'a',href:'#',cn:[]};if(this.fa!==false){B.cn.push({tag:'i',cls:'fa fa-'+this.fa});}B.cn.push(A);var C={tag:'li',cls:'dropdown-menu-item',cn:[B]};if(this.parent().type=='treeview'){C.cls='treeview-menu';}if(this.active){C.cls+=' active';
@@ -550,14 +552,15 @@ if(this.fieldLabel.length){A=A-this.touchViewHeaderEl.getHeight();}this.touchVie
 if(this.animate){var A=this;(function(){A.touchViewEl.setStyle('display','none');}).defer(150);}else{this.touchViewEl.setStyle('display','none');}},setTouchViewValue:function(){if(this.multiple){this.clearItem();var A=this;Roo.each(this.tickItems,function(o){this.addItem(o);
 },this);}this.hideTouchView();},doTouchViewQuery:function(){var qe={query:'',forceAll:true,combo:this,cancel:false};if(this.fireEvent('beforequery',qe)===false||qe.cancel){return false;}if(!this.alwaysQuery||this.mode=='local'){this.onTouchViewLoad();return;
 }this.store.load();},onTouchViewBeforeLoad:function(A,B){return;},onTouchViewLoad:function(){if(this.store.getCount()<1){this.onTouchViewEmptyResults();return;}this.clearTouchView();var A=this.getRawValue();var B=(this.multiple)?Roo.bootstrap.ComboBox.listItemCheckbox:Roo.bootstrap.ComboBox.listItemRadio;
-this.tickItems=[];this.store.data.each(function(d,G){var H=this.touchViewListGroup.createChild(B);if(this.displayField&&typeof(d.data[this.displayField])!='undefined'){var I={data:d.data,html:d.data[this.displayField]};if(this.fireEvent('touchviewdisplay',this,I)!==false){H.select('.roo-combobox-list-group-item-value',true).first().dom.innerHTML=I.html;
-}}if(!this.multiple&&this.valueField&&typeof(d.data[this.valueField])!='undefined'&&d.data[this.valueField]==this.getValue()){H.select('.roo-combobox-list-group-item-box > input',true).first().attr('checked',true);}if(this.multiple&&this.valueField&&typeof(d.data[this.valueField])!='undefined'&&this.getValue().indexOf(d.data[this.valueField])!=-1){H.select('.roo-combobox-list-group-item-box > input',true).first().attr('checked',true);
-this.tickItems.push(d.data);}H.on('click',this.onTouchViewClick,this,{row:H,rowIndex:G});},this);var C=this.touchViewListGroup.select('.list-group-item > .roo-combobox-list-group-item-box > input:checked',true).first();var D=Roo.lib.Dom.getViewHeight()-this.touchViewFooterEl.getHeight()+this.touchViewBodyEl.getPadding('tb');
-if(this.fieldLabel.length){D=D-this.touchViewHeaderEl.getHeight();}var E=this.touchViewListGroup.getHeight();var F=this;if(C&&E>D){(function(){C.findParent('li').scrollIntoView(F.touchViewListGroup.dom);}).defer(500);}},onTouchViewLoadException:function(){this.hideTouchView();
-},onTouchViewEmptyResults:function(){this.clearTouchView();this.touchViewListGroup.createChild(Roo.bootstrap.ComboBox.emptyResult);this.touchViewListGroup.select('.roo-combobox-touch-view-empty-result',true).first().dom.innerHTML=this.emptyResultText;},clearTouchView:function(){this.touchViewListGroup.dom.innerHTML='';
-},onTouchViewClick:function(e,el,o){e.preventDefault();var A=o.row;var B=o.rowIndex;var r=this.store.getAt(B);if(!this.multiple){Roo.each(this.touchViewListGroup.select('.list-group-item > .roo-combobox-list-group-item-box > input:checked',true).elements,function(c){c.dom.removeAttribute('checked');
+this.tickItems=[];this.store.data.each(function(d,G){var H=this.touchViewListGroup.createChild(B);if(typeof(d.data.cls)!='undefined'&&d.data.cls.length){H.addClass(d.data.cls);}if(this.displayField&&typeof(d.data[this.displayField])!='undefined'){var I={data:d.data,html:d.data[this.displayField]}
+;if(this.fireEvent('touchviewdisplay',this,I)!==false){H.select('.roo-combobox-list-group-item-value',true).first().dom.innerHTML=I.html;}}if(!this.multiple&&this.valueField&&typeof(d.data[this.valueField])!='undefined'&&d.data[this.valueField]==this.getValue()){H.select('.roo-combobox-list-group-item-box > input',true).first().attr('checked',true);
+}if(this.multiple&&this.valueField&&typeof(d.data[this.valueField])!='undefined'&&this.getValue().indexOf(d.data[this.valueField])!=-1){H.select('.roo-combobox-list-group-item-box > input',true).first().attr('checked',true);this.tickItems.push(d.data);}H.on('click',this.onTouchViewClick,this,{row:H,rowIndex:G}
+);},this);var C=this.touchViewListGroup.select('.list-group-item > .roo-combobox-list-group-item-box > input:checked',true).first();var D=Roo.lib.Dom.getViewHeight()-this.touchViewFooterEl.getHeight()+this.touchViewBodyEl.getPadding('tb');if(this.fieldLabel.length){D=D-this.touchViewHeaderEl.getHeight();
+}var E=this.touchViewListGroup.getHeight();var F=this;if(C&&E>D){(function(){C.findParent('li').scrollIntoView(F.touchViewListGroup.dom);}).defer(500);}},onTouchViewLoadException:function(){this.hideTouchView();},onTouchViewEmptyResults:function(){this.clearTouchView();
+this.touchViewListGroup.createChild(Roo.bootstrap.ComboBox.emptyResult);this.touchViewListGroup.select('.roo-combobox-touch-view-empty-result',true).first().dom.innerHTML=this.emptyResultText;},clearTouchView:function(){this.touchViewListGroup.dom.innerHTML='';
+},onTouchViewClick:function(e,el,o){e.preventDefault();var A=o.row;var B=o.rowIndex;var r=this.store.getAt(B);if(this.fireEvent('beforeselect',this,r,B)!==false){if(!this.multiple){Roo.each(this.touchViewListGroup.select('.list-group-item > .roo-combobox-list-group-item-box > input:checked',true).elements,function(c){c.dom.removeAttribute('checked');
 },this);A.select('.roo-combobox-list-group-item-box > input',true).first().attr('checked',true);this.setFromData(r.data);var C=this.closeTriggerEl();if(C){C.show();}this.hideTouchView();this.fireEvent('select',this,r,B);return;}if(this.valueField&&typeof(r.data[this.valueField])!='undefined'&&this.getValue().indexOf(r.data[this.valueField])!=-1){A.select('.roo-combobox-list-group-item-box > input',true).first().dom.removeAttribute('checked');
-this.tickItems.splice(this.tickItems.indexOf(r.data),1);return;}A.select('.roo-combobox-list-group-item-box > input',true).first().attr('checked',true);this.addItem(r.data);this.tickItems.push(r.data);}});Roo.apply(Roo.bootstrap.ComboBox,{header:{tag:'div',cls:'modal-header',cn:[{tag:'h4',cls:'modal-title'}
+this.tickItems.splice(this.tickItems.indexOf(r.data),1);return;}A.select('.roo-combobox-list-group-item-box > input',true).first().attr('checked',true);this.addItem(r.data);this.tickItems.push(r.data);}}});Roo.apply(Roo.bootstrap.ComboBox,{header:{tag:'div',cls:'modal-header',cn:[{tag:'h4',cls:'modal-title'}
 ]},body:{tag:'div',cls:'modal-body',cn:[{tag:'ul',cls:'list-group'}]},listItemRadio:{tag:'li',cls:'list-group-item',cn:[{tag:'span',cls:'roo-combobox-list-group-item-value'},{tag:'div',cls:'roo-combobox-list-group-item-box pull-xs-right radio-inline radio radio-info',cn:[{tag:'input',type:'radio'}
 ,{tag:'label'}]}]},listItemCheckbox:{tag:'li',cls:'list-group-item',cn:[{tag:'span',cls:'roo-combobox-list-group-item-value'},{tag:'div',cls:'roo-combobox-list-group-item-box pull-xs-right checkbox-inline checkbox checkbox-info',cn:[{tag:'input',type:'checkbox'}
 ,{tag:'label'}]}]},emptyResult:{tag:'div',cls:'alert alert-danger roo-combobox-touch-view-empty-result'},footer:{tag:'div',cls:'modal-footer',cn:[{tag:'div',cls:'row',cn:[{tag:'div',cls:'col-xs-6 text-left',cn:{tag:'button',cls:'btn btn-danger roo-touch-view-cancel',html:'Cancel'}
@@ -768,13 +771,14 @@ var id=Roo.id();var B={};B.cls='form-group '+this.inputType;if(this.inline){B.cl
 }});var E=C;if(this.before||this.after){E={cls:'input-group',cn:[]};if(this.before){E.cn.push({tag:'span',cls:'input-group-addon',html:this.before});}E.cn.push(C);if(this.after){E.cn.push({tag:'span',cls:'input-group-addon',html:this.after});}}if(A==='left'&&this.fieldLabel.length){B.cn=[{tag:'label','for':id,cls:'control-label col-md-'+this.labelWidth,html:this.fieldLabel}
 ,{cls:"col-md-"+(12-this.labelWidth),cn:[E]}];}else if(this.fieldLabel.length){B.cn=[{tag:this.boxLabel?'span':'label','for':id,cls:'control-label box-input-label',html:this.fieldLabel},E];}else{B.cn=[E];}if(this.boxLabel){var F={tag:'label',cls:'box-label',html:this.boxLabel}
 ;if(this.tooltip){F.tooltip=this.tooltip;}B.cn.push(F);}return B;},inputEl:function(){return this.el.select('input.roo-'+this.inputType,true).first();},labelEl:function(){return this.el.select('label.control-label',true).first();},label:function(){return this.labelEl();
-},initEvents:function(){this.inputEl().on('click',this.onClick,this);if(this.boxLabel){this.el.select('label.box-label',true).first().on('click',this.onClick,this);}this.startValue=this.getValue();if(this.groupId){Roo.bootstrap.CheckBox.register(this);}},onClick:function(){this.setChecked(!this.checked);
-},setChecked:function(A,B){this.startValue=this.getValue();if(this.inputType=='radio'){Roo.each(this.el.up('form').select('input[name='+this.name+']',true).elements,function(e){e.dom.checked=false;});this.inputEl().dom.checked=true;this.inputEl().dom.value=this.inputValue;
-if(B!==true){this.fireEvent('check',this,true);}this.validate();return;}this.checked=A;this.inputEl().dom.checked=A;this.inputEl().dom.value=A?this.inputValue:this.valueOff;if(B!==true){this.fireEvent('check',this,A);}this.validate();},getValue:function(){if(this.inputType=='radio'){return this.getGroupValue();
-}return this.inputEl().getValue();},getGroupValue:function(){if(typeof(this.el.up('form').child('input[name='+this.name+']:checked',true))=='undefined'){return '';}return this.el.up('form').child('input[name='+this.name+']:checked',true).value;},setValue:function(v,A){if(this.inputType=='radio'){this.setGroupValue(v,A);
-return;}this.setChecked(((typeof(v)=='undefined')?this.checked:(String(v)===String(this.inputValue))),A);this.validate();},setGroupValue:function(v,A){this.startValue=this.getValue();Roo.each(this.el.up('form').select('input[name='+this.name+']',true).elements,function(e){e.dom.checked=false;
-if(e.dom.value==v){e.dom.checked=true;}});if(A!==true){this.fireEvent('check',this,true);}this.validate();return;},validate:function(){if(this.disabled||(this.inputType=='radio'&&this.validateRadio())||(this.inputType=='checkbox'&&this.validateCheckbox())){this.markValid();
-return true;}this.markInvalid();return false;},validateRadio:function(){var A=false;Roo.each(this.el.up('form').select('input[name='+this.name+']',true).elements,function(e){if(!e.dom.checked){return;}A=true;return false;});return A;},validateCheckbox:function(){if(!this.groupId){return (this.getValue()==this.inputValue||this.allowBlank)?true:false;
+},boxLabelEl:function(){return this.el.select('label.box-label',true).first();},initEvents:function(){this.inputEl().on('click',this.onClick,this);if(this.boxLabel){this.el.select('label.box-label',true).first().on('click',this.onClick,this);}this.startValue=this.getValue();
+if(this.groupId){Roo.bootstrap.CheckBox.register(this);}},onClick:function(){this.setChecked(!this.checked);},setChecked:function(A,B){this.startValue=this.getValue();if(this.inputType=='radio'){Roo.each(this.el.up('form').select('input[name='+this.name+']',true).elements,function(e){e.dom.checked=false;
+});this.inputEl().dom.checked=true;this.inputEl().dom.value=this.inputValue;if(B!==true){this.fireEvent('check',this,true);}this.validate();return;}this.checked=A;this.inputEl().dom.checked=A;this.inputEl().dom.value=A?this.inputValue:this.valueOff;if(B!==true){this.fireEvent('check',this,A);
+}this.validate();},getValue:function(){if(this.inputType=='radio'){return this.getGroupValue();}return this.inputEl().getValue();},getGroupValue:function(){if(typeof(this.el.up('form').child('input[name='+this.name+']:checked',true))=='undefined'){return '';
+}return this.el.up('form').child('input[name='+this.name+']:checked',true).value;},setValue:function(v,A){if(this.inputType=='radio'){this.setGroupValue(v,A);return;}this.setChecked(((typeof(v)=='undefined')?this.checked:(String(v)===String(this.inputValue))),A);
+this.validate();},setGroupValue:function(v,A){this.startValue=this.getValue();Roo.each(this.el.up('form').select('input[name='+this.name+']',true).elements,function(e){e.dom.checked=false;if(e.dom.value==v){e.dom.checked=true;}});if(A!==true){this.fireEvent('check',this,true);
+}this.validate();return;},validate:function(){if(this.disabled||(this.inputType=='radio'&&this.validateRadio())||(this.inputType=='checkbox'&&this.validateCheckbox())){this.markValid();return true;}this.markInvalid();return false;},validateRadio:function(){var A=false;
+Roo.each(this.el.up('form').select('input[name='+this.name+']',true).elements,function(e){if(!e.dom.checked){return;}A=true;return false;});return A;},validateCheckbox:function(){if(!this.groupId){return (this.getValue()==this.inputValue||this.allowBlank)?true:false;
 }var A=Roo.bootstrap.CheckBox.get(this.groupId);if(!A){return false;}var r=false;for(var i in A){if(r){break;}r=(A[i].getValue()==A[i].inputValue)?true:false;}return r;},markValid:function(){if(this.allowBlank){return;}var A=this;this.fireEvent('valid',this);
 var B=Roo.bootstrap.FieldLabel.get(this.name+'-group');if(this.groupId){B=Roo.bootstrap.FieldLabel.get(this.groupId+'-group');}if(B){B.markValid();}if(this.inputType=='radio'){Roo.each(this.el.up('form').select('input[name='+this.name+']',true).elements,function(e){e.findParent('.form-group',false,true).removeClass([A.invalidClass,A.validClass]);
 e.findParent('.form-group',false,true).addClass(A.validClass);});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);
@@ -1188,18 +1192,28 @@ return A;}this.markInvalid();return A;},markValid:function(){var A=this.el.selec
 var C=this.el.select('i.fa-star',true).first();if(B&&!C){this.el.select('.roo-date-split-field-label',true).createChild({tag:'i',cls:'text-danger fa fa-lg fa-star',tooltip:'This field is required',style:'margin-right:5px;'},B,true);}this.fireEvent('invalid',this,A);
 },clearInvalid:function(){var A=this.el.select('label',true).first();var B=this.el.select('i.fa-star',true).first();if(A&&B){B.remove();}this.fireEvent('valid',this);},getName:function(){return this.name;}});
 // Roo/bootstrap/LayoutMasonry.js
-Roo.bootstrap.LayoutMasonry=function(A){Roo.bootstrap.LayoutMasonry.superclass.constructor.call(this,A);};Roo.extend(Roo.bootstrap.LayoutMasonry,Roo.bootstrap.Component,{isFitWidth:false,isOriginLeft:true,isOriginTop:false,isLayoutInstant:false,isResizingContainer:true,columnWidth:0,padHeight:10,isAutoInitial:true,gutter:0,containerWidth:0,initialColumnWidth:0,currentSize:null,colYs:null,maxY:0,padWidth:10,tag:'div',cls:'',bricks:null,cols:0,_isLayoutInited:null,getAutoCreate:function(){var A={tag:this.tag,cls:'blog-masonary-wrapper '+this.cls,cn:{cls:'mas-boxes masonary'}
+Roo.bootstrap.LayoutMasonry=function(A){Roo.bootstrap.LayoutMasonry.superclass.constructor.call(this,A);this.bricks=[];};Roo.extend(Roo.bootstrap.LayoutMasonry,Roo.bootstrap.Component,{isLayoutInstant:false,boxWidth:450,padWidth:10,gutter:10,isAutoInitial:true,containerWidth:0,isHorizontal:false,currentSize:null,tag:'div',cls:'',bricks:null,cols:1,_isLayoutInited:false,getAutoCreate:function(){var A={tag:this.tag,cls:'blog-masonary-wrapper '+this.cls,cn:{cls:'mas-boxes masonary'}
 };return A;},getChildContainer:function(){if(this.boxesEl){return this.boxesEl;}this.boxesEl=this.el.select('.mas-boxes').first();return this.boxesEl;},initEvents:function(){var A=this;if(this.isAutoInitial){Roo.log('hook children rendered');this.on('childrenrendered',function(){Roo.log('children rendered');
-A.initial();},this);}},initial:function(){this.reloadItems();this.currentSize=this.el.getBox(true);Roo.EventManager.onWindowResize(this.resize,this);if(!this.isAutoInitial){this.layout();return;}this.layout.defer(500,this);},reloadItems:function(){this.bricks=this.el.select('.masonry-brick',true);
-this.bricks.each(function(b){if(!b.attr('originalwidth')){b.attr('originalwidth',b.getSize().width);}});Roo.log(this.bricks.elements.length);},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");
-return;}this.currentSize=cs;this.layout();},layout:function(){Roo.log('layout');this._resetLayout();var A=this.isLayoutInstant!==undefined?this.isLayoutInstant:!this._isLayoutInited;this.layoutItems(A);this._isLayoutInited=true;},layoutItems:function(A){this._layoutItems(this.bricks,A);
-this._postLayout();},_layoutItems:function(A,B){if(!A||!A.elements.length){return;}var C=[];A.each(function(D){Roo.log("layout item");Roo.log(D);var E=this._getItemLayoutPosition(D);E.item=D;E.isInstant=B;C.push(E);},this);this._processLayoutQueue(C);},_processLayoutQueue:function(A){for(var i=0,B=A.length;
-i<B;i++){var C=A[i];C.item.position('absolute');C.item.setXY([C.x,C.y],C.isInstant?false:true);}},_postLayout:function(){this.resizeContainer();},resizeContainer:function(){if(!this.isResizingContainer){return;}var A=this._getContainerSize();if(A){this.el.setSize(A.width,A.height);
-this.boxesEl.setSize(A.width,A.height);}},_resetLayout:function(){this.colWidth=this.el.getWidth();this.measureColumns();var i=this.cols;this.colYs=[];while(i--){this.colYs.push(0);}this.maxY=0;},measureColumns:function(){this.getContainerWidth();if(!this.columnWidth){var A=this.bricks.first();
-Roo.log(A);this.columnWidth=this.containerWidth;if(A&&A.attr('originalwidth')){this.columnWidth=1*(A.attr('originalwidth')||A.getWidth());}Roo.log("set column width?");this.initialColumnWidth=this.columnWidth;}if(this.initialColumnWidth){this.columnWidth=this.initialColumnWidth;
-}var B=this.columnWidth+=this.gutter;var C=this.containerWidth+this.gutter;var D=(C-this.padWidth)/(B-this.padWidth);var E=B-C%B;var F=E&&E<1?'round':'floor';D=Math[F](D);this.cols=Math.max(D,1);var G=this.cols*this.columnWidth;var H=this.containerWidth-G;
-var I=(1+this.cols)*this.padWidth;var J=Math.floor((H-I)/this.cols);this.columnWidth+=J},getContainerWidth:function(){this.containerWidth=this.el.getBox(true).width;},_getItemLayoutPosition:function(A){A.setWidth(this.columnWidth);A.autoBoxAdjust=false;var sz=A.getSize();
-var B=this.containerWidth%this.columnWidth;var C=B&&B<1?'round':'ceil';var D=Math[C](sz.width/this.columnWidth);D=Math.min(D,this.cols);var E=this._getColGroup(D);var F=Math.min.apply(Math,E);Roo.log(['setHeight',F,sz.height,I]);var G=E.indexOf(F);var H={x:this.currentSize.x+(this.padWidth/2)+((this.columnWidth+this.padWidth)*G),y:this.currentSize.y+F+this.padHeight}
-;Roo.log(H);var I=F+sz.height+this.padHeight;var J=this.cols+1-E.length;for(var i=0;i<J;i++){this.colYs[G+i]=I;}return H;},_getColGroup:function(A){if(A<2){return this.colYs;}var B=[];var C=this.cols+1-A;for(var i=0;i<C;i++){var D=this.colYs.slice(i,i+A);
-B[i]=Math.max.apply(Math,D);}return B;},_getContainerSize:function(){this.maxY=Math.max.apply(Math,this.colYs);var A={height:this.maxY};if(this.isFitWidth){A.width=this._getContainerFitWidth();}return A;},_getContainerFitWidth:function(){var A=0;var i=this.cols;
-while(--i){if(this.colYs[i]!==0){break;}A++;}return (this.cols-A)*this.columnWidth-this.gutter;},needsResizeLayout:function(){var A=this.containerWidth;this.getContainerWidth();return A!==this.containerWidth;}});
+A.initial();},this);}},initial:function(){this.currentSize=this.el.getBox(true);Roo.EventManager.onWindowResize(this.resize,this);if(!this.isAutoInitial){this.layout();return;}this.layout();return;},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");return;}this.currentSize=cs;this.layout();},layout:function(){this._resetLayout();var A=this.isLayoutInstant!==undefined?this.isLayoutInstant:!this._isLayoutInited;
+this.layoutItems(A);this._isLayoutInited=true;},layoutItems:function(A){var B=Roo.apply([],this.bricks);if(this.isHorizontal){this._horizontalLayoutItems(B,A);return;}this._verticalLayoutItems(B,A);},_verticalLayoutItems:function(A,B){if(!A||!A.length){return;
+}if(this.isHorizontal){if(A.length<3){return;}var C=A.slice(A.length-3,A.length);A=A.slice(0,A.length-3);}var D=[];var E=[];var F=0;Roo.each(A,function(G,k){if(F+G.intSize>3){D.push(E);E=[];F=0;}F=F+G.intSize;E.push(G);if(k==A.length-1){D.push(E);E=[];F=0;
+}},this);this._processVerticalLayoutQueue(D,B);},_horizontalLayoutItems:function(A,B){if(!A||!A.length||A.length<3){return;}A.reverse();var C=A.slice(0,3);A=A.slice(3,A.length);var D=this.el.getBox(true);var E=D.x;var F=D.right-this.boxColWidth['sm']-this.boxColWidth['xs']-this.gutter*2;
+var x=F;var G=[];var H=[];var I=0;var J=false;Roo.each(A,function(K,k){K.el.setVisibilityMode(Roo.Element.DISPLAY);K.el.show();if(J){K.el.hide();return;}if(G.length>=this.cols-1){K.el.hide();return;}if(I+K.intSize>3){G.push(H);H=[];I=0;F=x;}var L=this.boxColWidth[K.size]+K.el.getPadding('lr');
+x=Math.min(F,F-L-this.gutter);if(x<E){K.el.hide();J=true;return;}I=I+K.intSize;H.push(K);},this);if(H.length){G.push(H);}this._processHorizontalLayoutQueue(G,C,B);},_processVerticalLayoutQueue:function(A,B){var C=this.el.getBox(true);var x=C.x;var y=C.y;var D=[];
+for(var i=0;i<this.cols;i++){D[i]=C.y;}Roo.each(A,function(E,k){var F=k%this.cols;Roo.each(E,function(b,kk){b.el.position('absolute');var H=this.boxColWidth[b.size]+b.el.getPadding('lr');b.el.setWidth(H);if(b.square){b.el.setHeight(H);}},this);for(var i=0;
+i<this.cols;i++){if(D[i]>=D[F]){continue;}F=i;}x=C.x+F*(this.colWidth+this.padWidth);y=D[F];var G=[];switch(E.length){case 1:G=this.getVerticalOneBoxColPositions(x,y,E);break;case 2:G=this.getVerticalTwoBoxColPositions(x,y,E);break;case 3:G=this.getVerticalThreeBoxColPositions(x,y,E);
+break;default:break;}Roo.each(E,function(b,kk){b.el.setXY([G[kk].x,G[kk].y],B?false:true);var sz=b.el.getSize();D[F]=Math.max(D[F],G[kk].y+sz.height+this.padWidth);},this);},this);var mY=0;for(var i=0;i<this.cols;i++){mY=Math.max(mY,D[i]);}this.el.setHeight(mY);
+},_processHorizontalLayoutQueue:function(A,B,C){var D=this.el.getBox(true);var E=D.x;var F=D.y;var G=D.right-(D.width-this.containerWidth)-this.padWidth;var H=D.bottom;this._processHorizontalEndItem(B,G,E,F,C);var G=G-this.boxColWidth['sm']-this.boxColWidth['xs']-this.gutter*2;
+Roo.each(A,function(I,k){Roo.each(I,function(b,kk){b.el.position('absolute');var K=this.boxColWidth[b.size]+b.el.getPadding('lr');b.el.setWidth(K);if(b.square){b.el.setHeight(K);}},this);if(!I.length){return;}var J=[];switch(I.length){case 1:J=this.getHorizontalOneBoxColPositions(G,F,I);
+break;case 2:J=this.getHorizontalTwoBoxColPositions(G,F,I);break;case 3:J=this.getHorizontalThreeBoxColPositions(G,F,I);break;default:break;}Roo.each(I,function(b,kk){b.el.setXY([J[kk].x,J[kk].y],C?false:true);G=Math.min(G,J[kk].x-this.gutter);},this);},this);
+},_processHorizontalEndItem:function(A,B,C,D,E){Roo.each(A,function(b,k){b.size='xs';b.intSize=1;if(k==0){b.size='sm';b.intSize=2;}b.el.position('absolute');var G=this.boxColWidth[b.size]+b.el.getPadding('lr');b.el.setWidth(G);if(b.square){b.el.setHeight(G);
+}},this);var F=[];F.push({x:B-this.boxColWidth['sm'],y:D});F.push({x:B-this.boxColWidth['xs'],y:D+this.boxColWidth['sm']+this.gutter});F.push({x:B-this.boxColWidth['sm']-this.gutter-this.boxColWidth['xs'],y:D});Roo.each(A,function(b,k){b.el.setXY([F[k].x,F[k].y],E?false:true);
+var sz=b.el.getSize();},this);},_resetLayout:function(){this.measureColumns();},measureColumns:function(){this.getContainerWidth();if(this.containerWidth<this.boxWidth){this.boxWidth=this.containerWidth}var A=this.boxWidth+this.padWidth;var B=this.containerWidth;
+var C=Math.floor(B/A);this.cols=Math.max(C,1);var D=this.cols*A;var E=Math.floor((B-D)/this.cols);this.colWidth=this.boxWidth+E;var F=Math.floor((this.colWidth-(this.gutter*2))/3);this.boxColWidth={xs:F,sm:this.colWidth-F-this.gutter,md:this.colWidth};if(this.isHorizontal){this.el.setHeight(this.colWidth);
+}},getContainerWidth:function(){this.containerWidth=this.el.getBox(true).width;},getVerticalOneBoxColPositions:function(x,y,A){var B=[];var C=Math.floor(Math.random()*(4-A[0].intSize));B.push({x:x+(this.boxColWidth['xs']+this.gutter)*C,y:y});return B;},getVerticalTwoBoxColPositions:function(x,y,A){var B=[];
+if(A[0].size=='xs'&&A[1].size=='xs'){B.push({x:x,y:y});B.push({x:x+(this.boxColWidth['xs']+this.gutter)*2,y:y});}if(A[0].size=='xs'&&A[1].size=='sm'){B.push({x:x,y:y+((A[1].el.getHeight()-A[0].el.getHeight())*Math.floor(Math.random()*2))});B.push({x:x+this.boxColWidth['xs']+this.gutter,y:y}
+);}if(A[0].size=='sm'&&A[1].size=='xs'){B.push({x:x,y:y});B.push({x:x+this.boxColWidth['sm']+this.gutter,y:y+((A[0].el.getHeight()-A[1].el.getHeight())*Math.floor(Math.random()*2))});}return B;},getVerticalThreeBoxColPositions:function(x,y,A){var B=[];B.push({x:x,y:y}
+);B.push({x:x+this.boxColWidth['xs']+this.gutter,y:y});B.push({x:x+this.boxColWidth['sm']+this.gutter,y:y});return B;},getHorizontalOneBoxColPositions:function(A,B,C){var D=[];var E=Math.floor(Math.random()*(4-C[0].intSize));D.push({x:A-C[0].el.getWidth(),y:B+(this.boxColWidth['xs']+this.gutter)*E}
+);return D;},getHorizontalTwoBoxColPositions:function(A,B,C){var D=[];D.push({x:A-C[0].el.getWidth(),y:B});D.push({x:A-C[1].el.getWidth(),y:B+C[0].el.getHeight()+this.gutter});return D;},getHorizontalThreeBoxColPositions:function(A,B,C){var D=[];D.push({x:A-C[0].el.getWidth(),y:B}
+);D.push({x:A-C[1].el.getWidth(),y:B-C[0].el.getHeight()-this.gutter});D.push({x:A-C[2].el.getWidth(),y:B-C[0].el.getHeight()-C[1].el.getHeight()-this.gutter*2});return D;}});