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

Question

解决方案：

为了更好地显示我们的实际代码所面临的问题，以下代码可以正常运行。

让我开始工作的关键是给边框布局一个'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'

使用：

Ext.create('Ext.container.Viewport'

网格正确占据可用区域的70％/ 30％。

但是当代码具有Container而不是Viewport时，网格非常小。

当然我的真实代码是在一个更大的应用程序中，所以我不能在那时使用Viewport，我必须使用容器。

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