PDA

View Full Version : Grid column relative sizes



kncisko
27 May 2014, 3:07 AM
Hello everyone,

I'm using border layout for my application


Ext.create('Ext.container.Viewport', {
layout: 'border',

In the south region, i have 3 grid panels evenly distributed along the x axis:




...
{
region: 'south',
layout: 'hbox',
collapsible: true,
split: true,
height: 250,
border: 0,
componentCls: 'southRegion',
items:
[
{
xtype: 'listRows',
flex: 1,
height: '100%',
},
{
xtype: 'listColumns',
flex: 1,
height: '100%'
},
{
xtype: 'listFilters',
flex: 1,
height: '100%'
}
]
}
...


Each of the grids (listRows, listColumns, listFilters) have 5 columns:




Ext.define('QD.view.lists.ListRows', {
extend: 'Ext.grid.Panel',
alias: 'widget.listRows',
border: 0,
header: false,
hideHeaders: true,
store: 'RowsListStore',
id: 'lvRows',
allowCopy: false,
axisName: 'rows',
columnLines: true,
...
...
...
columns: [
{
flex: 1,
align: 'center',
sortable: false,
hideable: false,
},
{
flex: 1,
align: 'center',
xtype: 'checkcolumn',
sortable: false,
hideable: false,
dataIndex: 'included',
id: 'checkColumn'
},
{
flex: 1,
align: 'center',
sortable: false,
hideable: false,
renderer: renderIcon,
dataIndex: 'icon',
},
{
flex: 10,
align: 'left',
sortable: false,
hideable: false,
dataIndex: 'text',
},
{
flex: 1,
align: 'center',
sortable: false,
hideable: false,
xtype: 'actioncolumn',
id: 'deleteRowBtn',
items: [
{
icon: 'Content/icons/svn_deleted.png',
tooltip: 'Remove from list',
}
]
}
]

When viewed on a large monitor (1680x1050), the columns are rendered with correct relative widths:

49131
But when viewed on a smaller monitor (1024 x 768), despite the fact that no column has fixed width in pixels, the width of all columns remain the same and horizontal scroll bars appear.

49132

I would like for those 5 columns to fill the entire grid panel with their relative sizes. I understood from other posts and from documentation that it should be achieved using flex configuration, but that doesn't seem to work for me. What am I doing wrong?

I'm using Extjs 4.2.1

Gary Schlosberg
30 May 2014, 6:12 PM
I don't see anything wrong, but I'm thinking that columns set to flex 1 can't get narrow enough for the wide column (flex: 10) to be ten times as big. Put another way, it looks like the content in the skinny columns forces a minimum width, 14 of which cannot fit in the width you are viewing.

kncisko
3 Jun 2014, 12:32 AM
Thanks for the reply. I was experimenting with different flex and width values and the result is far from being perfect, but at least i don't have scroll bars anymore:


columns: [
{
width: 30,
align: 'center',
sortable: false,
hideable: false,
//componentCls: 'lvUtilityCol',
},
{
flex: 2,
align: 'center',
xtype: 'checkcolumn',
sortable: false,
hideable: false,
dataIndex: 'included',
id: 'checkColumn'
},
{
flex: 1,
align: 'center',
sortable: false,
hideable: false,
renderer: renderIcon,
dataIndex: 'icon',
},
{
flex: 7,
align: 'left',
sortable: false,
hideable: false,
dataIndex: 'text',
},
{
flex: 1,
align: 'center',
sortable: false,
hideable: false,
xtype: 'actioncolumn',
id: 'deleteRowBtn',
items: [
{
icon: 'Content/icons/svn_deleted.png',
tooltip: 'Remove from list',
}
]
}
]


49194
49195

On a smaller screen, relative widths are now more or less correct, but on the larger one the checkbox column is twice as wide as it should be, but if i make it smaller, scroll bars appear on smaller screen. That's a bit counter-intuitive (if you make one column smaller, the grid gets bigger).