tabpanel vbox layout issue after latest Ext Designer update

[Gerald Manipon]

Designer version tested:

• Designer 1.2.2 rev 48

Operating System:

• Mac OS X - 10.6.8

Framework:

• Ext JS 3.4

Description:

• After updating Ext Designer, the change in the layout configuration for a tab results in the scroll bar appearing immediately at the end of the content instead of at the right side of the browser. This only happens in Firefox 7.0.1.

Test Case:

Here's the sdiff (left side original format, right side new format):

layout: {                             |                             layout: 'vbox',
    align: 'stretch',                 <
    type: 'vbox'                      <
},                                    <
title: 'Test Info',                                                 title: 'Test Info',
                                      >                             align: 'stretch',

Steps to reproduce the problem:

• Open up 3.4.x project which includes a tab panel with layout type: vbox and layout align: stretch after update

The result that was expected:

• scrollbar should appear at the right edge of browser

The result that occurs instead:

• scrollbar appears at the end of the panel

Screenshot(s) or Video:

• attached

Debugging already done:

• none

Possible fix:

• maintain layout: {type: 'vbox', align: 'stretch'} instead of layout: 'vbox', align: 'stretch'

[aconran]

Gerald -

This does look like a bug, could you provide us a sample project that illustrates this issue?

Thanks,

[j-joey]

i also have this issue. vbox and hbox layouts need align property to be set in layoutConfig object.

[mdoddridge]

I have a large project we are converting to use the latest Designer and am having the same issue. We rely heavily on vbox and hbox.
Right now I can't continue with the conversion because this really messed up the application.
It took me two days to figure out what the issue was.

[j-joey]

i have a quick and dirty workaround for this problem, this may help you

Ext.Container.prototype.initComponent = Ext.Container.prototype.initComponent.createInterceptor( function(){ 
	if ( { 'vbox' : true, 'hbox' : true }[ this.layout ] ){
		this.layoutConfig = this.layoutConfig || {};
		Ext.applyIf( this.layoutConfig, {
			 type	: this.layout
			,align	: this.align
			,pack	: this.pack || 'start'
		} );
	} 
} );