Ext.ux.layout.RowFitLayout

[Iveco]

Just came in handy, thank you very much for this extension!

Exactly what I was looking for now, as always great community

Regards

[azbok]

This row layout seems great so far (once I figured the first panel collapse problem)! I'm using Ext 2.2.

Initial go at it:

new Ext.Panel({
      id       : 'panel-id',   
      title    : 'This Is The Title',
      layout   : 'row-fit',
      items    : [
       { xtype: 'panel', height: 100, title: 'Title 1', html: 'height = 100px' }, 
       { xtype: 'panel', height: 150, title: 'Title 2', html: 'height = 150px' } 
      ]
});

Solution:

new Ext.Panel({
      id       : 'this-is-the-id',   
      title    : 'This Is The Title',
      layout   : 'row-fit',
      items    : [
       { xtype: 'panel', id: 'NEED-ID1', height: 100, title: 'Title 1', html: 'height = 100px' }, 
       { xtype: 'panel', id: 'NEED-ID2', height: 150, title: 'Title 2', html: 'height = 150px' } 
      ]
});

The solution is to use an id for each panel. I have a feeling somewhere in the component construction phase, if there's no id, the collapsed flag gets set to true!

This is actually the 2nd time I've ran into this problem, it's not specific to this row layout module, I think it's a general Ext 2.2 thing.

If in doubt, put in an ID!!

[Eric24]

Great extension!

From my perspective, it seems like this should just be the standard "fit" layout. With a single item and no height config, it does the same thing as "fit" does now, so it can be dropped in without affecting existing "fit" implementations. Adding additional items and/or height configs seamlessly extends basic "fit" functionality to "row-fit" functionality.

--Eric

[cmschick]

Is anyone else seeing this issue. In both IE7 and FF 3.0.6 when I resize with the spitter a dark gray DIV shows up that is the size of the "element to drag". Its very hokey and I was hoping someone had already addressed this.

At any rate I'll be looking into to it to see what I can find.

[sircyaj]

Very nice! Exactly what I wanted. Thanks!

[jnadler]

I had some significant problems in Safari with the latest version of this component (I had been using an older version).

I have a TabPanel with dynamically added tabs that all contain a row-fit layout. When adding a new tab, all the other tabs content disappears. The tabs are still there, they are just visually empty (Safari only, works fine in FF).

I resolved this problem by reverting just the onLayout() method to the version of that method from an older version of this extension.

[SamuraiJack1]

Can you post a test case?

[jnadler]

Extracting a test case from my massive app would be a chore - instead I'd like to isolate the problem a bit more and maybe I can just suggest a fix.

Great component by the way. This is way more useful than some of the things that are actually part of ExtJS in my opinion. They should include it in the framework.

[SamuraiJack1]

Very useful layout indeed, should be polished as much as possible.

[jnadler]

Here's what I found, making this change in onLayout resolved my problems and it seems to be working with both FF and Safari as expected:

            c.setSize({
                width: targetSize.width,   // - c.getEl().getMargins('lr'),   <-- remove the subtraction
                height: absH
            });
    
            absHeightLeft -= absH;
        }

I still have a minor issue related to the one the guy above has where he gets a big gray box - in some cases a component in my rowfitlayout grows a few pixels each time the screen is resized. If/when I fix that one I'll post another fix here.