PDA

View Full Version : Grid columns not filling up screen



PT_C
19 Jul 2018, 8:24 AM
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


(https://fiddle.sencha.com/#view/editor&fiddle/238v)
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
}]
}]
(https://fiddle.sencha.com/#view/editor&fiddle/238v)