如何使ExtJS 4.2.1空网格尊重flex布局值？

解决方案：

为了更好地显示实际代码所面临的问题，下面的代码可以工作

我实现这一点的关键是为border布局提供拉伸的“align”配置，并确保必要时容器的“flex”配置为1

Ext.define('MyGrid', {
    extend: 'Ext.grid.Panel',
    alias: 'widget.myGrid',
    columns: [{text: 'First Name'}],
    store: Ext.create('Ext.data.Store', {fields: ['fname']})
});


Ext.define('MyView', {
    extend: 'Ext.container.Container',
    alias: 'widget.myView',
    layout: {
        type: 'vbox',
        align: 'stretch'
    },
    items: [{
        xtype: 'myGrid',
        title: 'My First Grid',
        flex: 7,
        bodyStyle: {
            backgroundColor: '#ff0000'
        }
    }, {
        xtype: 'myGrid',
        title: 'My Second Grid',
        flex: 3,
        bodyStyle: {
            backgroundColor: '#0000ff'
        }
    }]
});

Ext.onReady(function() {
    Ext.create('Ext.container.Viewport', {
        renderTo: Ext.getBody(),
        layout: 'fit',
        items: [{
            layout: {
                type: 'border',
                align: 'stretch'
            },
            items: [{
                xtype: 'container',
                region: 'center',
                itemId: 'gridsContainer',
                layout: {
                    type: 'vbox',
                    align: 'stretch'
                },
                items: [{
                    xtype: 'myView',
                    flex: 1
                }]
            }]
        }]
    });
});

---

原职：

在以下代码中，如果更换：

Ext.create('Ext.container.Container'

与：

网格正确地占据了可用面积的70%/30%

但是当代码有容器而没有视口时，网格非常小

当然，我真正的代码在一个更大的应用程序中，所以我不能在那个时候使用视口，我必须使用容器

Ext.define('MyGrid', {
    extend: 'Ext.grid.Panel',
    alias: 'widget.myGrid',
    columns: [{
        text: 'First Name',
        dataIndex: 'fname'
    }],
    store: Ext.create('Ext.data.Store', {
        fields: ['fname']
    })
});

Ext.onReady(function() {
    Ext.create('Ext.container.Container', {
        renderTo: Ext.getBody(),
        layout: 'fit',
        items: [{
            xtype: 'container',
            layout: {
                type: 'vbox',
                align: 'stretch'
            },
            defaults: {
                autoScroll: true,
                bodyPadding: 0
            },
            items: [{
                xtype: 'myGrid',
                itemId: 'grid1',
                flex: 7
            }, {
                xtype: 'splitter'
            },{
                xtype: 'tabpanel',
                itemId: 'mypanel',
                width: 400,
                height: 400,
                renderTo: document.body,
                flex: 3,
                scroll: true,
                resizable: false,
                activeTab: 0,
                items: [{
                    xtype: 'myGrid',
                    itemId: 'tabgrid1',
                    title: 'My Grid Tab One'
                },{
                    xtype: 'myGrid',
                    itemId: 'tabgrid2',
                    title: 'My Grid Tab Two'
                }],
                tabBar:{
                    //plain:true,
                    items:[{
                        xtype: 'tbfill'
                    },{
                        text:'????',
                        xtype:'image',
                        src: 'panelCollapseBtn.png',
                        closable: false,
                        listeners:{
                            'afterrender':function (comp) {
                                comp.getEl().on('click', function (el) {
                                    //  alert(comp.up('#mypanel').getCollapsed());
                                    var panel =  comp.up('#mypanel');
                                    var isCollapsed = panel.getCollapsed();
                                    //alert('is collapsed: ' + isCollapsed);
                                    panel.header = !isCollapsed;
                                    //panel.collapsible =isCollapsed;
                                    comp.setSrc(isCollapsed?"panelCollapseBtn.png":"panelExpandBtn.png");
                                    panel.toggleCollapse();

                                }, this);
                                comp.getEl().on('mouseover', function (el) {
                                    el.target.style.cursor = "pointer";
                                }, this);
                            }
                        }
                    }]
                }
            }]
        }]
    });
});

---

如果没有viewport，高度取决于最外层容器的高度，而在您的情况下，高度是不设置的。那么，有没有办法在不明确设置高度的情况下实现这一点？您写道，这是一个大型应用程序，您对该容器的父面板使用什么布局？我们正在构建一个动态大小的应用程序，因为用户可能会调整浏览器窗口的大小，有些可能在具有各种较小屏幕分辨率的笔记本电脑上。通常我们只使用容器。那么我必须为父级设置显式大小吗？我可以在访问document.body.clientHeight的地方做些什么吗？还是有更好的解决方案？使用视口的问题在哪里？

Ext.define('MyGrid', {
    extend: 'Ext.grid.Panel',
    alias: 'widget.myGrid',
    columns: [{
        text: 'First Name',
        dataIndex: 'fname'
    }],
    store: Ext.create('Ext.data.Store', {
        fields: ['fname']
    })
});

Ext.onReady(function() {
    Ext.create('Ext.container.Container', {
        renderTo: Ext.getBody(),
        layout: 'fit',
        items: [{
            xtype: 'container',
            layout: {
                type: 'vbox',
                align: 'stretch'
            },
            defaults: {
                autoScroll: true,
                bodyPadding: 0
            },
            items: [{
                xtype: 'myGrid',
                itemId: 'grid1',
                flex: 7
            }, {
                xtype: 'splitter'
            },{
                xtype: 'tabpanel',
                itemId: 'mypanel',
                width: 400,
                height: 400,
                renderTo: document.body,
                flex: 3,
                scroll: true,
                resizable: false,
                activeTab: 0,
                items: [{
                    xtype: 'myGrid',
                    itemId: 'tabgrid1',
                    title: 'My Grid Tab One'
                },{
                    xtype: 'myGrid',
                    itemId: 'tabgrid2',
                    title: 'My Grid Tab Two'
                }],
                tabBar:{
                    //plain:true,
                    items:[{
                        xtype: 'tbfill'
                    },{
                        text:'????',
                        xtype:'image',
                        src: 'panelCollapseBtn.png',
                        closable: false,
                        listeners:{
                            'afterrender':function (comp) {
                                comp.getEl().on('click', function (el) {
                                    //  alert(comp.up('#mypanel').getCollapsed());
                                    var panel =  comp.up('#mypanel');
                                    var isCollapsed = panel.getCollapsed();
                                    //alert('is collapsed: ' + isCollapsed);
                                    panel.header = !isCollapsed;
                                    //panel.collapsible =isCollapsed;
                                    comp.setSrc(isCollapsed?"panelCollapseBtn.png":"panelExpandBtn.png");
                                    panel.toggleCollapse();

                                }, this);
                                comp.getEl().on('mouseover', function (el) {
                                    el.target.style.cursor = "pointer";
                                }, this);
                            }
                        }
                    }]
                }
            }]
        }]
    });
});