Hybrid View

    You found a bug! We've classified it as EXTJS-8157 . We encourage you to continue the discussion and to find an acceptable workaround while we work on a permanent fix.
  1. #1
    Ext JS Premium Member Juanito's Avatar
    Join Date
    Apr 2007
    Location
    San Diego->Boston->Brazil
    Posts
    152
    Vote Rating
    3
    Juanito is on a distinguished road

      0  

    Default Using word-wrap:break-word in GridPanels breaks hidden columns

    Using word-wrap:break-word in GridPanels breaks hidden columns


    REQUIRED INFORMATION


    Ext version tested:
    • Ext 4.1.3 (Using live examples from sencha's current doc)

    Browser versions tested against:
    • Chrome
    • IE9
    • Firefox ESR 10.0.6

    DOCTYPE tested against:
    • <!DOCTYPE html>
    • <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

    Description:
    I wanted to break words in a grid so they wrap by breaking long words using

    Code:
     .x-grid-cell-inner {
        white-space: normal;
        word-wrap: break-word;
    }
    This works fine until the column is hidden.

    word-wrap-break-word.png

    As soon as I hide a column (using the columns menu) that has wrapped , the column is hidden but each row becomes really tall.

    word-wrap-break-word-broken.png

    Steps to reproduce the problem:
    • Go to http://jsfiddle.net/jRyUQ/
    • Notice that the email column is wrapping to show the full email in a new line
    • Hide the Email column from the column menu

    Note that you can also easily reproduce it from http://docs.sencha.com/ext-js/4-1/#!/api/Ext.grid.Panel by modifying the CSS dynamically using the CSS I posted above and reproducing the same steps. That is why I tagged this as 4.1.3 instead of 4.1.1 which was used in the jsfiddle.

    The result that was expected:
    • Each row has the height of just one line

    The result that occurs instead:
    • Each row becomes as tall as there are letters in the hidden column

    Test Case:

    Code:
      Ext.create('Ext.data.Store', {
        storeId:'simpsonsStore',
        fields:['name', 'email', 'phone'],
        data:{'items':[
            { 'name': 'Lisa',  "email":"lisa@simpsons.com",  "phone":"555-111-1224"  },
            { 'name': 'Bart',  "email":"bart@simpsons.com",  "phone":"555-222-1234" },
            { 'name': 'Homer', "email":"home@simpsons.com",  "phone":"555-222-1244"  },
            { 'name': 'Marge', "email":"marge@simpsons.com", "phone":"555-222-1254"  }
        ]},
        proxy: {
            type: 'memory',
            reader: {
                type: 'json',
                root: 'items'
            }
        }
    });
    
    Ext.create('Ext.grid.Panel', {
        title: 'Simpsons',
        store: Ext.data.StoreManager.lookup('simpsonsStore'),
        columns: [
            { text: 'Name',  dataIndex: 'name' },
            { text: 'Email', dataIndex: 'email'},
            { text: 'Phone', dataIndex: 'phone' }
        ],
        height: 200,
        width: 400,
        renderTo: Ext.getBody()
    });​
    
    .x-grid-cell-inner {
        white-space: normal;
        word-wrap: break-word;
    }

    HELPFUL INFORMATION


    Screenshot or Video:
    • See description

    See this URL for live test case: http://jsfiddle.net/jRyUQ/


    Debugging already done:
    It looks like the columns are hidden by setting width:0, the overflowing text is not displayed but it's still taking up space in the td

    Possible fix:
    Also set the height of the td/div to 0?

    Additional CSS used:
    .x-grid-cell-inner {
    white-space: normal;
    word-wrap: break-word;
    }


    Operating System:
    • Windows 7
    Last edited by Juanito; 4 Jan 2013 at 12:53 PM. Reason: minor typos and formatting

  2. #2
    Sencha - Senior Forum Manager mitchellsimoens's Avatar
    Join Date
    Mar 2007
    Location
    Gainesville, FL
    Posts
    35,704
    Vote Rating
    751
    mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute

      0  

    Default


    Moved to bugs forum.

    Thanks for the report! I have opened a bug in our bug tracker.

  3. #3
    Ext JS Premium Member Juanito's Avatar
    Join Date
    Apr 2007
    Location
    San Diego->Boston->Brazil
    Posts
    152
    Vote Rating
    3
    Juanito is on a distinguished road

      0  

    Default


    The problem is that hidden columns still take up height since only the columns inside x-grid-header-row have their width/height to 0. The width does propagate to all the tds, but the height doesn't, as it shouldn't.

    Using word-wrap:break-word exarcebates the problem by putting each letter on its own line. Here's another example of the problem without using break-word. This example puts images in one of the columns, when you hide the column, the images still take up space

    hidden-column-takes-up-vertical-space.png


    Workaround

    The simplest solution I found is to listen for the 'columnhide' event, find all the tds for that column and apply a 'x-hidden-column' class to them. You also have to remember to apply it to columns that are initially hidden too.

    Code:
    .x-hidden-column .x-grid-cell-inner{
        display:none;
    }
    Better Approach?
    The problem with this approach is that it requires applying a CSS class to each td, which can be expensive if you have lots of rows. It would be faster if we could apply that rule (using Ext.util.CSS) to the dynamically created CSS class (x-grid-cell-column-1011) for each column, then there would be no DOM querying and applying CSS to each td.

    Actually, this won't work because of IE's limits of 31 style tags http://support.microsoft.com/kb/262161. I'll try to post a working workaround here soon...
    Last edited by Juanito; 7 Jan 2013 at 11:10 AM. Reason: better approach won't work for IE

  4. #4
    Sencha - Ext JS Dev Team evant's Avatar
    Join Date
    Apr 2007
    Location
    Sydney, Australia
    Posts
    16,119
    Vote Rating
    507
    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


    This issue is a duplicate of EXTJSIV-6734.
    Evan Trimboli
    Sencha Developer
    Twitter - @evantrimboli
    Don't be afraid of the source code!

  5. #5
    Ext JS Premium Member Juanito's Avatar
    Join Date
    Apr 2007
    Location
    San Diego->Boston->Brazil
    Posts
    152
    Vote Rating
    3
    Juanito is on a distinguished road

      0  

    Default


    @evant Can you please link to the thread where EXTJSIV-6734 was created from so that I can track its progress? I did a google search but only mine and another post (also marked as a duplicate) came up.

  6. #6
    Sencha - Ext JS Dev Team evant's Avatar
    Join Date
    Apr 2007
    Location
    Sydney, Australia
    Posts
    16,119
    Vote Rating
    507
    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


    It came from internal testing, so there's no forum thread created for it.
    Evan Trimboli
    Sencha Developer
    Twitter - @evantrimboli
    Don't be afraid of the source code!

  7. #7
    Sencha User Daniil's Avatar
    Join Date
    Jun 2010
    Location
    Saint-Petersburg, Russia
    Posts
    972
    Vote Rating
    105
    Daniil is a glorious beacon of light Daniil is a glorious beacon of light Daniil is a glorious beacon of light Daniil is a glorious beacon of light Daniil is a glorious beacon of light Daniil is a glorious beacon of light

      0  

    Default


    Quote Originally Posted by evant View Post
    This issue is a duplicate of EXTJSIV-6734.
    I see two notes in ExtJS 4.2.1 GA Release Notes.
    EXTJSIV-6734 Hidden grid column's height is not properly measured when wordwrap is used

    One for 4.2.0 Beta, one for 4.2.1.

    However, the issue appears to be still reproducible with 4.2.1.

    So, should we wait fixing of EXTJSIV-8157 ticket? Please clarify.
    Ext.NET - ASP.NET for Ext JS
    MVC and WebForms
    Examples | Twitter

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