EXT js Page does not Resize with the Browser resize

[Srikanth474]

Hi,

I have implemented a app using EXT JS 4. i used border layout for the viewport and had North, Center and East Regions. i used North region for my Too bar, I have three form panels in the center region and three grid panel in the East region.

The problem i am facing is if i resize the broswer, contents does not shrink they remain extactly the same size as before reducing the browser size and my east region is overlaping part of my center region. and i am loosing portion of the center region.

I tried different options using different layouts, but nothing worked for me.

This is how my Page design looks like


Ext.onReady(function(){

//Ext.tip.QuickTip.initConfig();
Ext.QuickTips.init();
//setInterval("loadUrgentMessagesForUserIfAnyExist();", 120000);
initializeContractPanel ();

});


function initializeContractPanel() {


Ext.create('Ext.container.Viewport',
{
layout: 'border',
height:'100%',
// autoRender:true,
// collapsible:true,
border:false,
//overflow:'auto',
items: [{
region:'north',
split: false,
resizable: true,
border: false,
autoScroll: false,
layout: 'fit',
bodyStyle: 'padding-left: 0px; padding-top: 0px; padding-bottom: 0px; padding-right: 0px;',
items: [getMenus()]
},{
region:'center',
split: false,
resizable: true,
border: false,
autoScroll: false,
id:'testing1',
layout: 'anchor',
bodyStyle: 'padding-left: 0px; padding-top: 0px; padding-bottom: 0px; padding-right: 0px;',
items: [getTesting1Panel(),getTesting2Panel(),getTesting3Panel()]
},{
region:'east',
split: false,
resizable: true,
border: false,
autoScroll: false,
id:'documentsrikanth',
layout: 'anchor',
bodyStyle: 'padding-left: 0px; padding-top: 0px; padding-bottom: 0px; padding-right: 0px;',
items: [getTesting4Panel(),getTesting5Panel(),getTesting6Panel()]
},{
region:'west',
split: false,
resizable: true,
border: false,
autoScroll: false,
layout: 'fit',
bodyStyle: 'padding-left: 0px; padding-top: 0px; padding-bottom: 0px; padding-right: 0px;',
items: []
}
]
});

}




Thanks in Advance, any help would be greatly appreciated.

[mitchellsimoens]

try removing height config on the viewport

[Srikanth474]

I resolved the issue.. i was mentioning numeric height and width for the items in center and east region. i have re done my layout using hbox in the center region and used flex to maintain width and percentage for height.. now my page is resizing properly...