1. #1
    Sencha - Support Team slemmon's Avatar
    Join Date
    Mar 2009
    Location
    Boise, ID
    Posts
    5,572
    Vote Rating
    203
    slemmon has much to be proud of slemmon has much to be proud of slemmon has much to be proud of slemmon has much to be proud of slemmon has much to be proud of slemmon has much to be proud of slemmon has much to be proud of slemmon has much to be proud of

      1  

    Default [RC1] Grid group headers with sub-column flex

    [RC1] Grid group headers with sub-column flex


    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.

    Code:
    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'
    			}]
    		}
    	}]
    });

  2. #2
    Sencha - Support Team slemmon's Avatar
    Join Date
    Mar 2009
    Location
    Boise, ID
    Posts
    5,572
    Vote Rating
    203
    slemmon has much to be proud of slemmon has much to be proud of slemmon has much to be proud of slemmon has much to be proud of slemmon has much to be proud of slemmon has much to be proud of slemmon has much to be proud of slemmon has much to be proud of

      0  

    Default


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

    grid-headers.png

  3. #3
    Sencha - Support Team scottmartin's Avatar
    Join Date
    Jul 2010
    Location
    Houston, Tx
    Posts
    9,111
    Vote Rating
    470
    scottmartin has a brilliant future scottmartin has a brilliant future scottmartin has a brilliant future scottmartin has a brilliant future scottmartin has a brilliant future scottmartin has a brilliant future scottmartin has a brilliant future scottmartin has a brilliant future scottmartin has a brilliant future scottmartin has a brilliant future scottmartin has a brilliant future

      0  

    Default


    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.

  4. #4
    Sencha - Support Team slemmon's Avatar
    Join Date
    Mar 2009
    Location
    Boise, ID
    Posts
    5,572
    Vote Rating
    203
    slemmon has much to be proud of slemmon has much to be proud of slemmon has much to be proud of slemmon has much to be proud of slemmon has much to be proud of slemmon has much to be proud of slemmon has much to be proud of slemmon has much to be proud of

      0  

    Default [RC2] Update with RC2 + screenshot

    [RC2] Update with RC2 + screenshot


    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?

  5. #5
    Sencha - Ext JS Dev Team evant's Avatar
    Join Date
    Apr 2007
    Location
    Sydney, Australia
    Posts
    17,018
    Vote Rating
    650
    evant has a reputation beyond repute evant has a reputation beyond repute evant has a reputation beyond repute evant has a reputation beyond repute evant has a reputation beyond repute evant has a reputation beyond repute evant has a reputation beyond repute evant has a reputation beyond repute evant has a reputation beyond repute evant has a reputation beyond repute evant has a reputation beyond repute

      0  

    Default


    Right, that's pretty much the case.
    Evan Trimboli
    Sencha Developer
    Twitter - @evantrimboli
    Don't be afraid of the source code!

  6. #6
    Sencha - Support Team slemmon's Avatar
    Join Date
    Mar 2009
    Location
    Boise, ID
    Posts
    5,572
    Vote Rating
    203
    slemmon has much to be proud of slemmon has much to be proud of slemmon has much to be proud of slemmon has much to be proud of slemmon has much to be proud of slemmon has much to be proud of slemmon has much to be proud of slemmon has much to be proud of

      0  

    Default


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

    Thx.

  7. #7
    Ext JS Premium Member mcouillard's Avatar
    Join Date
    Jun 2008
    Location
    Bucks County, PA
    Posts
    104
    Vote Rating
    9
    mcouillard will become famous soon enough

      1  

    Lightbulb


    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.

  8. #8
    Sencha - Ext JS Dev Team evant's Avatar
    Join Date
    Apr 2007
    Location
    Sydney, Australia
    Posts
    17,018
    Vote Rating
    650
    evant has a reputation beyond repute evant has a reputation beyond repute evant has a reputation beyond repute evant has a reputation beyond repute evant has a reputation beyond repute evant has a reputation beyond repute evant has a reputation beyond repute evant has a reputation beyond repute evant has a reputation beyond repute evant has a reputation beyond repute evant has a reputation beyond repute

      1  

    Default


    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?
    Evan Trimboli
    Sencha Developer
    Twitter - @evantrimboli
    Don't be afraid of the source code!

  9. #9
    Ext JS Premium Member mcouillard's Avatar
    Join Date
    Jun 2008
    Location
    Bucks County, PA
    Posts
    104
    Vote Rating
    9
    mcouillard will become famous soon enough

      5  

    Lightbulb


    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:

    Code:
    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.

  10. #10
    Sencha User
    Join Date
    Jun 2013
    Posts
    16
    Vote Rating
    0
    davidbeers is on a distinguished road

      0  

    Default


    I think mcouillard's suggestion for nested flex layouts sounds logical and extremely helpful. Does Sencha have a way of voting up feature requests?