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,588
    Answers
    540
    Vote Rating
    322
    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
    53
    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

Turkiyenin en sevilen filmlerinin yer aldigi xnxx internet sitemiz olan ve porn sex tarzi bir site olan mobil porno izle sitemiz gercekten dillere destan bir durumda herkesin sevdigi bir site olarak tarihe gececege benziyor. Sitenin en belirgin ozelliklerinden birisi de Turkiyede gercekten kaliteli ve muntazam, duzenli porno izle siteleri olmamasidir. Bu yuzden iste. Ayrica en net goruntu kalitesine sahip adresinde yayinlanmaktadir. Mesela diğer sitelerimizden bahsedecek olursak, en iyi hd porno video arşivine sahip bir siteyiz. "The Best anal porn videos and slut anus, big asses movies set..." hd porno faketaxi