Extjs网格-根据内容适合高度吗？

问题描述

如何设置网格的高度以适合其内容？

在这里看到这个小提琴，第一个网格有一个height: 200，没关系。第二个没有高度，我想使高度适合网格内容。显示“网格标题”和“列标题”，但不显示网格行。

https://fiddle.sencha.com/#view/editor&fiddle/385b

解决方法

您可以在第二个网格中使用layout：'vbox'和flex：1。像这样：

Ext.application({
    name: 'Fiddle',launch: function () {
        var store = Ext.create('Ext.data.Store',{
            fields: ['name','email','phone'],data: [{
                'name': 'Lisa',"email": "[e-mail]","phone": "555-111-1224"
            },{
                'name': 'Bart',"email": "[e-mail]","phone": "555-222-1234"
            },{
                'name': 'Homer',"email": "[e-mail]","phone": "555-222-1244"
            },{
                'name': 'Marge',"email": "[e-mail]","phone": "555-222-1254"
            }]
        });

        Ext.create('Ext.Container',{
            fullscreen: true,layout: 'vbox',defaults: {
                style: 'border: 1px solid grey;' // To see the borders
            },items: [{
                title: 'Simpsons - height: 200',xtype: 'grid',height: 200,store: store,columns: [{
                    text: 'Name',dataIndex: 'name',width: 200
                },{
                    text: 'Email',dataIndex: 'email',width: 250
                },{
                    text: 'Phone',dataIndex: 'phone',width: 120
                }],},{
                title: 'Simpsons - autofit?',flex: 1,{
                xtype: 'container',html: "Some other content"
            }]
        })
    }
});

,

解决方案是指定以下2种之一：

网格的
• maxHeight属性

OR

• 将infinite设置为false。

    //maxHeight: 800,infinite: false,

https://fiddle.sencha.com/#fiddle/386n