1. #1
    Sencha User
    Join Date
    May 2010
    Posts
    172
    Vote Rating
    1
    Dmoney is on a distinguished road

      0  

    Default 4.1 b1 & b2 form overflow breaks resizing in firefox.

    4.1 b1 & b2 form overflow breaks resizing in firefox.


    I have a border layout and the center region is a form panel. the region is set to autoScroll:true. If the form is bigger than the region when the application loads than grid panels in other regions don't display properly and the viewport will not resize with the browser window. If I have the browser window large enough to begin with that the entire form fits. resizing the browser works fine and everything displays properly.

    Anyone else seeing this? Am I doing something wrong or is this a bug?

    It works as expected in chrome. didn't try IE.

  2. #2
    Sencha User
    Join Date
    May 2010
    Posts
    172
    Vote Rating
    1
    Dmoney is on a distinguished road

      0  

    Default


    The layout also works fine with autoscroll set to false. of course then half my form is hidden. But it appears that autoscroll is what is causing the problem.

  3. #3
    Sencha User
    Join Date
    May 2010
    Posts
    172
    Vote Rating
    1
    Dmoney is on a distinguished road

      0  

    Default


    Ok I looked at this again and I'm still having the layout issues I've narrowed it down a little further though.
    it seems to have something to do with adding buttons to a form that has autoScroll true. See the example below.

    *In firefox Size your browser window so that the form does not all fit. Then refresh the app. now try dragging the browser window bigger.

    even worse than the resizing not working if there is a grid or a tree in another region they dont get rendered or actually I think they get rendered but are not visible.

    If you remove the buttons from the form everything works.

    Code:
    Ext.require(['*']);
    Ext.onReady(function() {
       
    
    
    
    
    var formPanel = Ext.create('Ext.form.Panel', {
            frame: true,
            title: 'Form Fields',
            autoScroll:true,
            bodyPadding: 5,
    region: 'center',
            fieldDefaults: {
                labelAlign: 'left',
                labelWidth: 90,
                anchor: '100%'
            },
    
    
            items: [{
                xtype: 'textfield',
                name: 'textfield1',
                fieldLabel: 'Text field',
                value: 'Text field value'
            }, {
                xtype: 'textfield',
                name: 'password1',
                inputType: 'password',
                fieldLabel: 'Password field'
            }, {
                xtype: 'filefield',
                name: 'file1',
                fieldLabel: 'File upload'
            }, {
                xtype: 'textareafield',
                name: 'textarea1',
                fieldLabel: 'TextArea',
                value: 'Textarea value'
            }, {
                xtype: 'displayfield',
                name: 'displayfield1',
                fieldLabel: 'Display field',
                value: 'Display field <span style="color:green;">value</span>'
            }, {
                xtype: 'numberfield',
                name: 'numberfield1',
                fieldLabel: 'Number field',
                value: 5,
                minValue: 0,
                maxValue: 50
            }, {
                xtype: 'checkboxfield',
                name: 'checkbox1',
                fieldLabel: 'Checkbox',
                boxLabel: 'box label'
            }, {
                xtype: 'radiofield',
                name: 'radio1',
                value: 'radiovalue1',
                fieldLabel: 'Radio buttons',
                boxLabel: 'radio 1'
            }, {
                xtype: 'radiofield',
                name: 'radio1',
                value: 'radiovalue2',
                fieldLabel: '',
                labelSeparator: '',
                hideEmptyLabel: false,
                boxLabel: 'radio 2'
            }, {
                xtype: 'datefield',
                name: 'date1',
                fieldLabel: 'Date Field'
            }, {
                xtype: 'timefield',
                name: 'time1',
                fieldLabel: 'Time Field',
                minValue: '1:30 AM',
                maxValue: '9:15 PM'
            }],
    
    
             buttons: [{
                text: 'Save'
            },{
                text: 'Cancel'
            }]
        });
    
    
    
    
    
    
        var viewport = Ext.create('Ext.Viewport', {
            layout: {
                type: 'border',
                padding: 5
            },
            defaults: {
                split: true
            },
            items: [
                formPanel
              ]
                
                });
    
    
            }
        );
    Screen Shot 2012-02-17 at 4.49.03 PM.jpg


    Screen Shot 2012-02-17 at 4.49.32 PM.jpg

  4. #4
    Sencha User
    Join Date
    May 2010
    Posts
    172
    Vote Rating
    1
    Dmoney is on a distinguished road

      0  

    Default


    setting a width to the buttons fixes the problem.