1. #1
    Sencha User
    Join Date
    Sep 2012
    Posts
    16
    Vote Rating
    2
    expensior is on a distinguished road

      1  

    Default Unanswered: Grouping Grid startCollapsed Issues/Bug?

    Unanswered: Grouping Grid startCollapsed Issues/Bug?


    extjs 4.1.1

    We are currenty facing a major problem in our application. We are using a grouped grid to display data records but after tinkering for a while we feel there is a need to start the groups collapsed to reduce initial rendering times and keep the site compact.

    Now the problem is that the groupingFeature - startCollapsed property has absolutely no effect on the grid when processing data first and then using add or load methods to get the data to the store. The grid is always expanded after add or load despite startCollapsed:true.

    I tried to get around this somehow by suspending events while adding processed data but nothing worked even calling explicitly groupingFeature.collapseAll() directly after adding did not collapse it unless I refreshed the grid view between adding and collapsing.

    I have no idea right now how to get around this, using a proxy to get that data into the store does not seem a good fit for us in this case.
    I am also confused why add or load would expand the grid or ignore the startCollapsed attribute.

    simplified code version
    Code:
        //the configuration item grid store    
        configStore = Ext.create('Ext.data.Store', {
            model: 'Config',
            groupField: 'label',
            groupDir: 'ASC',
            sorters: [
                      {
                          property: 'hierarchyType',
                          direction: 'DESC'
                      },
                      {
                          property: 'nameDomain',
                          direction: 'ASC'
                      },
                      {
                          property: 'configKeyLabel',
                          direction: 'ASC'
                      },
                      {
                          property: 'statutoryIdentifier',
                          direction: 'ASC'
                      },
                      {
                          property: 'countryCode',
                          direction: 'ASC'
                      },
                      {
                          property: 'startDate',
                          direction: 'DESC'
                      }
                  ]
        });
    
     //the configuration item grid grouping feature
        groupingFeature = Ext.create('Ext.grid.feature.Grouping', {
            groupHeaderTpl: '{name}  : {[getRecordsNumbers(values.rows)]} <input type="image" id="button.{[getRecordClassName(values.name)]}" style="float:right; border:0;" size="15" src="icons/add.png" value="{[getRecordClassName(values.name)]}" onClick="addConfBlock(this);">',
            enableNoGroups: false,
            hideGroupHeader: true,
            startCollapsed: true
        });
    
        //the configuration item grid    
        confGrid = Ext.create('Ext.grid.Panel', {
            store: configStore,
            animCollapse: false,
            forceFit: true,
            border: false,
            autoScroll: true,
            viewConfig: {
                loadMask: false,            
                getRowClass: function (record, index) {
                    if (record.data.isDefaultSystem == true) {
                        return 'defaultSystemRow';
                    }
                    if (!record) {
                        return '';
                    }
                    if (record.data.isDummy == true) {
                        return 'dummyRow';
                    }
                    
                }
            },
            dockedItems: [{
             xtype: 'toolbar',
             dock: 'top',
             cls: 'helpTextToolBar',
             items: [
              {
                xtype: 'tbspacer',
                flex:1
             },{
                xtype: 'button',
                id: 'expandAllTopToggle',
                iconCls: 'expandGroupsIcon',
                iconAlign: 'right',
                text: '',
                handler: function () {
                    groupingFeature.expandAll(); ;                
                }
            }, {
                xtype: 'button',
                id: 'collapseAllTopToggle',
                iconCls: 'collapseGroupsIcon',
                iconAlign: 'right',
                text: '',
                handler: function () {
                    groupingFeature.collapseAll();
                }                        
            }]
            },
            {
             xtype: 'toolbar',
             dock: 'bottom',
             cls: 'helpTextToolBar',
             items: [
             {
                xtype: 'tbspacer',
                flex:1
             },
             {
                xtype: 'button',
                id: 'expandAllBotToggle',
                iconCls: 'expandGroupsIcon',
                iconAlign: 'right',
                text: '',
                handler: function () {
                    groupingFeature.expandAll();
                }
            }, {
                xtype: 'button',
                id: 'collapseAllBotToggle',
                iconCls: 'collapseGroupsIcon',
                iconAlign: 'right',
                text: '',
                handler: function () {
                    groupingFeature.collapseAll();
                }                        
            }]
            }],
            features: [
            groupingFeature,
            {
                ftype: 'rowbody',
                getAdditionalData: function (data, idx, record, orig) {
                    var result = {};
                    if (record.data.isDummy == true) {
                        result = {
                            rowBody: '',
                            rowBodyCls: this.rowBodyCls,
                            rowBodyColspan: this.view.headerCt.getColumnCount() // span all colums
                        };
                    }
                    return result;
                }
            }]
        });
    
    function populateConfigItemBlocks(confItemBlocks){
            //process data and create model record array
    
           //load data array into configStore
           configStore.loadRawData(configs);
           //now the confGrid is expanded despite startCollapsed:true and I have to call "groupingFeature.collapseAll()" which hurts performance
    };

  2. #2
    Sencha Premium Member
    Join Date
    Aug 2009
    Posts
    25
    Vote Rating
    0
    ShadowZero3000 is on a distinguished road

      0  

    Default


    I have noticed the same issue. It does not appear that the 'startCollapsed' functionality is working as intended.

  3. #3
    Sencha User
    Join Date
    Sep 2012
    Posts
    16
    Vote Rating
    2
    expensior is on a distinguished road

      0  

    Default


    any idea how to solve this ?

  4. #4
    Sencha Premium Member
    Join Date
    Sep 2011
    Posts
    23
    Vote Rating
    0
    delusion is on a distinguished road

      0  

    Default


    I am having the same issue, with 4.1.1 and 4.1.2

    Code:
            var groupingFeature = Ext.create('Ext.grid.feature.Grouping', {       
            id: 'groupingFeature'
           ,groupHeaderTpl: '{name} ({rows.length} item{[values.rows.length > 1 ? "s" : ""]})'
           ,ftype: 'groupingsummary'
           ,startCollapsed: true
           });
    
      var data_grid = Ext.create('Ext.grid.Panel', {    
         id: id
        ,autoScroll: true
        ,title:title
        ,store: DStore
        ,columns: getGridColumns()
        ,stateful: false
        ,features: [groupingFeature]
        ,viewConfig: {
            stripeRows: true
            ,forceFit: true
            ,loadMask: false
        }
    });

  5. #5
    Sencha User Daniil's Avatar
    Join Date
    Jun 2010
    Location
    Saint-Petersburg, Russia
    Posts
    974
    Answers
    1
    Vote Rating
    110
    Daniil is a name known to all Daniil is a name known to all Daniil is a name known to all Daniil is a name known to all Daniil is a name known to all Daniil is a name known to all

      0  

    Default


    Hi all,

    Quote Originally Posted by expensior View Post
    I tried to get around this somehow by suspending events while adding processed data but nothing worked even calling explicitly groupingFeature.collapseAll() directly after adding did not collapse it unless I refreshed the grid view between adding and collapsing.
    I think this is related to:
    www.sencha.com/forum/showthread.php?199925

  6. #6
    Sencha User
    Join Date
    Sep 2012
    Posts
    16
    Vote Rating
    2
    expensior is on a distinguished road

      0  

    Default


    The solution in that link does not work for me at all in 4.1

    I noticed while debugging that in ext-all-debug.js in the grouping feature collectData method that the condition

    Code:
    if (me.startCollapsed) {              
                 
                 
                me.startCollapsed = false; 
                collapseGroups = true; 
            }
    me.startCollapsed is always false, even when I set startCollapsed=true or override startCollapsed to true. This means that collapseGroups always remains undefined and later conditions are never met?

    my main issue is still that startCollapsed attribute has no effect on my groups. It works in the documentation example where the store fills its data directly from the configured proxy but when I use store.add([processedData]) it simply ignores the startCollapsed attribute

  7. #7
    Sencha User Daniil's Avatar
    Join Date
    Jun 2010
    Location
    Saint-Petersburg, Russia
    Posts
    974
    Answers
    1
    Vote Rating
    110
    Daniil is a name known to all Daniil is a name known to all Daniil is a name known to all Daniil is a name known to all Daniil is a name known to all Daniil is a name known to all

      0  

    Default


    It looks like a bug. I would suggest you to post a bug report in the Bugs forums.

  8. #8
    Sencha User
    Join Date
    Apr 2013
    Location
    Bulgaria
    Posts
    6
    Vote Rating
    0
    Georgi Yankov is on a distinguished road

      0  

    Default


    I'm using Ext JS 4.0.7

    I use Grouping Grid and startCollapsed = true. Everything works fine, I mean that the groups initially are collapsed. The problem starts when I try to sort by a column as then all of the groups get always collapsed. No matter that I could manually expand several of them, they all would get collapsed.

    This issue bothers me a lot and I wonder if there is a workaround for it?

    Thank you in advance!

  9. #9
    Sencha User
    Join Date
    Dec 2009
    Posts
    80
    Answers
    1
    Vote Rating
    1
    muselmanach is on a distinguished road

      0  

    Default


    i have the same problem. after filtering my store the grouping grid expands all results.
    is there already a solution for this problem?
    need this working very urgent.

    thx
    muselmanach

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