Results 1 to 7 of 7

Thread: No multiline grid row despite of css config

  1. #1
    Sencha User
    Join Date
    Dec 2008
    Posts
    92

    Default No multiline grid row despite of css config

    Why is there only one line in the following grid row?

    Code:
        var grid = new Ext.grid.GridPanel({
            store: new Ext.data.ArrayStore({
                fields: [
                    'text'
                ],
                data: [
                    [ 'Lorem ipsum dolor sit amet, consectetur adipisici elit, sed eiusmod tempor incidunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquid ex ea commodi consequat. Quis aute iure reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint obcaecat cupiditat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.' ]
                ]
            }),
            cm: new Ext.grid.ColumnModel([
                {
                    id: 'text',
                    header: 'Text',
                    dataIndex: 'text',
                    width: 500,
                    css: 'white-space:normal;'
                }
            ]),
            renderTo: 'myDiv'
        });
    (Using 3.1.1)

  2. #2
    Sencha Premium Member goldledoigt's Avatar
    Join Date
    Jul 2007
    Location
    Paris, France
    Posts
    56

    Default

    If you expect multiple rows :
    Add something to break the line (<br />)
    Please try in your grid config :
    Code:
    autoHeight:true
    Code:
    var grid = new Ext.grid.GridPanel({
           autoHeight:true,
           store: new Ext.data.ArrayStore({
               fields: [
                   'text'
               ],
               data: [
                   [ 'Lorem ipsum dolor sit amet, consectetur adipisici elit, sed eiusmod tempor incidunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquid ex ea commodi consequat.<br /> Quis aute iure reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint obcaecat cupiditat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.' ]
               ]
           }),
           cm: new Ext.grid.ColumnModel([
               {
                   id: 'text',
                   header: 'Text',
                   dataIndex: 'text',
                   width: 500,
                   css: 'white-space:normal;'
               }
           ]),
           renderTo: 'myDiv'
       });
    Goldledoigt

  3. #3
    Sencha User
    Join Date
    Dec 2008
    Posts
    92

    Default

    I see, thanks. But now I can't put a piece of text in there without breaking the line manually? I expected white-space:normal to take care of that?

  4. #4
    Sencha Premium Member goldledoigt's Avatar
    Join Date
    Jul 2007
    Location
    Paris, France
    Posts
    56

    Default

    OK I got you ... sorry for my brain delay.

    To get the expected result I had to change the underlying div element of the cell like this:

    Code:
    .x-grid3-cell-inner, .x-grid3-hd-inner {
    overflow:hidden;
    padding:3px 3px 3px 5px;
    white-space:normal;
    }
    (I am using FF 3.0.18)

    does it help you ?
    Goldledoigt

  5. #5
    Sencha User
    Join Date
    Dec 2008
    Posts
    92

    Default

    Yes it does, thanks. I thought the css: config would override the element style, but I can see in Firebug it doesn't and I should have seen that myself before asking Thanks anyway.

  6. #6
    Sencha Premium Member goldledoigt's Avatar
    Join Date
    Jul 2007
    Location
    Paris, France
    Posts
    56

    Default

    I guess you can simply override the element style with help of "getRowClass" from Ext.grid.GridView.
    Goldledoigt

  7. #7
    Sencha User
    Join Date
    Dec 2008
    Posts
    92

    Default

    You're right.

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •