[OPEN-628] BorderLayout to offer %age initial sizing of border regions

[Animal]

This is a very commonly requested feature, it would be useful, and it's easy to implement:



Ext.override(Ext.layout.BorderLayout, {
/*
* @cfg alwaysUsePctSizes
* @type Boolean
* Revert to originally configured percentage sizes on Container resize. Defaults to false.
*/
alwaysUsePctSizes: false,

onLayout : function(ct, target){
var collapsed;
if(!this.rendered){
target.position();
target.addClass('x-border-layout-ct');
var items = ct.items.items;
collapsed = [];
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;
this.convertPctSizes(c, target);
if(c.rendered){
if (this.alwaysUsePctSizes) {
c.setSize(c.width, c.height);
c.width = c.initialConfig.width;
c.height = c.initialConfig.height;
}
} else {
c.cls = c.cls ? c.cls +' x-border-panel' : 'x-border-panel';
c.render(target, i);
}
this[pos] = pos != 'center' && c.split ?
new Ext.layout.BorderLayout.SplitRegion(this, c.initialConfig, pos) :
new Ext.layout.BorderLayout.Region(this, c.initialConfig, pos);
this[pos].render(target, c);
}
this.rendered = true;
}

var size = target.getViewSize();
if(size.width < 20 || size.height < 20){ // display none?
if(collapsed){
this.restoreCollapsed = collapsed;
}
return;
}else if(this.restoreCollapsed){
collapsed = this.restoreCollapsed;
delete this.restoreCollapsed;
}

var w = size.width, h = size.height;
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){
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);
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);
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);
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);
var totalWidth = (b.width + m.left + m.right);
b.x = w - totalWidth + m.left;
b.y = centerY + m.top;
centerW -= totalWidth;
e.applyLayout(b);
}

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){ // workaround IE strict repainting issue
target.repaint();
}
},

// private
// Convert percentage based sizes to the indicated percentage of container size
convertPctSizes: function(c, target) {
if ((c.region == 'east' || c.region == 'west') && typeof c.width == 'string') {
var pct = c.width.match(/(\d+)%/);
if (pct[1]) {
c.width = Ext.fly(target).getWidth(true) / 100 * parseInt(pct[1], 10);
}
} else if ((c.region == 'north' || c.region == 'south') && typeof c.height == 'string') {
var pct = c.height.match(/(\d+)%/);
if (pct[1]) {
c.height = Ext.fly(target).getHeight(true) / 100 * parseInt(pct[1], 10);
}
}
}
});

[Condor]

+1

It would be even nicer if regions would remember that they were created using a percentage and would scale their size when the container resizes (not according to their initial % height/width, but relative to their current % height/width within the container).

@Animal: Let me know if you want to look at this, otherwise I will try to create a patch for this...

[Animal]

Yes, might be nice, but should be optional. Border layouts do not usually do this. The border regions are usually fixed, and the center region just gets squeezed of expanded.

I try to do a similar thing in my new version of the ColumnLayout class which allows resizing: After you resize the columns, if you then resize the Container, it attempts to keep the column proportions the same.

[Condor]

Yes, might be nice, but should be optional. Border layouts do not usually do this. The border regions are usually fixed, and the center region just gets squeezed of expanded.

Does it need to be optional? The fact that the height or width was specified as a percentage would seem to indicate that a fixed size isn't desired.

[Animal]

But if they have manually resized one of the regions using a splitter, then that region should not be proportionally resized. The user sized it to see something.

[Condor]

OK, I'll try making it optional.

I actually have an application that could use this layout. It starts with a viewport with 3x3 grid panels (currently using nested border layouts that are initialized with precalculated 33% heights/widths based on the viewport size).
But when the user uses the splitters to change the layout I want the changes to be 'relative' (when the viewport resizes it should keep the size of the the regions relative to the viewport size).

[Animal]

I could use this too. It should take minHeight/minWidth into account too.

[Animal]

I just updated this to allow you to specify



layoutConfig: {
alwaysUsePctSizes: true
}


And it will snap to the configured %age when the Container is resized.

[Animal]

THis has come up again...

http://extjs.com/forum/showthread.php?t=55101

[Animal]

Bump?

Can this make it in. I think it's a useful feature.

[Animal]

width: '50%'?

[mnakula]

Animal,

You understand my question... in the initial panel, you have to give height in pixels it does render anything... what is the best option to solve this issue...

i want to use %per so that it will fit to my parents viewport...

[evant]

Thanks for the code Nige. As you guys have been discussing, we just need to decide on an appropriate behaviour for when the size of a non-center region is changed manually, either by the programmer or the user.

[Animal]

IMHO, if a region who's initialConfig size was a %age, then if dynamically resized, the %age which the new size represents should be recalculated, and then on Container resize, the new %age should be applied.

