[RC1] Grid group headers with sub-column flex

[slemmon]

Should a group header in a grid header setup span the width of the component when the sub-columns are config'd with flex 1?

I'm seeing each sub column at 39 px in IE and Chrome.

Ext.widget('viewport', {
	layout: 'fit'
	, items: [{
		xtype: 'gridpanel'
		, title: 'Title'
		, columns: [{
			text: 'Header'
			, columns: [{
				text: 'Name'
				, dataIndex: 'name'
				, flex: 1
			}, {
				text: 'Name'
				, dataIndex: 'name'
				, flex: 1
			}]
		}]
		, store: {
			fields: ['name']
			, data: [{
				name: 'Bob'
			}, {
				name: 'Carl'
			}, {
				name: 'Bob'
			}]
		}
	}]
});

[slemmon]

Here is what I get in 4.0.7 and 4.1 RC1 was 39px wide.

grid-headers.png

[scottmartin]

I believe that 4.07 sub column did not support flex.
It defaults to width provided by Extjs (200px) as show in your pic.

If you take your code and remove the flex in 4.1 you will get the same result.

When using flex, you outer container needs to have a width for flex to behave properly.

Regards,
Scott.

[slemmon]

I that case it sounds like it's not possible to have a header flex to the width of the grid if it has a grouped header since the grouping header gets its width from the sum of the child widths. Is that correct?

[evant]

Right, that's pretty much the case.

[slemmon]

Gotcha. Just wanted to make sure it wasn't something I was doing/not doing in the config somewhere.

Thx.

[mcouillard]

It would be really nice if ExtJS supported flex widths when using grouped headers. In big apps it's very common to use grouped headers. And when you have grouped headers that usually means you have many columns... which makes usage of flex even more important.

[evant]

How are you expecting this to work? What is problematic is that you need to be able to set widths at the lowest level (leaves). Would the flex be configured on the outermost or innermost coumns?

[mcouillard]

That's a good question. I see one clear use case:

I would set flex on both the group level and the child column level. The top level flex would define the first "container". Within each "group container" the children would be flex'd inside the context of their container. Example:

Current grid width = 400px
Group a: flex 3
 Child a1: flex 1
 Child a2: flex 1
 Child a3: flex 2

Group b: flex 1
 Child b1: flex 1
 Child b2: flex 2
 Child b3: flex 1

This translates into... Group a would be 300px and Group b would be 100px.

Within Group a, the children would be restricted to 300px total. This means Child a1 would be 75px, a2 75px and a3 150px. That totals 300px, the total width Group a can be because it has a flex of 3 and the grid's current width is 400px.

This means Group b would have 100px to work with. Child b1 would be 25px wide, Child b2 at 50px and Child b3 gets the last 25px. This totals 100px.

So the key is that each column level is calculated from the top down. Each column and/or group lives within the context of it's optional parent. Flex applies only to the most immediate parent, be that a group or the grid container itself.

Hopefully this assists your dev plans. Thanks for the reply.