You found a bug! We've classified it as EXTJS-10606 . We encourage you to continue the discussion and to find an acceptable workaround while we work on a permanent fix.
  1. #1
    Sencha User
    Join Date
    Jan 2013
    Posts
    2
    Vote Rating
    0
    Alokym is on a distinguished road

      0  

    Default Header highlight of a grid is not removed if store is sorted by a hidden field

    Header highlight of a grid is not removed if store is sorted by a hidden field


    REQUIRED INFORMATION


    Ext version tested:
    • Ext 4.1.3.548
    Browser versions tested against:
    • IE8
    • FF22 (firebug installed)
    DOCTYPE tested against:
    • html5
    • html4 strict
    Description:
    • Sort highlight of a previous sort is not removed if store is sorted by a hidden field
    Steps to reproduce the problem:
    • Create a store
    • Configure a grid to display store data without one field (can be any field)
    • Configure a button to sort a store by a field which is not displayed in grid
    • Sort a grid by clicking on any header
    • Press a button to sort a store by a field which is not represented in a grid
    The result that was expected:
    • Highlight of a header which was a sort field previously is removed after clicking a button
    The result that occurs instead:
    • Highlight of a header which was a sort field previously isn't removed after clicking a button (However, store sorts correctly)
    Test Case:


    Code:
        Ext.create('Ext.data.Store', {
        storeId:'simpsonsStore',
        fields:['name', 'email', 'phone', 'hidden'],
        data:{'items':[
            { 'name': 'Lisa',  "email":"lisa@simpsons.com",  "phone":"555-111-1224", "hidden":"2"  },
            { 'name': 'Bart',  "email":"bart@simpsons.com",  "phone":"555-222-1234", "hidden":"3"},
            { 'name': 'Homer', "email":"home@simpsons.com",  "phone":"555-222-1244",  "hidden":"1"},
            { 'name': 'Marge', "email":"marge@simpsons.com", "phone":"555-222-1254",  "hidden":"4"}
        ]},
        proxy: {
            type: 'memory',
            reader: {
                type: 'json',
                root: 'items'
            }
        }
    });
    
    
    Ext.create('Ext.grid.Panel', {
        id: 'myPanel', 
        title: 'Simpsons',
        store: Ext.data.StoreManager.lookup('simpsonsStore'),
        columns: [
            { text: 'Name',  dataIndex: 'name' },
            { text: 'Email', dataIndex: 'email', flex: 1 },
            { text: 'Phone', dataIndex: 'phone' }/*,
            { text: 'h', dataIndex: 'hidden' }
            Uncomment this block of code to see a fidden paramter on the grid */
        ],
        height: 200,
        width: 400,
        renderTo: Ext.getBody(),
        fbar : {
            items : {
                xtype : "button",
                id : "adsads",
                text : "Sort by hidden parameter", 
                listeners : {
                    click : {
                        fn : function(a, b, c, d) {
                            var store = Ext.data.StoreManager.lookup('simpsonsStore').sort('hidden', 'ASC');
                        }
                    }
                }
            }
        }
    });
    Video:
    • attached
    See this URL for live test case: http://jsfiddle.net/Alokym/kuTKq/




    Debugging already done:
    • none
    Operating System:
    • Win 7
    If any additional information is needed - please let me know. Also, please let me know if the issu described above is not a bug. Thanks.

    *EDIT BY SLEMMON
    Observed in 4.1.0 +
    Attached Files
    Last edited by slemmon; 9 Jul 2013 at 11:53 AM. Reason: additional test notes

  2. #2
    Sencha - Support Team slemmon's Avatar
    Join Date
    Mar 2009
    Location
    Boise, ID
    Posts
    6,033
    Vote Rating
    213
    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 slemmon has much to be proud of

      0  

    Default


    Thanks for the report! I have opened a bug in our bug tracker.

  3. #3
    Sencha User
    Join Date
    Jan 2013
    Posts
    2
    Vote Rating
    0
    Alokym is on a distinguished road

      0  

    Default


    I've found a possible cause of this issue. In Ext.grid.header.Container class there is a method called setSortState. Here is body of this method:
    Code:
    setSortState: function(){
            var store   = this.up('[store]').store,
                
                
                first = store.getFirstSorter(),
                hd;
    
    
            if (first) {
                hd = this.down('gridcolumn[dataIndex=' + first.property  +']');
                if (hd) {
                    hd.setSortState(first.direction, false, true);
                }
            } else {
                this.clearOtherSortStates(null);
            }
    }
    In this case, the first(which is first sorter) variable exists and hd(which is certain grid column) doesn't exists. As a result, clearOtherSortStates method isn't called. However, expected behavior is that other sort states should be cleared. The simplest working solution will be:

    Code:
    setSortState: function(){
            var store   = this.up('[store]').store,
                
                
                first = store.getFirstSorter(),
                hd;
    
    
            if (first) {
                hd = this.down('gridcolumn[dataIndex=' + first.property  +']');
                if (hd) {
                    hd.setSortState(first.direction, false, true);
                } else {
                    this.clearOtherSortStates(null);
                }
            } else {
                this.clearOtherSortStates(null);
            }
    }
    However, it seems to better to write in this way:
    Code:
    setSortState: function(){
           var store   = this.up('[store]').store,
               
               
               first = store.getFirstSorter(),
               hd;
    
    
           if (first) {
               hd = this.down('gridcolumn[dataIndex=' + first.property  +']');
               if (hd) {
                   hd.setSortState(first.direction, false, true);
               }
           } 
           
           if (!first || !hd) {
              this.clearOtherSortStates(null);
           }
    }
    Please notice that the last two code snippets are absolutely identical from the logical point of view.

    This code solves a bug described above (I've retested that).
    If there are any questions or better suggestions, please let me know. Thanks.

Thread Participants: 1

Tags for this Thread