1. #1
    Ext User lvanderree's Avatar
    Join Date
    Sep 2007
    Location
    The Netherlands
    Posts
    181
    Vote Rating
    0
    lvanderree is on a distinguished road

      0  

    Default disable collapsing in a groupingView

    disable collapsing in a groupingView


    How can I disable the possibility to collapse/expand the grouped-rows in a groupingView?

    It would be nice to remove the [+]/[-] in front of the header, but most importantly I want to get rid of the evenhandler that makes the group collapse, since the text in my header contains links which when clicked on, also make the group collapse.

    A live demo (which is still in active-development) can be found at http://fun4me.demon.nl/test/test_dev.php/country_cities

  2. #2
    Ext User lvanderree's Avatar
    Join Date
    Sep 2007
    Location
    The Netherlands
    Posts
    181
    Vote Rating
    0
    lvanderree is on a distinguished road

      0  

    Default


    I found out with the help of firebug that changing the CSS-class from the grouped-header from "x-grid-group-hd" to something else, like "x-grid3-row" or "x-grid-group-hd-noncollapsable" would be enough to solve my issue.

    So now my question is if someone can provide me with some hints of how to change the CSS-class of the group-header when constructing a groupingView. By default you can set the groupTextTpl, so I probably need to extend or overwrite the class in someway to be able to change its class isn't it?

  3. #3
    Sencha User
    Join Date
    Apr 2012
    Location
    Austin, Texas
    Posts
    4
    Vote Rating
    0
    brian.moeskau is an unknown quantity at this point

      0  

    Default


    There's currently no way to change the class name without overriding the GroupingView class (which you could do if you want). To answer your first question, the collapse/expand behavior comes from this private method:
    Code:
        interceptMouse : function(e){
            var hd = e.getTarget('.x-grid-group-hd', this.mainBody);
            if(hd){
                e.stopEvent();
                this.toggleGroup(hd.parentNode);
            }
        }
    If you want to totally disable that, just override like so:
    Code:
    Ext.override(Ext.grid.GroupingView, {
        interceptMouse : Ext.emptyFn;
    });

  4. #4
    Ext User lvanderree's Avatar
    Join Date
    Sep 2007
    Location
    The Netherlands
    Posts
    181
    Vote Rating
    0
    lvanderree is on a distinguished road

      0  

    Default


    Great!

    Thank you very much!

  5. #5
    Ext User lvanderree's Avatar
    Join Date
    Sep 2007
    Location
    The Netherlands
    Posts
    181
    Vote Rating
    0
    lvanderree is on a distinguished road

      0  

    Default


    For everyone who likes to do the same,

    I've got it working at my live demo:
    http://fun4me.demon.nl/test/test_dev.php/country_cities

    It uses the code from above (without the semi-colon):
    Code:
        //disable collapsable group-headers
        Ext.override(Ext.grid.GroupingView, {
            interceptMouse : Ext.emptyFn
        });
    And a CSS which overwrites the default one:
    Code:
    /* remove the trigger and the mouse-cursor-hand from groupable-grid-headers */
    .x-grid-group-hd {
        border-bottom: 2px solid #99bbe8;
        cursor:default;
        padding-top:6px;
    }
    .x-grid-group-hd div {
        background-image: none;
        padding:4px 4px 4px 4px;
        color:#3764a0;
        font:bold 11px tahoma, arial, helvetica, sans-serif;
    }
    It might be nicer to place this under other CSS-tags, if someone has accomplished this, I would like to know how.

    Another nice feature would be not to completely remove the trigger, so this can still be used for the collapse/expand event, while letting the entire header-bar untouched.

    Happy new year!

  6. #6
    Sencha User ngrover's Avatar
    Join Date
    Jun 2007
    Location
    Calgary Alberta Canada
    Posts
    25
    Vote Rating
    7
    ngrover is on a distinguished road

      0  

    Default


    As a small tweak to the above, If you want to only apply the css to a specific grid you can:

    put this in your grid panel config
    Code:
    ...
    id: 'my-special-grid'
    ...
    and then use the corresponding css
    Code:
    /* remove the trigger and the mouse-cursor-hand from groupable-grid-headers */
    #my-special-grid .x-grid-group-hd {
        border-bottom: 2px solid #99bbe8;
        cursor:default;
        padding-top:6px;
    }
    #my-special-grid .x-grid-group-hd div {
        background-image: none;
        padding:4px 4px 4px 4px;
        color:#3764a0;
        font:bold 11px tahoma, arial, helvetica, sans-serif;
    }

  7. #7
    Ext User
    Join Date
    Jun 2009
    Posts
    25
    Vote Rating
    0
    cbruno is on a distinguished road

      0  

    Default Thanks this helped alot

    Thanks this helped alot


    Quote Originally Posted by ngrover View Post
    As a small tweak to the above, If you want to only apply the css to a specific grid you can:

    put this in your grid panel config
    Code:
    ...
    id: 'my-special-grid'
    ...
    and then use the corresponding css
    Code:
    /* remove the trigger and the mouse-cursor-hand from groupable-grid-headers */
    #my-special-grid .x-grid-group-hd {
        border-bottom: 2px solid #99bbe8;
        cursor:default;
        padding-top:6px;
    }
    #my-special-grid .x-grid-group-hd div {
        background-image: none;
        padding:4px 4px 4px 4px;
        color:#3764a0;
        font:bold 11px tahoma, arial, helvetica, sans-serif;
    }

    Thanks for taking the time to share your solution!!

  8. #8
    Ext JS Premium Member mcouillard's Avatar
    Join Date
    Jun 2008
    Location
    Bucks County, PA
    Posts
    104
    Vote Rating
    11
    mcouillard will become famous soon enough

      0  

    Default thanks

    thanks


    Thank you! This override still works in Ext 3.1.1

    The grouped headers look nice, but without built-in support for paging it doesn't make sense to allow our users to expand/collapse. We only show a limited number of records per page (<20) and the total records are often in the hundreds.

  9. #9
    Sencha Premium Member
    Join Date
    Aug 2010
    Location
    Quebec, Canada
    Posts
    10
    Vote Rating
    0
    jracine is on a distinguished road

      0  

    Default


    In Ext 3.3.0, the override doesn't work anymore, because the code has changed. The private method "interceptMouse" has been integrated in the private method "processEvent". So I change the override for the code above and it works.
    Code:
    Ext.override(Ext.grid.GroupingView, {
        processEvent : Ext.emptyFn
    });
    I would like to know if it was the good things to do or if there is a better way to do it.
    Thanks.

  10. #10
    Touch Premium Member
    Join Date
    Mar 2010
    Posts
    5
    Vote Rating
    0
    LarsBarstad is on a distinguished road

      0  

    Default


    I think the processEvent override will do more than just disable collapsing of the groupingView, in my case it also disabled mouse selection in the grid. I haven't looked into other options for disabling collapsing of the groupingView in 3.3.0 yet, so if anyone has any pointers they would be very welcome.