Как получить высоту Ext.Panel для заполнения родительской области - PullRequest
Новая
       12

Как получить высоту Ext.Panel для заполнения родительской области

4 голосов
/ 02 декабря 2010

У меня есть следующие Ext.TabPanel: 

var modules_info_panel = new Ext.TabPanel({
    activeTab: 0,
    defaults:{autoScroll:true},
    //layout: 'fit', // makes component disappear
    viewConfig: {
        forceFit:  true //has no effect
    },
    // height: auto, //error "auto isn't recognized"
    items:[{
            title: 'Section 1',
            html: 'test'
        },{
            title: 'Section 2',
            html: 'test'
        },{
            title: 'Section 3',
            html: 'test'
        }]
});

, который выглядит так:

alt text

Как я могу получить линию в середине, чтобы она продолжалась вниз, чтобы она заполняла родительское пространство по вертикали?

Вот как TabPanel загружается в regionContent: 

regionContent = new Ext.Panel({
    id: 'contentArea',
    region: 'center',
    autoScroll: true
});


function clearExtjsComponent(cmp) {
    var f;
    while(f = cmp.items.first()){
        cmp.remove(f, true);
    }
}

function replaceComponentContent(cmpParent, cmpContent) {
    clearExtjsComponent(cmpParent);
    cmpParent.add(cmpContent);
    cmpParent.doLayout();
}

replaceComponentContent(regionContent, modules_info_panel);

Я вижу, что высота для этого элемента в dom является абсолютной (19px), где это устанавливается?

alt text

Добавление

McStretch, я попробовал вашу идею, поместив layout: 'fit' в сами вкладки, но строка все еще находится в том же месте: 

var modules_info_panel = new Ext.TabPanel({
    activeTab: 0,
    defaults:{autoScroll:true},
    items:[{
            title: 'Section 1',
            layout: 'fit',
            html: 'test'
        },{
            title: 'Section 2',
            layout: 'fit',
            html: 'test'
        },{
            title: 'Section 3',
            layout: 'fit',
            html: 'test'
        }]
});

Ответы [ 2 ]

2 голосов
/ 02 декабря 2010

Похоже, что вы находитесь внутри макета границы, как вы определяете панель, которая устанавливает макет границы?Центральная область макета границы обычно должна заполнять пространство, не оставленное другими регионами.Я сделал пример, который выглядит как ваш макет: http://jsbin.com/ikazo3/6/edit

Из документации Граница :

  • Любой контейнер, использующий BorderLayout, должендочерний элемент с регионом: 'центр'.Дочерний элемент в центральной области всегда будет изменен, чтобы заполнить оставшееся пространство, не используемое другими областями в макете.
  • Для любых дочерних элементов с областью запад или восток должна быть определена ширина (целое число, представляющееколичество пикселей, которое должен занимать регион).
  • Любые дочерние элементы с областью севера или юга должны иметь определенную высоту.
  • Области BorderLayout фиксируются во время рендеринга ипосле этого его дочерние компоненты не могут быть удалены или добавлены.Чтобы добавить / удалить Компоненты в BorderLayout, оберните их дополнительным Контейнером, который напрямую управляется BorderLayout.Если область должна быть разборной, Контейнер, используемый непосредственно менеджером BorderLayout, должен быть Panel.В следующем примере контейнер (внешняя панель) добавляется в западную область:
2 голосов
/ 02 декабря 2010

Исправлено:

Извините, Эдвард, я ошибся, вы хотите layout: 'fit' в вашей regionContent панели. Обновленные изменения кода приведены ниже.

Ваша первоначальная идея использования layout: 'fit' верна, но у вас это не в том месте. Вы хотите следующее: 

var regionContent = new Ext.Panel({
   region     : 'center',
   autoScroll : true,
   layout     : 'fit', // added this line
   items      : []
});
...