Safari Extjs grid rendering issue

Question

Hello:

Here is a simple illustration of what I mean. It works in IE, and FF, but not in Safari.

I have four panels which are dynamically added to a tabpanel item. Three are grid panels, and one is a form panel. I need to preserve the grids proportions or sizes. I tried several layout methods (table, column, absolute etc), and nothing seems work so far. For table layout, all sizes end up being the same width. It seems my best bet is column layout, and they seem to render properly in FF, IE, but not in Safari as shown in the image. (Here it seems that column goes to second row, when the item does not fit into the current row). Initially, the title bar, and several of the column headings does not show.

Any suggestions.

Thank you.

Answer 1

Your best bet is probably a BorderLayout. I'm not sure how you want the page to look so I can't tell what specific configuration would be best

EDIT: Since you are using Ext 3.1, you really should check out the new HBox (sample) and VBox (sample) layouts. They are extremely powerful and will do exactly what you need.

Ext.onReady(function() {
    var panel = new Ext.Panel({
        id:'main-panel',
        baseCls:'x-plain',
        renderTo: Ext.getBody(),
        width: 600,
        height: 400,
        layout: {
            type: 'vbox',
            align:'stretch'
        },
        defaults: {
            xtype: 'panel',
            baseCls:'x-plain',
            flex: 1,
            layout: {
                type: 'hbox',
                align: 'stretch'
            }
        },
        items: [{
            defaults: {
                xtype: 'panel',
                frame: true
            },
            items: [{
                title: 'Item 1',
                flex: 1
            },{
                title: 'Item 2',
                flex: 2
            }]
        },{
            defaults: {
                xtype: 'panel',
                frame: true
            },
            items: [{
                title: 'Item 3',
                html: 'sssssssssssss',
                flex: 2
            },{
                title: 'Item 4',
                flex: 1
            }]
        }]
    });
});