So if you specify north as height: '50%', drag the splitter so that it's 25%, and then shrink the whole border layout Container, the north should be 25% of whatever the new overall height is.

[Condor]

I agree on the behavior, but I don't like it being dependent on the initialConfig (I can already hear the forum posters asking why their relative size set in initComponent doesn't work).

Maybe we should introduce new properties relHeight and relWidth that are initially filled with the percentage height/width (= a bit like ColumnLayout uses columnWidth vs. width).

[mnakula]

condor,
you are right.. initConfig does not work...

Looking for some good solution..

[Condor]

OK, I finally had a project that required a BorderLayout that:
1. Allows both relative and fixed height/width.
2. Keeps relative height/width (if set) when resizing.
3. Splitter sets either fixed or relative height/width.
4. State management stores either relative or fixed height/width.

heights/widths can be specified as
- height/width:<number> (fixed height/width)
- height/width:'<0-100>%' (percentage height/width)
- relHeight/relWidth:<0.0-1.0> (relative height/width)

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;
}
});

[Animal]

Great piece of work.

Can you throw in some API doc comments about the new configs, and some copy/pasted updated API docs for the ones with new capabilities so that when (it's got to be "when" hasn't it?) a developer is assigned to this, it gets documented too?

[Condor]

API docs for Ext.layout.BorderLayout.Region should probably contain:

/**
* @cfg {Number/String} height
* The height of the region in pixels or as a percentage of the container height (e.g. '33%') (defaults to auto).
* height is only valid for north and south regions without a relHeight.
*/
/**
* @cfg {Number/String} width
* The width of the region in pixels or as a percentage of the container width (e.g. '33%') (defaults to auto).
* width is only valid for west and east regions without a relWidth.
*/
/**
* @cfg {Number} relHeight
* The height of the region as a fraction of the container height (e.g. .33) (default not set).
* relHeight is only valid for north and south regions.
*/
/**
* @cfg {Number} relWidth
* The width of the region as a fraction of the container width (e.g. .33) (default not set).
* relWidth is only valid for west and east regions.
*/
/**
* @cfg {Number} minSize
* The minimum allowable height (for north or south) or width (for west or east) in pixels for this region (default not set)
*/
/**
* @cfg {Number} minHeight
* The minimum allowable height in pixels for this region (defaults to 50)
* minHeight is only valid for north and south regions without a minSize.
*/
/**
* @cfg {Number} minWidth
* The minimum allowable width in pixels for this region (defaults to 50)
* minWidth is only valid for west and east regions without a minSize.
*/
/**
* @cfg {Number} maxSize
* The maximum allowable height (for north or south) or width (for west or east) in pixels for this region (default not set)
*/
/**
* @cfg {Number} maxHeight
* The maximum allowable height in pixels for this region (default not set)
* maxHeight is only valid for north and south regions without a maxSize.
*/
/**
* @cfg {Number} maxWidth
* The maximum allowable width in pixels for this region (default not set)
* maxWidth is only valid for west and east regions without a maxSize.
*/

(good thing you asked for API docs, because I forgot to handle minSize and maxSize)

[Animal]

Bump!

Can we have Condor's suggested code in 3.0?

Percentages on border regions would be great. Some of our users are on low res screens, and some hi res. I don't really want to impose pixels on them, but just divide up their space proportionately.

Perhaps column layout should parse a string ending in "%" in a width setting, and use that as the factional columnWidth as Condor's code does above?

[simeon]

+1 on this as well. Dynamic sizing based on relative size and percent size, and an ability to set Maxheight would be a huge value add for me.

A great addition. I hope this makes 3.0 as well.

[Condor]

I found one small problem in border layout (not only in my extended version, but also in the current version):
The splitter bars correctly respect the minHeight/Width of the center region, but if you resize the container the center region can become smaller than the set minHeight/Width.

I don't see a simple way to fix this...

[mystix]

[ friendly bump ]
+1 to @condor's code.

[Animal]

Hey dev guys!

Any chance Condor's code could make it into 3.1?

[jay@moduscreate.com]

+1

[aconran]

We will look into putting this into 3.1. It will NOT make 3.0.

[PierceSD]

Oops. I recently made my own version of what Condor did, but Condor's approach appears simpler. :)

Can I throw in another request?

Add a userResizable {Boolean} option for regions that are a split region but not resizable.

The need is seen in cases where making a region resizable is not useful, but you want to make it collapsible (especially using collapseMode = mini). One can achieve this effect by setting the minimum and maximum height/width to the same value, but then the UI is misleading: the mouse cursor and split bar proxy make it look resizable, but you can't actually drag the split bar anywhere.

[PierceSD]

I found one small problem in border layout (not only in my extended version, but also in the current version):
The splitter bars correctly respect the minHeight/Width of the center region, but if you resize the container the center region can become smaller than the set minHeight/Width.

I don't see a simple way to fix this...

