Safari Extjs 网格渲染问题

Question

Here 是我的意思的一个简单说明。它适用于 IE 和 FF，但不适用于 Safari。

我有四个面板，它们被动态添加到一个选项卡面板项中。三个是网格面板，一个是表单面板。我需要保留网格的比例或大小。我尝试了几种布局方法（表格、列、绝对等），但到目前为止似乎没有任何效果。对于表格布局，所有尺寸最终都具有相同的宽度。看来我最好的选择是列布局，它们似乎在 FF、IE 中正确呈现，但在 Safari 中却没有，如图所示。 （在这里，当项目不适合当前行时，该列似乎进入第二行）。最初，标题栏和几个列标题不显示。

任何建议。

谢谢。

alt text http://pssnet.com/~devone/pssops3/testing/Screenshot.png

Answer 1

您最好的选择可能是BorderLayout。我不确定您希望该页面的外观如何，因此我无法确定最佳配置是什么

编辑：由于您使用的是 Ext 3.1，因此您确实应该查看新的 HBox (sample) 和 VBox (sample) 布局。它们非常强大，可以满足您的需求。

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
            }]
        }]
    });
});