ExtJS4-网格列未填满屏幕

Question

我有一个多标题网格，在加载时没有填充屏幕。仅有几列具有设置的宽度，而其余为flex。

Header 1应该占屏幕的三分之一，而Header 2应该扩展其余的屏幕。有没有更好的方法来动态调整网格大小？

fiddle

列

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