Проблема отрисовки сетки Safari Extjs - PullRequest
Новая
       19

Проблема отрисовки сетки Safari Extjs

1 голос
/ 16 марта 2010

Здесь - простая иллюстрация того, что я имею в виду. Работает в IE и FF, но не в Safari.

У меня есть четыре панели, которые динамически добавляются к элементу табуляции. Три из них являются сеточными панелями, а одна - панелью формы. Мне нужно сохранить пропорции или размеры сетки. Я пробовал несколько методов размещения (таблица, столбец, абсолют и т. Д.), Но пока что ничего не работает. Для таблицы все размеры в конечном итоге имеют одинаковую ширину. Похоже, моя лучшая ставка - это расположение столбцов, и они отображаются правильно в FF, IE, но не в Safari, как показано на рисунке (Здесь кажется, что столбец переходит во вторую строку, когда элемент не помещается в текущую строку). Изначально строка заголовка и несколько заголовков столбцов не отображаются.

Любые предложения.

Спасибо.

альтернативный текст http://pssnet.com/~devone/pssops3/testing/Screenshot.png

1 Ответ

1 голос
/ 16 марта 2010

Ваша лучшая ставка, вероятно, BorderLayout . Я не уверен, как вы хотите, чтобы страница выглядела так, что я не могу сказать, какая конкретная конфигурация будет лучше

РЕДАКТИРОВАТЬ : Поскольку вы используете Ext 3.1, вам действительно стоит проверить новые HBox ( sample ) и VBox ( образец ) макеты. Они чрезвычайно мощные и будут делать именно то, что вам нужно. 

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