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
    2
    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
    24
    Vote Rating
    2
    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
    102
    Vote Rating
    7
    mcouillard is on a distinguished road

      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.

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