Please help! Extjs 4.x panel resize not working while window resizes

[b.rameesh]

I want to resize the panel according to window screen resizing. How can I get this done? This works perfect in 2.x but not working in 4.x. Please help me to get this fixed.

I have tried this two methods,

Method:1
Ext.create('Ext.panel.Panel', { title: 'Hello', autoWidth: true,

autoheight: true, html: '<p>World!</p>', renderTo: Ext.getBody() });

Method:2

Ext.onReady(function() {
var configs = [
{
title: 'Hello',
autoWidth: true,
autoheight: true,
html: '<p>World!</p>',
renderTo: Ext.getBody()
}
];
Ext.each(configs, function(config) {
var element = Ext.getBody().createChild({cls: 'panel-container'});
Ext.createWidget('panel', Ext.applyIf(config, {
}));
});

});

[sword-it]

Hi!

For your main container, i suggest hbox and/or vbox layouts with various flex settings.

or you can use use onWindowResize event manager-

Ext.EventManager.onWindowResize(function () {
    var width=Ext.getBody().getViewSize().width-100
     ,height = Ext.getBody().getViewSize().height - 140;
    panel.setSize(width, height);
});

see the docs for more specifications:- http://docs.sencha.com/ext-js/4-1/#!...onWindowResize

[b.rameesh]

Still it is not working.

[aionescu]

I want to resize the panel according to window screen resizing. How can I get this done? This works perfect in 2.x but not working in 4.x. Please help me to get this fixed.

I have tried this two methods,

Method:1
Ext.create('Ext.panel.Panel', { title: 'Hello', autoWidth: true,

autoheight: true, html: '<p>World!</p>', renderTo: Ext.getBody() });

Method:2

Ext.onReady(function() {
var configs = [
{
title: 'Hello',
autoWidth: true,
autoheight: true,
html: '<p>World!</p>',
renderTo: Ext.getBody()
}
];
Ext.each(configs, function(config) {
var element = Ext.getBody().createChild({cls: 'panel-container'});
Ext.createWidget('panel', Ext.applyIf(config, {
}));
});

});

We had similar problems, and fixed them by using Viewports and Fit Layouts everywhere for the containers, so that Ext can always calculate and resize things.

[b.rameesh]

Thanks a lot for your reply

[b.rameesh]

Fixed by using view port,


Ext.onReady(function(){

var childPanel1 = Ext.create('Ext.panel.Panel', {
title: 'Child Panel 1',
renderTo: "customer",
collapsible:true,
contentEl: "customerInfo"
});

var childPanel2 = Ext.create('Ext.panel.Panel', {
title: 'Child Panel 2',
renderTo: "listing",
collapsible:true,
contentEl: "listingSearch"
});


Ext.create('Ext.container.Viewport', {
items: [ childPanel1, childPanel2 ]
});

});