1. #1
    Sencha User cyChop's Avatar
    Join Date
    Jun 2010
    Location
    Metz, France
    Posts
    59
    Vote Rating
    0
    cyChop is on a distinguished road

      0  

    Default Ellipse text in grids

    Ellipse text in grids


    Hello there,

    I thought I had seen a built-in function that would ellipse* text when it is too long for the width of the column it is displayed in, but I can't find it again. Have I dreamt it?

    Of course I could use a renderer, but I don't know how to calculate the number of characters that should be displayed, depending of the width of the column, and I'm not sure I can recalculate it when the column is resized.

    Thanks for your help.


    *ellipse: cut the overflow and end the text with "..."

  2. #2
    Sencha User
    Join Date
    Sep 2007
    Posts
    13,971
    Vote Rating
    132
    sven is a glorious beacon of light sven is a glorious beacon of light sven is a glorious beacon of light sven is a glorious beacon of light sven is a glorious beacon of light sven is a glorious beacon of light

      0  

    Default


    I thought I had seen a built-in function that would ellipse* text when it is too long for the width of the column it is displayed in, but I can't find it again. Have I dreamt it?
    You have not dreamed of it. Its
    Code:
    text-overflow: ellipsis;
    But does not work in FF

  3. #3
    Sencha User cyChop's Avatar
    Join Date
    Jun 2010
    Location
    Metz, France
    Posts
    59
    Vote Rating
    0
    cyChop is on a distinguished road

      0  

    Default


    OK, so that's why it disappeared (previously tested using Chromium, got to FF).

    If this is considered a bug you want to fix, here's a lead: http://mattsnider.com/css/css-string...with-ellipsis/
    I'll try using it to patch in my own project. Thanks!

  4. #4
    Sencha User cyChop's Avatar
    Join Date
    Jun 2010
    Location
    Metz, France
    Posts
    59
    Vote Rating
    0
    cyChop is on a distinguished road

      0  

    Lightbulb


    Just for further notice if anyone needs to patch their application, the following (inspired from the link I gave earlier) works:
    • In your CSS:
    PHP Code:
    /* workaround for ellipsis */
    .x-tab-strip-inner,
    .
    x-grid3-cell-inner,
    .
    x-grid3-hd-inner,
    .
    x-combo-list-item {
        
    white-spacenowrap;  
        
    overflowhidden;  
        
    text-overflowellipsis;  
        
    /* Opera and IE8 workarounds */
        
    -o-text-overflowellipsis;  
        -
    ms-text-overflowellipsis;  
        
    /* Implement ellipsis-like function for FF */
        
    -moz-bindingurl('ellipsis.xml#ellipsis');

    • In the ellipsis.xml file:
    HTML Code:
    <?xml version="1.0"?>
    <bindings   
      xmlns="http://www.mozilla.org/xbl"  
      xmlns:xbl="http://www.mozilla.org/xbl"  
      xmlns:xul="http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul"  
    >  
        <binding id="ellipsis">  
            <content>  
                <xul:window>  
                    <xul:description crop="end" xbl:inherits="value=xbl:text"><children/></xul:description>  
                </xul:window>  
            </content>  
        </binding>  
    </bindings>
    [Edit:]
    The -moz-binding may induce undesirable side-effects. For instance, the + button of the RowExpander is no longer displayed. Therefore, the binding needs to be disabled in some cases. This is my solution for having ellipsis on all columns but the first:

    PHP Code:
    /* workaround for ellipsis */
    .x-tab-strip-inner,
    .
    x-grid3-cell-inner,
    .
    x-grid3-hd-inner,
    .
    x-combo-list-item {
        
    white-spacenowrap;  
        
    overflowhidden;  
        
    text-overflowellipsis;  
        
    /* Opera and IE8 workarounds */
        
    -o-text-overflowellipsis;  
        -
    ms-text-overflowellipsis;  
        
    /* Implement ellipsis-like function for FF */
        
    -moz-bindingurl('ellipsis.xml#ellipsis');
    }

    .
    x-grid-cell-first .x-grid3-cell-inner {
        -
    moz-bindingnone;

    Thus, one can see that the ellipsis-like behaviour can be disabled where needed by using the "-moz-binding: none" style attribute where needed.

Similar Threads

  1. Reliable way of appending ellipse to string in grid?
    By dbassett74 in forum Ext 3.x: Help & Discussion
    Replies: 6
    Last Post: 29 Jun 2010, 9:32 AM
  2. Util.ellipse removed from API
    By appian_it in forum Ext GWT: Discussion
    Replies: 1
    Last Post: 9 Jun 2009, 2:46 PM
  3. Multiline text and grids
    By dmcclean in forum Ext 2.x: Help & Discussion
    Replies: 3
    Last Post: 7 Nov 2008, 6:54 AM
  4. ComboBox Ellipse Addition Request
    By mikegiddens in forum Ext 1.x: Bugs
    Replies: 2
    Last Post: 3 Apr 2007, 10:03 AM

Thread Participants: 1