Extjs Grid - fit height based on content?

0
votes

How can I set the height of a grid to fit it's content?

See this fiddle here, the first grid has a height: 200, that is ok. The second has no height and I would like to make the height to fit the grid content. Grid Header and Column headers are displayed, but the grid rows not.

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

2
extjs

2 Answers

0
votes

enter image description here You can use layout: 'vbox' and flex: 1 in the second grid. Something like this:

Ext.application({
    name: 'Fiddle',

    launch: function () {
        var store = Ext.create('Ext.data.Store', {
            fields: ['name', 'email', 'phone'],
            data: [{
                'name': 'Lisa',
                "email": "[email protected]",
                "phone": "555-111-1224"
            }, {
                'name': 'Bart',
                "email": "[email protected]",
                "phone": "555-222-1234"
            }, {
                'name': 'Homer',
                "email": "[email protected]",
                "phone": "555-222-1244"
            }, {
                'name': 'Marge',
                "email": "[email protected]",
                "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?',
                xtype: 'grid',
                flex: 1,
                store: store,
                columns: [{
                    text: 'Name',
                    dataIndex: 'name',
                    width: 200
                }, {
                    text: 'Email',
                    dataIndex: 'email',
                    width: 250
                }, {
                    text: 'Phone',
                    dataIndex: 'phone',
                    width: 120
                }],
            }, {
                xtype: 'container',
                html: "Some other content"
            }]
        })
    }
});
0
votes

The solution is to specify one of these 2:

  • maxHeight property for the grid

OR

  • set infinite to false.
    //maxHeight: 800,
    infinite: false,

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