I have a multi-header grid that is not filling up the screen on load. Only a few of the columns have set widths but the rest are flex.
Header 1 should take up about a third of the screen while Header 2 should expand the rest. Is there a better way to dynamically size the grid?


https://fiddle.sencha.com/#view/editor&fiddle/238v

Code:
columns: [Ext.create('Ext.grid.RowNumberer'), {
            header: 'Header 1',
            flex: 1,
            columns: [{
                header: 'Asset Name',
                //maxWidth: 200,
                menuDisabled: false,
                flex: 1,
                sortable: true
            }, {
                header: 'State',
                menuDisabled: false,
                sortable: true
                    //width: 150
            }]
        }, {
            header: 'Header 2',
            flex: 1,
            columns: [{
                header: 'Application',
                //width: 250,
                flex: 2,
                menuDisabled: false,
                sortable: true
            }, {
                header: 'Account name',
                //width: 150,
                flex: 1,
                menuDisabled: false,
                sortable: true
            }, {
                header: 'Type',
                //width: 75,
                menuDisabled: false,
                sortable: true,
                flex: 1
            }, {
                header: 'Status',
                menuDisabled: false,
                sortable: true,
                    //width: 100,
                flex: 1
            }, {
                header: 'Access',
                menuDisabled: false,
                sortable: true,
                    //width: 150,
                flex: 1
            }, {
                header: 'Category',
                menuDisabled: false,
                sortable: true,
                    //width: 100,
                flex: 1
            }, {
                header: 'Classification',
                menuDisabled: false,
                sortable: true,
                //width: 150,
                // flex: 1
            }, {
                header: 'Test',
                menuDisabled: false,
                sortable: true,
                //width: 50
                flex: 1
            }, {
                header: 'Owner',
                menuDisabled: false,
                sortable: true,
                //width: 150,
                flex: 1
            }, {
                header: 'Progress',
                menuDisabled: false,
                sortable: true,
                //width: 150,
                flex: 1
            }]
        }]