1. #1
    Sencha User
    Join Date
    Oct 2011
    Posts
    16
    Answers
    2
    Vote Rating
    0
    kelv1n is on a distinguished road

      0  

    Default Answered: Newb question - Auto expand grid column

    Answered: Newb question - Auto expand grid column


    Hi Everyone

    I'm an experienced backend developer, but complete beginner when it comes to javascript and extjs. I'm just playing around trying to learn.

    I've managed to get a Grid displaying and loading data from a server using a JSON store, but I can't for the life of me get the column(s) to auto expand. I've read that only 1 column can be set to auto expand.

    Any advice would be appreciate, my code is below.. don't laugh it was pieced together via trial and error, there are probably unrequired items, this is set as an item of a ViewPort. It renders fine and loads data, but it just won't auto expand.

    Additionally if I set a % width on the 'messages' column it does not render than column contents (though the others render fine).


    Code:
    var grid_panel = {
     region: 'center', 
        xtype: 'gridpanel',
        title: 'Syslog',
        store:store,
        closable: true,
        autoExpandColumn: 'message',
        columns: [
            {
                xtype: 'gridcolumn',
                dataIndex: 'generated',
                text: 'generated',
                id : 'generated',
                columnId : 'generated',
            },
            {
                xtype: 'gridcolumn',
                dataIndex: 'host',
                text: 'host',
                id : 'host',
                columnId : 'host',
            },
            {
    
                xtype: 'gridcolumn',
                dataIndex: 'message',
                text: 'message',
                id : 'message',
                columnId : 'message',
            }        va
        ],
        viewConfig: {
      stripeRows: true
        }
    
    }
    Many Thanks

  2. The documentation for grid columns is here:

    http://docs.sencha.com/ext-js/4-0/#!....column.Column

    If you look at the section 'Setting Sizes' you'll see brief mention of how to do column widths. Percentage values are not supported as such. You have two options. Firstly, you can set a width in pixels:

    Code:
    {
        ...
        width: 200
    }
    The other option is to use flex. Flex values are relative to each other, so if you have 2 columns both with the same flex value they will both have the same width. Flexed columns will stretch to fit the available width in your grid.

    Only allowing 1 auto-expand column is no longer true in ExtJS 4. You seem to have been reading an ExtJS 3 guide.

    For example. If you want the first column to be width 200 and for the other two columns to fill the remaining space you could do the following:

    Code:
    {
        ...
        width: 200
    }, {
        ...
        flex: 1
    }, {
        ...
        flex: 1
    }
    In this example the two flexed columns would be the same width but you can vary the flex values as you see fit. If you prefer to work in percentages then you could set the flex values to both be 50, which would be equivalent.

  3. #2
    Sencha User skirtle's Avatar
    Join Date
    Oct 2010
    Location
    UK
    Posts
    3,338
    Answers
    498
    Vote Rating
    248
    skirtle has much to be proud of skirtle has much to be proud of skirtle has much to be proud of skirtle has much to be proud of skirtle has much to be proud of skirtle has much to be proud of skirtle has much to be proud of skirtle has much to be proud of skirtle has much to be proud of skirtle has much to be proud of

      0  

    Default


    The documentation for grid columns is here:

    http://docs.sencha.com/ext-js/4-0/#!....column.Column

    If you look at the section 'Setting Sizes' you'll see brief mention of how to do column widths. Percentage values are not supported as such. You have two options. Firstly, you can set a width in pixels:

    Code:
    {
        ...
        width: 200
    }
    The other option is to use flex. Flex values are relative to each other, so if you have 2 columns both with the same flex value they will both have the same width. Flexed columns will stretch to fit the available width in your grid.

    Only allowing 1 auto-expand column is no longer true in ExtJS 4. You seem to have been reading an ExtJS 3 guide.

    For example. If you want the first column to be width 200 and for the other two columns to fill the remaining space you could do the following:

    Code:
    {
        ...
        width: 200
    }, {
        ...
        flex: 1
    }, {
        ...
        flex: 1
    }
    In this example the two flexed columns would be the same width but you can vary the flex values as you see fit. If you prefer to work in percentages then you could set the flex values to both be 50, which would be equivalent.

  4. #3
    Sencha User
    Join Date
    Oct 2011
    Posts
    16
    Answers
    2
    Vote Rating
    0
    kelv1n is on a distinguished road

      0  

    Default


    Thanks Skirtle

Thread Participants: 1

film izle

hd film izle

film sitesi

takipci kazanma sitesi

takipci kazanma sitesi

güzel olan herşey

takipci alma sitesi

komik eğlenceli videolar