I submitted a fix for this in the original: http://extjs.com/forum/showthread.php?t=70510

I think a similar approach could be done with the relative widths: calculate the size of the center region first, then assign sizes to the surrounding regions.

[PierceSD]

I tried Condor's solution and ran into a few issues:

1) Collapsed region sizes aren't calculated correctly. The onLayout method shouldn't resize collapsed regions, even if they have a relative size.

2) The onSplitMove method was not calculating the new ratio correctly. It was using the initial configuration size rather than the region's actual size.

The following code fixes those problems and also fixes the container-resizing issues mentioned previously.



Ext.override( Ext.layout.BorderLayout, {

onLayout : function(ct, target){
if( this.restoreCollapsed ) return; //make rendering more efficient


var size = target.getViewSize(), w = size.width, h = size.height;
if(!this.rendered){
this.renderLayout( ct, target, size );
}
if(w < 20 || h < 20){ //not visible?
return;
}

var centerW, centerH, centerY = 0, centerX = 0, nh = 0, sh = 0, ew = 0, ww = 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;
}

nh = this.calcRegionH( n, h );
sh = this.calcRegionH( s, h );
ww = this.calcRegionW( west, w );
ew = this.calcRegionW( e, w );

centerH = h - ( nh + sh );
centerW = w - ( ww + ew );
if ( c ) {
centerH = Math.max( centerH, c.minHeight );
centerW = Math.max( centerW, c.minWidth );
}


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.isCollapsed ){
b.height = nh;
}
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.isCollapsed){
b.height = sh;
}
b.x = m.left;
b.y = m.top + centerH + nh;
//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.isCollapsed ){
b.width = ww;
}
b.x = m.left;
b.y = centerY + m.top;
//var totalWidth = (b.width + m.left + m.right);
//centerX += totalWidth;
//centerW -= totalWidth;
centerX = (b.width + m.left + m.right);
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.isCollapsed){
b.width = ew;
}
//var totalWidth = (b.width + m.left + m.right);
//b.x = w - totalWidth + m.left;
b.x = m.left + centerW + ww;
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(this.restoreCollapsed){
for(var i = 0, len = this.restoreCollapsed.length; i < len; i++){
this.restoreCollapsed[i].collapse(false);
}
delete this.restoreCollapsed;
}
if(Ext.isIE && Ext.isStrict){
target.repaint();
}
},

//separate render function for readability, cohesion
renderLayout: function( ct, target, size )
{
target.position();
target.addClass('x-border-layout-ct');

var items = ct.items.items, w = size.width, h = size.height;
for(var i = 0, len = items.length; i < len; i++) {
var c = items[i];
var pos = c.region;
if(c.collapsed){
if ( !this.restoreCollapsed ) this.restoreCollapsed = [];
this.restoreCollapsed.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;
},

calcRegionH: function( reg, totalH )
{
if( !reg || !reg.isVisible() ) return 0;
if( reg.isCollapsed || reg.relHeight === undefined ) {
var m = reg.getMargins();
return reg.getSize().height + m.top + m.bottom;
}
var newH = Math.round(totalH * reg.relHeight);
return newH.constrain( reg.minSize, reg.maxSize );
},

calcRegionW: function( reg, totalW )
{
if( !reg || !reg.isVisible() ) return 0;
if( reg.isCollapsed || reg.relWidth === undefined ) {
var m = reg.getMargins();
return reg.getSize().width + m.left + m.right;
}
var newW = Math.round( totalW * reg.relWidth );
return newW.constrain( reg.minSize, reg.maxSize );
}
});

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.relHeight *= newSize / s.height;
}else{
this.state.height = newSize;
}
}else{
this.panel.setSize(newSize, s.height);
if(this.panel.relWidth !== undefined){
this.state.relWidth = this.relWidth *= newSize / s.width;
}else{
this.state.width = newSize;
}
}
this.layout.layout();
this.panel.saveState();
return false;
}
});


I added the following because Regions don't have a default max height/width, but the getVMaxSize and getHMaxSize functions sets a default to 10000. This puts the default in the proper place and keeps the min/max calculations consistent.



Ext.override(Ext.layout.BorderLayout.Region, {
maxHeight: 10000,
maxWidth: 10000
});


Thanks, Condor, for your solution. It's much simpler than what I came up with initially.

[Jul]

+1 on coordinate percentages in BorderLayout

Please add this functionality to 3.1

[Jul]

I guess this didn't make it into 3.1

How about 3.2?

[willryanuk]

+1. This would be a useful feature.

[Jamie Avins]

Tentatively slated for 3.3.0.

[rhamflett]

It looks like this didn't make it into 3.3.0. Will it be in the forthcoming v4? Does Condor's code work with 3.3.0 or are there side-effects? I started using ExtJS when 3.1.1 was the norm, so I have no idea how large or small the changes between versions 2 and 3 were.

Thanks,
Rob