Question

我有这种类型的结构（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]
    }]
});

在工具栏中，我有两个按钮，COURSES和EXAMS。我使用这些按钮来显示/隐藏两个网格中的一个，这样一次只能看到一个。我使用的按钮的代码是这样的：

{
    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();
    }
}

问题是：如何让显示的网格填满整个屏幕（特别是在高度？）。我想我必须在按钮的处理程序或我的网格的监听器中放置一些东西，但我不知道该放什么。任何提示？

Answer 1

适合布局仅支持一个元素，否则它需要工作。你需要把它全部包起来。

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

Answer 2

'fit'布局仅用于放置单个面板。使用“卡”布局代替在两个或多个共享相同空间的面板之间切换：

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

此外，假设示例中的工具栏变量包含真实的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
        ]
    }
});

也就是说，如果由于其他原因仍然需要视口上的边框布局，那么卡片面板，工具栏和所有内容都可以停放在中心区域，如答案顶部所示。

ExtJS：网格高度100％

2 个答案: