1. #1
    Sencha User Fire-Dragon-DoL's Avatar
    Join Date
    Dec 2011
    Posts
    141
    Vote Rating
    1
    Answers
    9
    Fire-Dragon-DoL is on a distinguished road

      0  

    Default Answered: How to set a default value of flex for all columns of a grid panel

    Answered: How to set a default value of flex for all columns of a grid panel


    As the title states, I would like to set a default value for all columns as this comment suggest (in the documentation):

    Code:
    columns: {
        items: [
            {
                text: "Column A"
                dataIndex: "field_A"
            },{
                text: "Column B",
                dataIndex: "field_B"
            }, 
            ...
        ],
        defaults: {
            flex: 1
        }
    }

  2. The following code works well for me on Chrome, Ext 4.0.7. Column C & D will have flex set to 2 (default)
    Code:
    Ext.onReady(function(){
        var grid = Ext.create('Ext.grid.Panel', {
            renderTo: Ext.getBody(),
            width   : 800,
            height  : 150,
            columns: {
                items: [{
                    text: "Column A",
                    width: 140
                },{
                    text: "Column B",
                    flex: 1
                },{
                    text: "Column C",
                },{
                    text: "Column D",
                },{
                    text: "Column E",
                    flex: 3
                }],
                defaults: {
                    flex: 2
                }
            }
        });
        console.log(grid)
    });

  3. #2
    Sencha - Community Support Team
    Join Date
    Jan 2012
    Posts
    1,376
    Vote Rating
    115
    Answers
    346
    vietits is a splendid one to behold vietits is a splendid one to behold vietits is a splendid one to behold vietits is a splendid one to behold vietits is a splendid one to behold vietits is a splendid one to behold

      0  

    Default


    I think the way you do is correct.

  4. #3
    Sencha User Fire-Dragon-DoL's Avatar
    Join Date
    Dec 2011
    Posts
    141
    Vote Rating
    1
    Answers
    9
    Fire-Dragon-DoL is on a distinguished road

      0  

    Default


    I'm asking it because it's not working in that way, I have to write "flex: 1" on all columns

  5. #4
    Sencha - Community Support Team
    Join Date
    Jan 2012
    Posts
    1,376
    Vote Rating
    115
    Answers
    346
    vietits is a splendid one to behold vietits is a splendid one to behold vietits is a splendid one to behold vietits is a splendid one to behold vietits is a splendid one to behold vietits is a splendid one to behold

      0  

    Default


    The following code works well for me on Chrome, Ext 4.0.7. Column C & D will have flex set to 2 (default)
    Code:
    Ext.onReady(function(){
        var grid = Ext.create('Ext.grid.Panel', {
            renderTo: Ext.getBody(),
            width   : 800,
            height  : 150,
            columns: {
                items: [{
                    text: "Column A",
                    width: 140
                },{
                    text: "Column B",
                    flex: 1
                },{
                    text: "Column C",
                },{
                    text: "Column D",
                },{
                    text: "Column E",
                    flex: 3
                }],
                defaults: {
                    flex: 2
                }
            }
        });
        console.log(grid)
    });

  6. #5
    Sencha User Fire-Dragon-DoL's Avatar
    Join Date
    Dec 2011
    Posts
    141
    Vote Rating
    1
    Answers
    9
    Fire-Dragon-DoL is on a distinguished road

      0  

    Default


    I'm currently using this code:
    Code:
    Ext.apply(me, {
          items: [
          {
            xtype: 'gridpanel',
            region: 'center',
            forceFit: true,
            frame: false,
            padding: 1,
            columnLines: true,
            //features: [filterFeature],
            columns: {
              items: gridColumns,
              defaults: {
                flex: 1,
              }
            },
            
            tbar:
            {
              xtype: 'toolbar',
              region: 'north',
              items: [{
                xtype: 'button',
                text: 'Aggiungi'
              },{
                xtype: 'button',
                text: 'Rimuovi'
              }],
            },
          }],
        });
    Where "me" is a Ext.window.Window
    I tried but it's not working (is not the same behaviour of writing flex: 1 on each column). I also tried with header: 'randomtext' to see if all headers are set to the same name but it's not working

  7. #6
    Sencha - Community Support Team
    Join Date
    Jan 2012
    Posts
    1,376
    Vote Rating
    115
    Answers
    346
    vietits is a splendid one to behold vietits is a splendid one to behold vietits is a splendid one to behold vietits is a splendid one to behold vietits is a splendid one to behold vietits is a splendid one to behold

      0  

    Default


    I have tried to simulate your case and it still works.
    Code:
    Ext.onReady(function(){
        var gridColumns = [{
            text: "Column A",
            width: 140
        },{
            text: "Column B",
            flex: 1
        },{
            text: "Column C",
        },{
            text: "Column D",
        },{
            text: "Column E",
            flex: 3
        }];
        Ext.define('MyWindow', {
            extend: 'Ext.window.Window',
            initComponent: function(){
                var me = this;
                Ext.apply(me, {
                    items: [{
                        xtype: 'gridpanel',
                        region: 'center',
                        forceFit: true,
                        frame: false,
                        padding: 1,
                        columnLines: true,
                        //features: [filterFeature],
                        columns: {
                            items: gridColumns,
                            defaults: {
                                flex: 2,
                                header: 'abc'
                            }
                        },
                        tbar: {
                          xtype: 'toolbar',
                          region: 'north',
                          items: [{
                            xtype: 'button',
                            text: 'Aggiungi'
                          },{
                            xtype: 'button',
                            text: 'Rimuovi'
                          }]
                        }
                    }]
                });
                me.callParent(arguments);
            }
        })
        var win = Ext.create('MyWindow', {
            width: 800,
            height: 400,
            layout: 'fit'
        }); 
        win.show();
    });

  8. #7
    Sencha User Fire-Dragon-DoL's Avatar
    Join Date
    Dec 2011
    Posts
    141
    Vote Rating
    1
    Answers
    9
    Fire-Dragon-DoL is on a distinguished road

      0  

    Default


    I know it's mad but I tested your code and is correctly working, while mine not... i can't understand how this can happen while codes look the same.

    Maybe there is something wrong connected with using the MVC approach, I don't know

    EDIT: Ok seems I found the problem: if I set locked to false in any column, defaults are not applied.

    Why this mad thing?

  9. #8
    Sencha - Community Support Team
    Join Date
    Jan 2012
    Posts
    1,376
    Vote Rating
    115
    Answers
    346
    vietits is a splendid one to behold vietits is a splendid one to behold vietits is a splendid one to behold vietits is a splendid one to behold vietits is a splendid one to behold vietits is a splendid one to behold

      0  

    Default


    Lockable grid is in fact two grids created internally. The constructing phrase of these two grids will use only items config and ignore all other configs in columns: {defaults: {}, items: []} from the original grid config. The other way to say is that with lockable grid, the two following configs are the same:
    Code:
    columns: {
        defaults: {},
        ... //other configs
        items: [{...}]
    }
    Code:
    columns: [{...}]
    That's why you could not apply defaults setting for lockable grid.

  10. #9
    Sencha User Fire-Dragon-DoL's Avatar
    Join Date
    Dec 2011
    Posts
    141
    Vote Rating
    1
    Answers
    9
    Fire-Dragon-DoL is on a distinguished road

      0  

    Default


    Mh ok thanks a lot, I avoid to use lockable grid so.

Thread Participants: 1

Tags for this Thread