PDA

View Full Version : Anchor and Hbox layouts



lucia_mgv
1 Dec 2011, 8:08 AM
Hi,

I have a really simple example of hbox and anchor layour within a viewport and when I resize the viewport and vertical scroll bar appears, it is also appearing and anoying horizontal scroll. As I have an anchor layout the main containers width should recalculate when the vertical scroll bar appears, but in ExtJS 4.1 it doesn't...

Here is the example:



var Container1 = new Ext.container.Container({
height:400,
flex:1,
style:'background-color:red;'
});
var Container2 = new Ext.container.Container({
height:400,
width:200,
style:'background-color:green;'
});
var CNT=new Ext.container.Container({
id:'CNT',
anchor:'100%',
layout:'hbox',
style:'background-color:blue;',
items:[Container1, Container2]
});
var MWINDOW=new Ext.container.Container({
id:'MWINDOW',
cls:'l129',
style:'',
padding:'12 12 12 12',
autoScroll:true,
layout:'anchor',
items:[CNT]
});
var viewport=new Ext.container.Viewport({
id:'VIEWPORT',
layout:'fit',
cls:'l129',
items:MWINDOW
});


Maybe I am doing something wrong, but in ExjJS 4.0.7 this is working...

Lucía

mitchellsimoens
1 Dec 2011, 9:57 AM
Using this code (removed the new keyword and all the ids... ids are bad):


var Container1 = Ext.create('Ext.container.Container', {
height:400,
flex:1,
style:'background-color:red;'
});
var Container2 = Ext.create('Ext.container.Container', {
height:400,
width:200,
style:'background-color:green;'
});
var CNT= Ext.create('Ext.container.Container', {
anchor:'100%',
layout:'hbox',
style:'background-color:blue;',
items:[Container1, Container2]
});
var MWINDOW= Ext.create('Ext.container.Container', {
cls:'l129',
style:'',
padding:'12 12 12 12',
autoScroll:true,
layout:'anchor',
items:[CNT]
});
var viewport = Ext.create('Ext.container.Viewport', {
layout:'fit',
cls:'l129',
items:MWINDOW
});

and 4.0.7, 4.1 PR1, and our latest code I cannot produce scrollbars.