Thank you for reporting this bug. We will make it our priority to review this report.
  1. #1
    Ext User
    Join Date
    Nov 2009
    Posts
    2
    Vote Rating
    0
    warbaby is on a distinguished road

      0  

    Question [UNKNOWN][3.0.0] BoxLayout bugs when align is 'middle' and flex is set

    [UNKNOWN][3.0.0] BoxLayout bugs when align is 'middle' and flex is set


    This bug occurs in IE6 & FireFox3.

    When a boxlayout panel is not shown at first, for example, on the 2nd card of a cardlayout, the element with flex attribute will not align in middle. It is worse in FireFox, the height of TextField will set to 0. See the picture.

    Code:
            var cardNav = function(incr){
                var l = Ext.getCmp('card-wizard-panel').getLayout();
                var i = l.activeItem.id.split('card-')[1];
                var next = parseInt(i) + incr;
                l.setActiveItem(next);
                Ext.getCmp('card-prev').setDisabled(next==0);
                Ext.getCmp('card-next').setDisabled(next==2);
            };
    
            var cardWizard = {
                id:'card-wizard-panel',
                title: 'Card Layout (Wizard)',
                layout:'card',
                activeItem: 0,
                bodyStyle: 'padding:15px',
                defaults: {border:false},
                bbar: ['->', {
                    id: 'card-prev',
                    text: '« Previous',
                    handler: cardNav.createDelegate(this, [-1]),
                    disabled: true
                },{
                    id: 'card-next',
                    text: 'Next »',
                    handler: cardNav.createDelegate(this, [1])
                }],
                items: [{
                    id: 'card-0',
                    html: '<h1>Welcome to the Demo Wizard!</h1><p>Step 1 of 3</p><p>Please click the "Next" button to continue...</p>'
                },{
                    id: 'card-1',
                        layout:"hbox",
                        layoutConfig: {
                            padding:'5',
                            align:'middle',
                            pack:'start'
                        },
                        defaults:{margins:'0 5 0 0'},
                        items:[{
                            xtype:'button',
                            text: 'Button 1'
                        },{
                            flex:1,
                            xtype:'textfield',
                            //height:"50",
                            text: 'Button 2'
                        },{
                            xtype:'button',
                            text: 'Button 3'
                        },{
                            xtype:'button',
                            text: 'Button 4'
                        }]
                },{
                    id: 'card-2',
                    html: '<h1>Welcome to the Demo Wizard!</h1><p>Step 3 of 3</p><p>OK</p>'
                }]
            };
    
            Ext.onReady(function() {
                new Ext.Panel({
                    layout:"fit",
                    height:300,
                    width:300,
                    applyTo:Ext.getBody(),
                    items:[
                        cardWizard
                    ]
                });
            });
    I read the source code BoxLayout.js, wondering why there is a set-then-restore,
    Code:
                    if(isRestore){
                        restore.push(c.getHeight());
                    } 
                    c.setSize(cw, availableHeight);
    I try to using the following code, and it seems ok.
    Code:
                    
                    if(isRestore){
                        //restore.push(c.getHeight());
                        c.setWidth(cw);
                    } else {
                        c.setSize(cw, availableHeight);
                    }
    Attached Images
    Last edited by warbaby; 20 Nov 2009 at 2:29 AM. Reason: poor english sorry

  2. #2
    Ext User
    Join Date
    Nov 2009
    Posts
    2
    Vote Rating
    0
    warbaby is on a distinguished road

      0  

    Default


    it shows the same for 3.0.0 and 3.0.3