BorderLayout -=- Using percentage values for width and height

Hi!

As you can see, we can't use percentage width and height with border layout. If you want to do so, your just have to put this piece of code that overrides the actual ExtJS's BorderLayout. After that, you can set width like "width: '33%'".

Ext.override(Ext.layout.BorderLayout, {
 onLayout : function(ct, target){
  var collapsed;
  var size = target.getViewSize(), w = size.width, h = size.height;
  if(!this.rendered){
   target.position();
   target.addClass('x-border-layout-ct');
   collapsed = [];
   var items = ct.items.items;
   for(var i = 0, len = items.length; i < len; i++) {
    var c = items[i];
    var pos = c.region;
    if(c.collapsed){
     collapsed.push(c);
    }
    c.collapsed = false;
    var r = this[pos] = pos != 'center' && c.split ?
     new Ext.layout.BorderLayout.SplitRegion(this, c.initialConfig, pos) :
     new Ext.layout.BorderLayout.Region(this, c.initialConfig, pos);
    if(pos == 'north' || pos == 'south'){
     if(typeof c.height == 'string' && c.relHeight === undefined){
      var p = c.height.match(/(\d+)%/);
      if(p[1]){
       c.relHeight = parseInt(p[1], 10) * .01;
      }
     }
     if(c.relHeight !== undefined){
      if(typeof c.relHeight != 'number'){
       c.relHeight = parseFloat(c.relHeight);
      }
      c.height = h * c.relHeight;
     }
     r.minSize = r.minSize || r.minHeight;
     r.maxSize = r.maxSize || r.maxHeight;
    } else if(pos == 'east' || pos == 'west'){
     if(typeof c.width == 'string' && c.relWidth === undefined){
      var p = c.width.match(/(\d+)%/);
      if(p[1]){
       c.relWidth = parseInt(p[1], 10) * .01;
      }
     }
     if(c.relWidth !== undefined){
      if(typeof c.relWidth != 'number'){
       c.relWidth = parseFloat(c.relWidth);
      }
      c.width = w * c.relWidth;
     }
     r.minSize = r.minSize || r.minWidth;
     r.maxSize = r.maxSize || r.maxWidth;
    }
    if(!c.rendered){
     c.cls = c.cls ? c.cls +' x-border-panel' : 'x-border-panel';
     c.render(target, i);
    }
    r.render(target, c);
   }
   this.rendered = true;
  }
  if(w < 20 || h < 20){
   if(collapsed){
    this.restoreCollapsed = collapsed;
   }
   return;
  }else if(this.restoreCollapsed){
   collapsed = this.restoreCollapsed;
   delete this.restoreCollapsed;
  }
  var centerW = w, centerH = h, centerY = 0, centerX = 0;
  var n = this.north, s = this.south, west = this.west, e = this.east, c = this.center;
  if(!c && Ext.layout.BorderLayout.WARN !== false){
   throw 'No center region defined in BorderLayout ' + ct.id;
  }
  if(n && n.isVisible()){
   var b = n.getSize();
   var m = n.getMargins();
   b.width = w - (m.left+m.right);
   if(n.panel.relHeight !== undefined){
    n.height = Math.round(h * n.panel.relHeight);
    b.height = n.minSize && n.height < n.minSize ? n.minSize :
     (n.maxSize && n.height > n.maxSize ? n.maxSize : n.height);
   }
   b.x = m.left;
   b.y = m.top;
   centerY = b.height + b.y + m.bottom;
   centerH -= centerY;
   n.applyLayout(b);
  }
  if(s && s.isVisible()){
   var b = s.getSize();
   var m = s.getMargins();
   b.width = w - (m.left+m.right);
   if(s.panel.relHeight !== undefined){
    s.height = Math.round(h * s.panel.relHeight);
    b.height = s.minSize && s.height < s.minSize ? s.minSize :
     (s.maxSize && s.height > s.maxSize ? s.maxSize : s.height);
   }
   b.x = m.left;
   var totalHeight = (b.height + m.top + m.bottom);
   b.y = h - totalHeight + m.top;
   centerH -= totalHeight;
   s.applyLayout(b);
  }
  if(west && west.isVisible()){
   var b = west.getSize();
   var m = west.getMargins();
   b.height = centerH - (m.top+m.bottom);
   if(west.panel.relWidth !== undefined){
    west.width = Math.round(w * west.panel.relWidth);
    b.width = west.minSize && west.width < west.minSize ? west.minSize :
     (west.maxSize && west.width > west.maxSize ? west.maxSize : west.width);
   }
   b.x = m.left;
   b.y = centerY + m.top;
   var totalWidth = (b.width + m.left + m.right);
   centerX += totalWidth;
   centerW -= totalWidth;
   west.applyLayout(b);
  }
  if(e && e.isVisible()){
   var b = e.getSize();
   var m = e.getMargins();
   b.height = centerH - (m.top+m.bottom);
   if(e.panel.relWidth !== undefined){
    e.width = Math.round(w * e.panel.relWidth);
    b.width = e.minSize && e.width < e.minSize ? e.minSize :
     (e.maxSize && e.width > e.maxSize ? e.maxSize : e.width);
   }
   var totalWidth = (b.width + m.left + m.right);
   b.x = w - totalWidth + m.left;
   b.y = centerY + m.top;
   centerW -= totalWidth;
   e.applyLayout(b);
  }
  if(c){
   var m = c.getMargins();
   var centerBox = {
    x: centerX + m.left,
    y: centerY + m.top,
    width: centerW - (m.left+m.right),
    height: centerH - (m.top+m.bottom)
   };
   c.applyLayout(centerBox);
  }
  if(collapsed){
   for(var i = 0, len = collapsed.length; i < len; i++){
    collapsed[i].collapse(false);
   }
  }
  if(Ext.isIE && Ext.isStrict){
   target.repaint();
  }
 }
});
Ext.override(Ext.layout.BorderLayout.SplitRegion, {
 onSplitMove : function(split, newSize){
  var s = this.panel.getSize();
  this.lastSplitSize = newSize;
  if(this.position == 'north' || this.position == 'south'){
   this.panel.setSize(s.width, newSize);
   if(this.panel.relHeight !== undefined){
    this.state.relHeight = this.panel.relHeight *= newSize / this.height;
   }else{
    this.state.height = newSize;
   }
  }else{
   this.panel.setSize(newSize, s.height);
   if(this.panel.relWidth !== undefined){
    this.state.relWidth = this.panel.relWidth *= newSize / this.width;
   }else{
    this.state.width = newSize;
   }
  }
  this.layout.layout();
  this.panel.saveState();
  return false;
 }
}); 

This patch has been taken from this post: http://www.extjs.com/forum/showthread.php?p=287261#post287261


Thanks to Condor!