1. #1
    Sencha User
    Join Date
    May 2009
    Posts
    6
    Vote Rating
    0
    gma990 is on a distinguished road

      0  

    Question Answered: Grids: CollapseAllGroups & ExpandAllGroups

    Answered: Grids: CollapseAllGroups & ExpandAllGroups


    Hello,

    In ExtJs 3.x, it was possible to collapse/expand all groups in grids with Ext.grid.GroupingView.collapseAllGroups / expandAllGroups.

    I just don't find how to do the same with ExtJs 4.

    Will you show me how to solve this problem please ?

    Regards,
    Geoffroy

  2. You can use this override to get this work:

    Code:
    Ext.override(Ext.grid.feature.Grouping, {
                collapseAll: function() {
                    var self = this, view = self.view;
                    view.el.query('.x-grid-group-hd').forEach(function (group) {
                        var group_body = Ext.fly(group.nextSibling, '_grouping');
                        self.collapse(group_body);
                    });
                },
    
                expandAll: function() {
                    var self = this, view = self.view;
                    view.el.query('.x-grid-group-hd').forEach(function (group) {
                        var group_body = Ext.fly(group.nextSibling, '_grouping');
                        self.expand(group_body);
                    });
                }
            });

  3. #2
    Sencha Premium Member skirtle's Avatar
    Join Date
    Oct 2010
    Location
    UK
    Posts
    3,604
    Answers
    543
    Vote Rating
    325
    skirtle has a brilliant future skirtle has a brilliant future skirtle has a brilliant future skirtle has a brilliant future skirtle has a brilliant future skirtle has a brilliant future skirtle has a brilliant future skirtle has a brilliant future skirtle has a brilliant future skirtle has a brilliant future skirtle has a brilliant future

      0  

    Default


    I couldn't find a direct replacement but this seems to work, albeit using undocumented methods:

    Code:
    var groupingFeature = Ext.create('Ext.grid.feature.Grouping', {
        groupHeaderTpl: 'Group: {name} ({rows.length})',
        startCollapsed: true
    });
    
    Ext.create('Ext.grid.Panel', {
        features: [groupingFeature],
        ...
        tbar: [
            {
                text: 'Expand All',
                handler: function() {
                    var rows = groupingFeature.view.getEl().query('.x-grid-group-body');
    
                    Ext.each(rows, function(row) {
                        groupingFeature.expand(Ext.get(row));
                    });
                }
            }, {
                text: 'Collapse All',
                handler: function() {
                    var rows = groupingFeature.view.getEl().query('.x-grid-group-body');
    
                    Ext.each(rows, function(row) {
                        groupingFeature.collapse(Ext.get(row));
                    });
                }
            }
        ]
    });

  4. #3
    Sencha User
    Join Date
    Sep 2010
    Location
    Germany
    Posts
    58
    Answers
    2
    Vote Rating
    2
    HTK is on a distinguished road

      1  

    Default


    You can use this override to get this work:

    Code:
    Ext.override(Ext.grid.feature.Grouping, {
                collapseAll: function() {
                    var self = this, view = self.view;
                    view.el.query('.x-grid-group-hd').forEach(function (group) {
                        var group_body = Ext.fly(group.nextSibling, '_grouping');
                        self.collapse(group_body);
                    });
                },
    
                expandAll: function() {
                    var self = this, view = self.view;
                    view.el.query('.x-grid-group-hd').forEach(function (group) {
                        var group_body = Ext.fly(group.nextSibling, '_grouping');
                        self.expand(group_body);
                    });
                }
            });

  5. #4
    Sencha User
    Join Date
    May 2009
    Posts
    6
    Vote Rating
    0
    gma990 is on a distinguished road

      0  

    Default


    Thank you for your answers.

  6. #5
    Sencha User
    Join Date
    May 2010
    Location
    ─░zmir
    Posts
    12
    Answers
    2
    Vote Rating
    0
    jamesdesouza is on a distinguished road

      0  

    Default IE8 error

    IE8 error


    Hi,
    I get error on IE8
    Code:
    Object does not support this property or method
    on line
    PHP Code:
    view.el.query('.x-grid-group-hd').forEach(function (group) { 
    it works fine on ff.
    how can I solve IE problem?

    Edit:

    my solution
    PHP Code:
    Ext.override(Ext.grid.feature.Grouping, {    collapseAll: function() {        var self thisgroups this.view.el.query('.x-grid-group-body');        Ext.Array.forEach(groups, function (group) {            var Ext.get(group.id);            self.collapse(g);        });    },
        
    expandAll: function() {        var self thisgroups this.view.el.query('.x-grid-group-body');        Ext.Array.forEach(groups, function (group) {            var Ext.get(group.id);            self.expand(g);        });    }}); 
    Last edited by jamesdesouza; 22 Sep 2011 at 3:55 AM. Reason: i solve it, i think :)

  7. #6
    Sencha User
    Join Date
    Mar 2009
    Posts
    23
    Vote Rating
    0
    traxanos is on a distinguished road

      0  

    Default


    it is not good to use '.x-grid-group-hd' directly. because sometime the class is different. use instead the self.eventSelector for query.

    Code:
    Ext.override(Ext.grid.feature.Grouping, {
      collapseAll: function() {
        var self = this, view = self.view;
        view.el.query(self.eventSelector).forEach(function (group) {
          var group_body = Ext.fly(group.nextSibling, '_grouping');
          self.collapse(group_body);
        });
      },
    
      expandAll: function() {
        var self = this, view = self.view;
        view.el.query(self.eventSelector).forEach(function (group) {
          var group_body = Ext.fly(group.nextSibling, '_grouping');
          self.expand(group_body);
        });
      }
    });

  8. #7
    Sencha Premium Member GeorgeHernandez's Avatar
    Join Date
    Oct 2007
    Location
    Chicago
    Posts
    19
    Vote Rating
    0
    GeorgeHernandez is on a distinguished road

      0  

    Exclamation I'd like this in extjs-4.1 proper

    I'd like this in extjs-4.1 proper


    This work around hack has been in the forum since 2011-08, but we still need to hack it into extjs-4.1.0-rc2?! Hopefully it will be built in extjs-4.1 proper! Please?

  9. #8
    Sencha Premium Member
    Join Date
    Sep 2010
    Posts
    128
    Vote Rating
    1
    Tod is on a distinguished road

      0  

    Default


    Yes...where is this feature? A collapsed grouping is a very convenient summary

  10. #9
    Sencha User
    Join Date
    Apr 2011
    Posts
    9
    Vote Rating
    0
    Sreekesh S K is on a distinguished road

      0  

    Default Regarding Grid Collapse

    Regarding Grid Collapse


    Hi Team,

    I just need to collapse a 'hbox' grid to left side.

    When I try to add 'collapsible' as true for that grid, it just collapse to the top of the window only.


    The code is as follows:

    title: 'XXX',
    layout: 'hbox',
    layoutConfig: {
    align: 'stretch'
    },
    items: [{
    id: 'xxx-left-grid',
    flex: 1,
    loadMask: true,
    viewConfig: {
    forceFit: true
    },
    xtype: 'grid',
    collapsible: true,
    store: queueExtensionStore,
    //hideHeaders: true,
    sm: new Ext.grid.RowSelectionModel({
    singleSelect: true
    }),
    cm: new Ext.grid.ColumnModel({
    columns: [{
    id: 'extension',
    header: 'Extension',
    dataIndex: 'extension',
    width: newWidth - 4
    }]
    }),
    listeners: {
    rowclick: function (obj, index) {
    var ext_id = Ext.getCmp('extension-left-grid').getSelectionModel().getSelected().get("extension_id");
    extensionDnisStore.baseParams.id = ext_id;
    extensionDnisStore.load();
    }
    }
    }, {
    id: 'assigned-dnis-grid',
    flex: 1,
    loadMask: true,
    viewConfig: {
    forceFit: true
    },
    xtype: 'grid',
    store: extensionDnisStore,
    //hideHeaders: true,
    sm: new Ext.grid.RowSelectionModel({
    singleSelect: true
    }),
    cm: new Ext.grid.ColumnModel({
    columns: [{
    id: 'dnis',
    header: 'DNIS',
    dataIndex: 'dnis',
    width: newWidth - 4
    }]
    })
    }]


    I just need to collapse the grid 'xxx-left-grid' to the left side when page loads and also able to collapse and release it as per the need..

    Can any one pls help