Resizing portlet problems

[tonvoon]

REQUIRED INFORMATION

Ext version tested:

• Ext 4.0.2, 4.0.7, 4.1.0-beta-1

Browser versions tested against:

• Safari 5.1.2
• Firefox 10.0.2

Description:

• In the portal example, cannot resizing portlets with the south resize handles in 4.0.7, though works in 4.0.2 and 4.1.0-beta1

Steps to reproduce the problem:

• Code changes to stock 4.0.2, 4.0.7 and 4.1.0-beta-1 portal example code attached
• Resizing the bottom portlet in a portal column stops after about 5 pixels. Resizing a portlet above another portlet works

The result that was expected:

• Expect behaviour as in 4.0.2. This is a regression in 4.0.7

The result that occurs instead:

• The resize stops

Test Case:
See diff files, against stock extjs code.

HELPFUL INFORMATION
Screenshot or Video:

• Video at http://www.youtube.com/watch?v=ZcbMk2sPKb0

Possible fix:

I have made the following CSS change:

div.x-portal, div.x-portal .x-column-layout-ct, div.x-portal .x-column-inner, div.x-portal .x-column {
    height: 100%;
}

This allows the portlet to be resized beyond the columns height.

However, this workaround introduces a different problem: If a portlet is further down the page (it is not possible to resize it beyond the original height of the window). So this workaround is not ideal.

I also note that the portal-column appears to be only just big enough for the portlet in 4.0.2, 4.0.7 and 4.1.0-beta-1, so the use of CSS to increase the height of the portal is not a good workaround.

I have raised this with Sencha Support (ticket 6869), but they have only suggested to upgrade to 4.1 beta which is not possible for us. I'm hoping someone smart in the community can find a suitable solution.
Operating System:

• Mac OS X 10.6.8

[mitchellsimoens]

In 4.1.0 beta 3, I added resizable to true in Portlet.js and all portlets are resizable. On the left column I took the 2nd portlet and could resize greater than available screen and scroll down and repeat. I refreshed. I scroll the first one up and down a bit and then clicked the close button on the second portlet destroying it. I then took the first portlet in the first column and resized it and it resized to the available space. I can then scroll down and resize it more.

The issue with the grid not resizing is this. Each column is an instance of PortletColumn which uses anchor layout. It's defaultType is portlet which is the Portlet class. Portlet uses fit layout so the single item under should fit 100% of the height and width. The Portlet only has a GridPortlet as a child so fit layout should fit the grid to be 100% of the width and height of the outer Portlet. So why does the grid not sizing correctly? Because GridPortlet has a height setting of 300px. Remove that from GridPortlet and it will all work as expected in 4.1.0 beta 3.

[tonvoon]

Hi Mitchell,

Thanks for your response. Scott has already given me the solution for 4.1.0, which is similar to your explanation, makes sense and is resolved.

However, the issue is that this bug is in 4.0.7 and there is not a suitable solution. Given our app cannot upgrade to 4.1.0 beta without significant work, we have this one issue remaining that needs resolving.

The frustrating thing is that this behaviour worked fine in 4.0.2, but does not work in 4.0.7. Therefore, this is a regression.

Ton

[mitchellsimoens]

A regression that is now fixed. I cannot give any patches on the forum, this is what the support portal is for so you can ask them for a work around which may cost more xcredits.

[tonvoon]

Mitchell,

I have raised a ticket with support, but they don't seem to be as knowledgeable as you are

In your experience, if I have to dig into the ExtJS internals to work out the differences between 4.0.2 and 4.0.7 to get this functionality working, which js files do you recommend I concentrate on? Where is the problem (that portal column is constraining the resizing of the interior portlet) likely to be?

Ton

[tonvoon]

We've found a solution ourselves. The offending line is in extjs/src/Component.js. The change we made is this:

         resizable = Ext.apply({
             target: me,             dynamic: false,-            constrainTo: me.constrainTo || (me.floatParent ? me.floatParent.getTargetEl() : me.el.getScopeParent()),+            constrainTo:(me.xtype=="portletlet"?me.constrainTo:(me.xtype=="portlet"?me.constrainTo:me.constrainTo||(me.floatParent?me.floatParent.getTargetEl():me.el.getScopeParent())),             handles: me.resizeHandles         }, resizable);          resizable.target = me;

This is a bit of a dirty fix as the xtype is embedded here, but it targets just the particular portlet code because we don't understand what else might be effected.

Hope this helps others, because its been painful for us...