[OPEN-1461] Why does Store.datachanged trigger refreshing of GridView headers?

[renku]

From the source of GridView.js:

    onDataChange : function(){
        this.refresh(true); // "true" was added in Ext 3.3
        this.updateHeaderSortState();
        this.syncFocusEl(0);
    },

    refresh : function(headersToo) {
        this.fireEvent('beforerefresh', this);
        this.grid.stopEditing(true);

        var result = this.renderBody();
        this.mainBody.update(result).setWidth(this.getTotalWidth());
        if (headersToo === true) {
            this.updateHeaders();
            this.updateHeaderSortState();
        }
        this.processRows(0, true);
        this.layout();
        this.applyEmptyText();
        this.fireEvent('refresh', this);
    }

This means that each time the store is loaded/filtered/sorted, GridView header is completely re-rendered. But I don't see how grid header could be effected by those changes in store.

I'm currently trying to get my FilterRow plugin to fully work with Ext 3.3. The plugin inserts some form fields into grid header, but the fact that each filtering of the store re-creates grid header makes my task quite hard. I have been coding circles around this thing, but correctly re-inserting and re-focusing the fields and pleasing IE at the same time hasn't been successful so far.

But when I simply override GridView.onDataChange:

    gridView.onDataChange = function(){
        this.refresh(); // removed "true"
        this.updateHeaderSortState();
        this.syncFocusEl(0);
    };

then all my problems seem to disappear.

So my question is: Is there some strong argument for refreshing grid headers after store "datachanged" event?

[renku]

As nobody seems to have any opinions on this, I'll assume it's a bug (not feature) in Ext and override it with a fix in my plugin.

[edspencer]

This must have been required to make PivotGrid work. If you're not seeing any side effects with an override then I'd go for that...

[renku]

You are correct. PivotGrid fails to render its headers when I take the refresh(true) away.

For now I'm still staying with the override, as that's the only working solution I currently have (better to have the plugin working only with plain GridPanel than not working at all).

Thanks for the clarification.

[edspencer]

Glad that helps. We're doing a lot of restructuring of Grid code in Ext JS 4 which should alleviate problems like these

[ExTriqui]

I found a related bug.
The headers won't be renderer at all (cause onDataChange is not fired) when the store is created like this:

/*!
 * Ext JS Library 3.3.1
 * Copyright(c) 2006-2010 Sencha Inc.
 * licensing@sencha.com
 * http://www.sencha.com/license
 */
Ext.onReady(function() {
    var customData = {
    "rows": [{
        "id": 1,
        "product": "Ladder",
        "city": "London",
        "state": "NY",
        "quantity": 5568,
        "value": 17,
        "month": 11,
        "quarter": 3,
        "year": 2010,
        "person": "Jamie Avins"
    },
    {
        "id": 2,
        "product": "Spanner",
        "city": "San Francisco",
        "state": "TX",
        "quantity": 7639,
        "value": 43,
        "month": 4,
        "quarter": 3,
        "year": 2010,
        "person": "Ed Spencer"
    }]};

    var SaleRecord = Ext.data.Record.create([
        {name: 'person',   type: 'string'},
        {name: 'product',  type: 'string'},
        {name: 'city',     type: 'string'},
        {name: 'state',    type: 'string'},
        {name: 'month',    type: 'int'},
        {name: 'quarter',  type: 'int'},
        {name: 'year',     type: 'int'},
        {name: 'quantity', type: 'int'},
        {name: 'value',    type: 'int'}
    ]);
    
    var myStore = new Ext.data.Store({
        //url: 'simple.json',
        //autoLoad: true,
        data: customData,
        reader: new Ext.data.JsonReader({
            root: 'rows',
            idProperty: 'id'
        }, SaleRecord)
    });
    
    var pivotGrid = new Ext.grid.PivotGrid({
        title     : 'PivotGrid example',
        width     : 800,
        height    : 259,
        renderTo  : 'docbody',
        store     : myStore,
        aggregator: 'sum',
        measure   : 'value',
        
        viewConfig: {
            title: 'Sales Performance'
        },
        
        leftAxis: [
            {
                width: 80,
                dataIndex: 'person'
            },
            {
                width: 90,
                dataIndex: 'product'
            }
        ],
        
        topAxis: [
            {
                dataIndex: 'year'
            },
            {
                dataIndex: 'city'
            }
        ]
    });
});

Example modified from -> http://dev.sencha.com/deploy/dev/exa...grid/simple.js

[edspencer]

Thanks, I've created a bug ticket for this