Page 1 of 2 12 LastLast
Results 1 to 10 of 15

Thread: [FIXED][2.*,3.0] layout in collapsed Panels

    Thank you for reporting this bug. We will make it our priority to review this report.
  1. #1
    Sencha User Animal's Avatar
    Join Date
    Mar 2007
    Location
    Bédoin/Nottingham
    Posts
    30,882
    Vote Rating
    85
      0  

    Default [FIXED] [2.*,3.0] layout in collapsed Panels

    When Panels (And their subclass, Fieldset) collapse, they hide the bwrap Element using display: none

    This means that any layout code performed in a Panel which is collapsed is prone to sizing errors.

    Laying out of child items in a collapsed Panel must be deferred until such time as the Panel is expanded.

    The following override is necessary:

    Code:
    Ext.override(Ext.Panel, {
        doLayout: function() {
            var a = arguments;
    
    //      If collapsed, then defer layout operation until the next time this Panel is expended.
            if (this.collapsed) {
                this.on('expand', function() {
                    this.doLayout.apply(this, a);
                }, this, {single: true});
                return;
            }
            Ext.Panel.superclass.doLayout.apply(this, a);
        }
    });

  2. #2
    Sencha User Condor's Avatar
    Join Date
    Mar 2007
    Location
    The Netherlands
    Posts
    24,246
    Vote Rating
    132
      0  

    Default

    This should not only be used in collapse/expand, but also in show/hide/render.

    Here is my related feature request.

  3. #3
    Sencha User Animal's Avatar
    Join Date
    Mar 2007
    Location
    Bédoin/Nottingham
    Posts
    30,882
    Vote Rating
    85
      0  

    Default

    Well spotted Condor. I do like your solution better because it uses the lifecycle Template Methods (onShow and afterExpand) instead of an event handler (and events can be suspended by the user).

    I'll add a vote to your thread.

  4. #4
    Ext User
    Join Date
    Jul 2007
    Location
    Florida
    Posts
    9,996
    Vote Rating
    8
      0  

    Default

    Here's some code to illustrate the problem.

    Just comment out the override to see the problem. Nige's or Condor's override fixes this particular problem.

    Also: if I run this code I get a horizontal scroller in the grid for some reason.

    Code:
    <html>
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
    <title>Fieldset - with Panel</title>
    
    <link rel="stylesheet" type="text/css" href="../../resources/css/ext-all.css" />
    <script type="text/javascript" src="../../adapter/ext/ext-base.js"></script>
    <script type="text/javascript" src="../../ext-all.js"></script>
    
    <style>
    fieldset.x-panel-collapsed {
        border-width: 1px 1px 0px 1px!important;
        border-left-color: transparent!important;
        border-right-color: transparent!important;
    }
    </style>
    
    
    
    <script type="text/javascript">
    Ext.BLANK_IMAGE_URL = "../../resources/images/default/s.gif";
    
    Ext.override(Ext.Container, {
        doLayout : function(shallow){
            if(!this.isVisible() || this.collapsed){
                this.deferLayout = this.deferLayout || !shallow;
                return;
            }
            shallow = shallow && !this.deferLayout;
            delete this.deferLayout;
            if(this.rendered && this.layout){
                this.layout.layout();
            }
            if(shallow !== false && this.items){
                var cs = this.items.items;
                for(var i = 0, len = cs.length; i < len; i++) {
                    var c  = cs[i];
                    if(c.doLayout){
                        c.doLayout();
                    }
                }
            }
        },
        onShow : function(){
            Ext.Container.superclass.onShow.apply(this, arguments);
            if(this.deferLayout !== undefined){
                this.doLayout(true);
            }
        }
    });
    Ext.override(Ext.Panel, {
        afterExpand : function(){
            this.collapsed = false;
            this.afterEffect();
            if(this.deferLayout !== undefined){
                this.doLayout(true);
            }
            this.fireEvent('expand', this);
        }
    });
    
    Ext.onReady(function(){
        
        var height = 100
        
        var panel = {
            xtype: 'panel',
            anchor: '100%',
            title: 'Panel inside a fieldset',
            frame: true,
            height: height
        };
    
    
        var getGrid = function () {
            var myData = [
                ['Fred Flintstone', 'Fred'],
                ['Barney Rubble', 'Barney']
            ];
        
            var rt = Ext.data.Record.create([
                {name: 'fullname'},
                {name: 'first'}
            ]);
            
            var ds = new Ext.data.ArrayStore({
                fields: ['fullname', 'first'],
                reader: new Ext.data.ArrayReader({id: 0}, rt)
            });
        
            ds.loadData(myData);
            
            var colModel = new Ext.grid.ColumnModel([
                {header: 'Full', id: 'expand'},
                {header: 'First'}
            ]);
            
            // create (instantiate) the Grid
            var grid = {
                xtype: 'grid',
                anchor: '100%',
                title: 'Grid inside a fieldset',
                frame: true,
                height: height,
                store: ds, //the DataStore object to use (ds: is shorthand)
                colModel: colModel, //the ColumnModel object to use (cm: is shorthand)
                autoExpandColumn: 'expand'
            };
    
            return grid;
        };
    
        var createContainer = function(config, useGrid) {
    
            var cfg = Ext.apply({
                labelWidth: 75, // label settings here cascade unless overridden
                frame:true,
                width: 700,
                //autoHeight: true,
                renderTo: document.body,
                layout:'column',       // arrange items in columns
                defaults: {            // defaults applied to items (fieldsets) in column layout
                    xtype: 'fieldset',
                    autoHeight: true,
                   // border: false,
                    collapsible: true,
                    columnWidth: 0.5,
                    //layout: 'form',
                    bodyStyle:'padding:4px'
                },
                items: [{
                    // Fieldset in Column 1
                    title: 'Fieldset 1',
                    defaults: {        // defaults applied to items (textfields) in column layout
                        anchor: '-20'  // leave room for error icon
                    },
                    defaultType: 'textfield',
                    items :[
                        {fieldLabel: 'Field 1'},
                        {fieldLabel: 'Field 2'},
                        {fieldLabel: 'Field 3'},
                        {fieldLabel: 'Field 4'}
                    ]
                },{
                    // Fieldset in Column 2 - Panel inside
                    title: 'Show Panel',
                    collapsed: config.collapseState,
                    layout:'anchor',
                    bodyStyle:'padding:4px 0px 4px 4px',
                    items : [
                        useGrid ? getGrid() : panel
                    ]
                }]
            }, config)
            
            return new Ext.FormPanel(cfg);
        }
                
        var form1 = createContainer({
            title: 'Form 1 - Panel NOT initially collapsed',
            collapseState : false  // fieldset NOT initially collapsed
        });
        
        var form2 = createContainer({
            title: 'Form 2 - Panel IS initially collapsed',
            collapseState : true  // fieldset IS initially collapsed
        });
    
        var form3 = createContainer({
            title: 'Form 3 - Grid Panel NOT initially collapsed',
            collapseState : false  // fieldset NOT initially collapsed
        }, true);
        
        var form4 = createContainer({
            title: 'Form 4 - Grid Panel IS initially collapsed',
            collapseState : true  // fieldset IS initially collapsed
        }, true);
    
    });
    </script>
    </head>
    <body></body>
    </html>

  5. #5
    Ext User
    Join Date
    Jul 2007
    Location
    Florida
    Posts
    9,996
    Vote Rating
    8
      0  

    Default

    This: http://extjs.com/forum/showthread.ph...418#post309418
    version of Condor's works fine also.

    Only the horizontal scroll of grid remains...

  6. #6
    Ext User
    Join Date
    Jul 2007
    Location
    Florida
    Posts
    9,996
    Vote Rating
    8
      0  

    Default

    One more note to core team:

    The above code includes a style override for the fieldset. This override is already part of the Ext3 base, but probably should be applied to Ext2 as well.

  7. #7
    Ext User
    Join Date
    Jul 2007
    Location
    Florida
    Posts
    9,996
    Vote Rating
    8
      0  

    Default

    I noticed the grid horizontal scroller is a separate issue from the fieldset.

    Looks like all of the grid examples in Ext 3 have a horizontal scroll issue (on FF3 and IE7 at least).

  8. #8
    Sencha User aconran's Avatar
    Join Date
    Mar 2007
    Posts
    9,488
    Vote Rating
    147
      0  

    Default

    Marking this as an open issue.
    Aaron Conran
    @aconran

  9. #9
    Sencha User Animal's Avatar
    Join Date
    Mar 2007
    Location
    Bédoin/Nottingham
    Posts
    30,882
    Vote Rating
    85
      0  

    Default

    Great.

    But use Condor's solution - it's better.

  10. #10
    Ext User
    Join Date
    Jul 2007
    Location
    Florida
    Posts
    9,996
    Vote Rating
    8
      0  

    Default

    As of this post, this was marked INFOREQ. Some code has been posted to deferLayout, etc. Not sure if that helps this thread or not. I'm going to change this to OPEN pending anyone verifying if this issue has been resolved.

Page 1 of 2 12 LastLast

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •