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 Premium Member skirtle's Avatar
    Join Date
    Oct 2010
    Location
    UK
    Posts
    3,588
    Answers
    540
    Vote Rating
    322
    skirtle has a brilliant future skirtle has a brilliant future skirtle has a brilliant future skirtle has a brilliant future skirtle has a brilliant future skirtle has a brilliant future skirtle has a brilliant future skirtle has a brilliant future skirtle has a brilliant future skirtle has a brilliant future skirtle has a brilliant future

      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

Turkiyenin en sevilen filmlerinin yer aldigi xnxx internet sitemiz olan ve porn sex tarzi bir site olan mobil porno izle sitemiz gercekten dillere destan bir durumda herkesin sevdigi bir site olarak tarihe gececege benziyor. Sitenin en belirgin ozelliklerinden birisi de Turkiyede gercekten kaliteli ve muntazam, duzenli porno izle siteleri olmamasidir. Bu yuzden iste. Ayrica en net goruntu kalitesine sahip adresinde yayinlanmaktadir. Mesela diğer sitelerimizden bahsedecek olursak, en iyi hd porno video arşivine sahip bir siteyiz. "The Best anal porn videos and slut anus, big asses movies set..." hd porno faketaxi