View Full Version : Fit To Parent

16 Mar 2011, 3:32 AM

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

* @class Ext.ux.FitToParent
* @extends Object
* <p>Plugin for {@link Ext.BoxComponent BoxComponent} and descendants that adjusts the size of the component to fit inside a parent element</p>
* <p>The following example will adjust the size of the panel to fit inside the element with id="some-el":<pre><code>
var panel = new Ext.Panel({
title: 'Test',
renderTo: 'some-el',
plugins: ['fittoparent']
* <p>It is also possible to specify additional parameters:<pre><code>
var panel = new Ext.Panel({
title: 'Test',
renderTo: 'other-el',
autoHeight: true,
plugins: [
new Ext.ux.FitToParent({
parent: 'parent-el',
fitHeight: false,
offsets: [10, 0]
* <p>The element the component is rendered to needs to have <tt>style="overflow:hidden"</tt>, otherwise the component will only grow to fit the parent element, but it will never shrink.</p>
* <p>Note: This plugin should not be used when the parent element is the document body. In this case you should use a {@link Ext.Viewport Viewport} container.</p>
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>).
fitWidth: true,
* @cfg {Boolean} fitHeight If the plugin should fit the height of the component to the parent element (default <tt>true</tt>).
fitHeight: true,
* @cfg {Boolean} offsets Decreases the final size with [width, height] (default <tt>[0, 0]</tt>).
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) {
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%">
<td class="editUsuario">
<div id="editUsuario" style="width:100%; height:100%">

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

16 Mar 2011, 6:18 AM
Please post in the correct forum and don't double post.

16 Mar 2011, 6:40 AM
I did not douible post. I have posted by mistake in another forum and moved to this one when I have noted the mistake.

I could not find a way to delete my own post.

16 Mar 2011, 11:18 AM
I am looking for a solution and can not find it.