The Author Online Book Forums are Moving

The Author Online Book Forums will soon redirect to Manning's liveBook and liveVideo. All book forum content will migrate to liveBook's discussion forum and all video forum content will migrate to liveVideo. Log in to liveBook or liveVideo with your Manning credentials to join the discussion!

Thank you for your engagement in the AoF over the years! We look forward to offering you a more enhanced forum experience.

mvbaffa (1) [Avatar] Offline
#1
Hi,

I am using a plugin proposed in this thread (http://www.sencha.com/forum/showthread.php?28318-Fit-to-parent&highlight=resize) by Condor to make a component fit into its parent.

------------------------------------------------------------------

Ext.namespace('Ext.ux');

Ext.ux.FitToParent = Ext.extend(Object, {
/**
* @cfg {HTMLElement/Ext.Element/String} parent The element to fit the component size to (defaults to the element the component is rendered to).
*/
/**
* @cfg {Boolean} fitWidth If the plugin should fit the width of the component to the parent element (default <tt>true</tt>smilie.
*/
fitWidth: true,

/**
* @cfg {Boolean} fitHeight If the plugin should fit the height of the component to the parent element (default <tt>true</tt>smilie.
*/
fitHeight: true,

/**
* @cfg {Boolean} offsets Decreases the final size with [width, height] (default <tt>[0, 0]</tt>smilie.
*/
offsets: [0, 0],

/**
* @constructor
* @param {HTMLElement/Ext.Element/String/Object} config The parent element or configuration options.
* @ptype fittoparent
*/
constructor: function (config) {
config = config || {};
if (config.tagName || config.dom || Ext.isString(config)) {
config = { parent: config };
}
Ext.apply(this, config);
},

init: function (c) {
c.on('render', function (c) {
c.fitToElement = Ext.get(this.parent || c.getPositionEl().dom.parentNode);
if (!c.doLayout) {
this.fitSizeToParent();
Ext.EventManager.onWindowResize(this.fitSizeToParent, this);
}
}, this, { single: true });
if (c.doLayout) {
c.monitorResize = true;
c.doLayout = c.doLayout.createInterceptor(this.fitSizeToParent);
}
},

fitSizeToParent: function () {
var pos = this.getPosition(true), size = this.fitToElement.getViewSize();
alert( 'size.width=' + size.width + ', size.height=' + size.height );
this.setSize(size.width - pos[0], size.height - pos[1]);
}

});

Ext.preg('fittoparent', Ext.ux.FitToParent);

------------------------------------------------------------------

I have a Viewport that has its central region filled by a table like this:

------------------------------------------------------------------

<table id="usuarioTable" class="tableFullClient">
<tr style="width:100%; height:100%; vertical-align:top">
<td class="listaContas">
<div id="listaContas" style="width:100%; height:100%">
</div>
</td>
<td class="editUsuario">
<div id="editUsuario" style="width:100%; height:100%">
</div>
</td>
</tr>
</table>

------------------------------------------------------------------


The table and its child divs are stretching in the Viewport Panel correctly. In each div I have rendered a Panel and they are stretching correctly too.

The problem is when I resize the browser. When the Browser is resized the table and the divs resize correctly but the panel remains with the same height not fiiling anymore the viewport Panel.

I have discovered what is the problem but I cannot find a solution.

The problem is that when onWindowResize event is triggered and the fitSizeToParent method is called, this.getPosition(true) and this.fitToElement.getViewSize() returns the position and dimensions of the parent that existed before the resize event. That is the resize event occurs before EXT JS internals have the chance to be updated.

You can see it clearly if you put an alert showing position and viewsize just before the setSize. After the alert when I let fitSizeToParent resume the table and the div are resized correctly but the panels remain with the last dimensions.

Which event should I use to call fitSizeToParent and resize my panels correctly after the Window resize event ???

Thanks in advance