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

      0  

    Default Collapse for GroupingFeature is broken

    Collapse for GroupingFeature is broken


    I migrated my running application from 4.1 to 4.2.

    In my case I have a grouped grid and a custom groupHeaderTpl.

    When I collapse single groups or use a button that calls collapseAll the grouping is totally broken and all headers are undefined.

    I already debugged this and the problem is in the groupingFeature getHeaderNode method returning a null header. The reason for this is that when calling collapse eventually a call in doCollapseExpand is made to me.dataSource.onRefresh(); at this point the div with the real header is replaced by a placeholder div.
    So when getHeadeNode eventually wants to get the header it makes a Ext.get call to an id "gridview-1043-hd-[groupname]" but the element does not exist at this point as it was replaced with the placeholder and for whatever reason is "gridview-1043-hd-undefined". The call returns null and the layout is broken.

  2. #2
    Sencha - Support Team slemmon's Avatar
    Join Date
    Mar 2009
    Location
    Boise, ID
    Posts
    5,470
    Vote Rating
    202
    slemmon has much to be proud of slemmon has much to be proud of slemmon has much to be proud of slemmon has much to be proud of slemmon has much to be proud of slemmon has much to be proud of slemmon has much to be proud of slemmon has much to be proud of

      0  

    Default


    I'm not seeing that issue in 4.1.3, 4.2, or 4.2.1 Beta with the below test case:
    If you test with this code are you seeing the issue? If so, can you let us know what browser(s) and OS you're seeing the issue on?

    Code:
    var store = Ext.create('Ext.data.Store', {
        storeId:'employeeStore',
        fields:['name', 'seniority', 'department'],
        groupField: 'department',
        data: {'employees':[
            { "name": "Michael Scott",  "seniority": 7, "department": "Management" },
            { "name": "Dwight Schrute", "seniority": 2, "department": "Sales" },
            { "name": "Jim Halpert",    "seniority": 3, "department": "Sales" },
            { "name": "Kevin Malone",   "seniority": 4, "department": "Accounting" },
            { "name": "Angela Martin",  "seniority": 5, "department": "Accounting" }
        ]},
        proxy: {
            type: 'memory',
            reader: {
                type: 'json',
                root: 'employees'
            }
        }
    });
    
    
    Ext.create('Ext.grid.Panel', {
        title: 'Employees',
        store: Ext.data.StoreManager.lookup('employeeStore'),
        columns: [
            { text: 'Name',     dataIndex: 'name' },
            { text: 'Seniority', dataIndex: 'seniority' }
        ],
        features: [{ftype:'grouping', id: 'grouping'}],
        width: 200,
        height: 275,
        renderTo: Ext.getBody()
        , tbar: [{
            text: 'Collapse All'
            , handler: function (btn) {
                btn.up('gridpanel').getView().getFeature('grouping').collapseAll();
            }
        }, {
            text: 'Expand All'
            , handler: function (btn) {
                btn.up('gridpanel').getView().getFeature('grouping').expandAll();
            }
        }]
    });

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

      0  

    Default


    Another issue concerning the grouping feature I noticed is that since replacing 4.1.3 with 4.2 is that my grouped grid does not start collapsed anymore. In 4.1.3 there were problem with this startCollapsed functionality that I fixed by adding.
    These problems were caused by the data not being initially loaded into the store and instead added to the store once the ajax repsonse containing the data was loaded and manipulated. Adding to the store automatically added the records in expanded state regardless of startCollapsed..
    confGrid.getView().on({ 'beforerefresh': function(view,eOpts) {
    return false;
    },
    single: true
    });
    This used to make sure that the grid does not automatically expand groups if data is added after the grid was rendered..

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

      0  

    Default


    I think I might have found the cause, it is the groupField that I am using.

    This is the field I am grouping on

    Code:
     
      {
                        name : 'label',
                        type : 'string',
                        convert : function(v, record){
                            return codeLabelBlockMap.get(record.data.className);
                      }
    This has worked in 4.1 but in 4.2 it does not. When I change the field to another it groups fine on collapse.

    It seems to me that the convert method is the issue here. I can use className as groupField instead and then in the groupHeaderTpl I use a getName({[values.name]}) function which does the same as the convert method now to get the real label. I prefered the old way...

    When I modify your testcase this way I can reproduce the problem
    Code:
     
    function getDepartment(id){
        switch(id){
            case 1 : return 'Management';break;
            case 2 : return 'Accounting';break;
            case 3 : return 'Finance';break;
        }
    }
    
    Ext.define('Employee', {
        extend : 'Ext.data.Model',
        fields:[{
            name:'name',
            type:'string'
        },
        {
            name:'departmentId',
            type:'int',
        },
        {
            name:'department',
            type:'string',
            convert:function(v,record){
                return getDepartment(record.data.departmentId);
            }
        },
        {
            name:'seniority',
            type:'int'
        }
        ]
    });
    
    var store = Ext.create('Ext.data.Store', {
        storeId:'employeeStore',
        model:'Employee',
        groupField: 'department',
        data: {'employees':[
            { "name": "Michael Scott",  "seniority": 7, "departmentId": 1 },
            { "name": "Dwight Schrute", "seniority": 2, "departmentId": 2 },
            { "name": "Jim Halpert",    "seniority": 3, "departmentId": 2},
            { "name": "Kevin Malone",   "seniority": 4, "departmentId": 2 },
            { "name": "Angela Martin",  "seniority": 5, "departmentId": 3 }
        ]},
        proxy: {
            type: 'memory',
            reader: {
                type: 'json',
                root: 'employees'
            }
        }
    });
    
    
    Ext.create('Ext.grid.Panel', {
        title: 'Employees',
        store: Ext.data.StoreManager.lookup('employeeStore'),
        columns: [
            { text: 'Name',     dataIndex: 'name' },
            { text: 'Seniority', dataIndex: 'seniority' }
        ],
        features: [{ftype:'grouping', id: 'grouping'}],
        width: 200,
        height: 275,
        renderTo: Ext.getBody()
        , tbar: [{
            text: 'Collapse All'
            , handler: function (btn) {
                btn.up('gridpanel').getView().getFeature('grouping').collapseAll();
            }
        }, {
            text: 'Expand All'
            , handler: function (btn) {
                btn.up('gridpanel').getView().getFeature('grouping').expandAll();
            }
        }]
    });
    Browser: Firefox
    OS: Windowns 7

  5. #5
    Sencha - Support Team slemmon's Avatar
    Join Date
    Mar 2009
    Location
    Boise, ID
    Posts
    5,470
    Vote Rating
    202
    slemmon has much to be proud of slemmon has much to be proud of slemmon has much to be proud of slemmon has much to be proud of slemmon has much to be proud of slemmon has much to be proud of slemmon has much to be proud of slemmon has much to be proud of

      0  

    Default


    Looks like that's been reported as a bug now.
    http://www.sencha.com/forum/showthread.php?260888

Thread Participants: 1