PDA

View Full Version : Anyway to active redraw on browser resizing?



Maxeta
5 Nov 2013, 1:36 PM
Current I have a simple border layout viewport using a background-image with a center and a south. The center is a simple panel with a transparent background-color and my south is anothe panel with a grey background color.

When I resize my browser window the background image continues to fill the entire window, however my south panel disappears, then snaps to the bottom. Is there any way to force this item to "lock" to the bottom or auto redraw as the window is being resized.



Ext.define('appName.view.vViewport', {
extend: 'Ext.container.Viewport',
layout: 'border',
style: 'background-image:url("./res/images/Image.png"); background-repeat:repeat;',
items: [
{
region: 'center',
xtype: 'panel',
bodyStyle: 'background-color:transparent;'
},
{
region: 'south',
xtype: 'panel',
height: 20,
bodyStyle: 'background-color:gray;'
}
],


initComponent: function () {
var me = this;
me.callParent();
clog('vViewport.initComponent()');
}


});


P.S. I know this is not necessarily optimal in terms of performance, but if it can be done, I'd like to do it and make it an extended option for users.

Gary Schlosberg
7 Nov 2013, 6:48 AM
In which browser are you seeing this? The south panel is disappearing briefly when you resize?

Maxeta
7 Nov 2013, 7:04 AM
Resizing any browser window to a smaller size, the panel appears to disappear because it hasn't resized yet. Resizing any browser window to a larger size, the panel stays in it's original location until the sizing is complete then snaps into place. So it's not that it's actually disappearing, but I would like to force a more active redraw on these items when resizing the browser window so they appear to be anchored to the browser window itself, and don't appear to play catch-up after the resizing. Is this possible?

burnnat
7 Nov 2013, 7:39 AM
What you're seeing is that the Ext.EventManager#onWindowResize (http://docs.sencha.com/extjs/4.2.1/#!/api/Ext.EventManager-method-onWindowResize) event is buffered by default for 100 ms. If you want to override that, you need to modify the afterFirstLayout (http://docs.sencha.com/extjs/4.2.1/#!/api/Ext.container.Viewport-method-afterFirstLayout) and fireResize (http://docs.sencha.com/extjs/4.2.1/#!/api/Ext.container.Viewport-method-fireResize) events of the Viewport to use an unbuffered resize event (note: these are private methods, so they are subject to breakage without notice in future versions of ExtJS). There's an example fiddle here (https://fiddle.sencha.com/#fiddle/1e4).

I would be remiss, though, if I didn't include a huge disclaimer with this answer: I'll think you'll find that the performance is quite awful, especially if there are more than a couple components on the page, since the entire layout has to be recalculated for every single resize event. There's a reason this event is buffered by the framework, and I would strongly advise against changing that (especially when it requires overriding internal private methods!). That being said, if this is something you're really really sure you want, now you have an idea how to do it.

mazhar.shaikh
11 Nov 2013, 5:12 PM
I have achived the same using this:


onMainViewportResize: function(abstractcomponent, adjWidth, adjHeight, options) {
// This function refreshes the main viewport on browser window resize.
var viewPort = Ext.getCmp("MainViewport");
viewPort.doLayout();
viewPort = null;
},


Thanks