ExtJS: высота сетки 100% - PullRequest
Новая
       11

ExtJS: высота сетки 100%

4 голосов
/ 17 мая 2011

У меня есть структура этого типа (Ext 3.3.1): 

var page = new Ext.Viewport({
    layout: 'border',
    anchor:'100% 100%',
    renderTo: Ext.getBody(),
    items: [{
        region: 'north',
        height:'auto',
        items: [toolbar]
    },{
        region: 'center',
        layout:'fit',
        items: [gridCourses,gridExams]
    }]
});

На панели инструментов у меня есть две кнопки, КУРСЫ и ЭКЗАМЕНЫ.Я использую эти кнопки, чтобы показать / скрыть одну из двух сеток, так что только одна видна одновременно.Код кнопок, которые я использую, выглядит примерно так: 

{
    text: 'Courses',
    iconCls: 'show-courses',
    handler: function(){
        gridCourses.store.reload();
        gridCourses.show();
        gridExams.hide();
    }
},{
    text: 'Exams',
    iconCls: 'show-exams',
    handler: function(){
        gridExams.store.reload();
        gridCourses.hide();
        gridExams.show();
    }
}

Вопрос в том, как отобразить сетку, чтобы заполнить весь экран (особенно по высоте?).Я думаю, что я должен положить что-то в обработчик кнопок или слушатель к моим сеткам, но я не знаю, что поставить.Есть намеки?

Ответы [ 2 ]

3 голосов
/ 17 мая 2011

Расположение «подходит» только для размещения одной панели.Вместо этого используйте раскладку «карта» для переключения между двумя или более панелями, которые должны находиться в одном и том же пространстве: 

{
    region: 'center',
    layout: 'card',
    // 0 here means the zeroth element of the items array.
    activeItem: 0,
    items: [
        gridCourses,
        gridExams
    ]
}

Тогда ваши обработчики кнопок станут: 

{
    text: 'Courses',
    iconCls: 'show-courses',
    handler: function() {
        gridCourses.getStore().reload();
        gridCourses.ownerCt.getLayout().setActiveItem(gridCourses);
    }
},
{
    text: 'Exams',
    iconCls: 'show-exams',
    handler: function() {
        gridExams.getStore().reload();
        gridExams.ownerCt.getLayout().setActiveItem(gridExams);
    }
}

Кроме того, предполагая, что панель инструментов * переменная 1008 * в вашем примере содержит настоящий экземпляр Ext.Toolbar, ваш макет в целом можно улучшить с помощью другого определения области просмотра: 

new Ext.Viewport({
    layout: 'fit',
    items: {
        xtype: 'panel',
        layout: 'card',
        activeItem: 0,
        tbar: [
            {
                text: 'Courses',
                iconCls: 'show-courses',
                handler: function() {
                    gridCourses.getStore().reload();
                    gridCourses.ownerCt.getLayout().setActiveItem(gridCourses);
                }
            },
            {
                text: 'Exams',
                iconCls: 'show-exams',
                handler: function() {
                    gridExams.getStore().reload();
                    gridExams.ownerCt.getLayout().setActiveItem(gridExams);
                }
            }
        ],
        items: [
            gridCourses,
            gridExams
        ]
    }
});

Тем не менее, если вам все еще нуженмакет границы на вашем окне просмотра по другим причинам, кроме панели карты, панели инструментов и всего, может быть припаркован в центральной области, как показано в верхней части ответа.

3 голосов
/ 17 мая 2011

Подгоночный макет поддерживает только один элемент, в противном случае он хочет работать. Вам нужно будет все это завернуть. 

var page = new Ext.Viewport({
    layout: 'border',
    // anchor:'100% 100%', <- I don't think you need this, cause the Viewport is alsways bound to the fullscreen
    // renderTo: Ext.getBody(), <- Same here. The viewport is alsways rendered to the body
    items: [{
        region: 'north',
        height:'auto',
        items: [toolbar]
    },{
        region: 'center',
        layout:'fit',
        items: [
            {
                xtype: 'container',
                items: [
                    {
                        xtype: 'container'
                        layout: 'fit',
                        items: [Grid1]
                    },
                    {
                        xtype: 'container'
                        layout: 'fit',
                        items: [Grid1]
                    }
                ]
            }
        ]
    }]
});
...