[CLOSED] GridView doRender error during reconfigure after reconfiguring other grid

**devtig** · 3 Dec 2010 4:03 AM

Ext version tested:

Ext 3.0.0
Ext 3.1.1
Ext 3.2.1
Ext 3.3.1

Adapter used:

ext

css used:

only default ext-all.css

Browser versions tested against:

FF 3.6.12 (firebug 1.6.0 installed)

Operating System:

WinXP Pro

Description:

We have Ext.grid.GridView A configured explicitly for Ext.grid.GridPanel A and Ext.grid.GridView B configured explicitly for Ext.grid.GridPanel B. All ok.
We reconfigure Ext.grid.GridPanel A on metachange. All ok.
We reconfigure Ext.grid.GridPanel B on metachange with B having more columns than A then an error occurs during reconfigure.

Test Case:

Code:

<html>
    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
        <title id='title'>Title</title>
        <link rel="stylesheet" type="text/css" href="../../resources/css/ext-all.css" />
        <script type="text/javascript" src="../../adapter/ext/ext-base.js"></script>
        <script type="text/javascript" src="../../ext-all-debug.js"></script>
        <script type="text/javascript">
        Ext.BLANK_IMAGE_URL = '../../resources/images/default/s.gif';
        Ext.onReady(function(){
 
Ext.ns('Ext.ux');
Ext.ux.RelationGridPanel = Ext.extend(Ext.grid.GridPanel, {
    columns: [{dataIndex: 'dummy', header: 'dummy', sortable: false, width: 100}],
    view: new Ext.grid.GridView(),
    initComponent: function() {
        this.store=new Ext.data.Store({
            url: this.initialConfig.storeUrl,
            reader: new Ext.data.JsonReader({root: 'data', fields: ['dummy']}),
            autoLoad: false,
            listeners: {
                metachange: function(store, meta) {
                    //http://blog.nextlogic.net/2009/04/dynamic-columns-in-ext-js-grid.html
                    //http://erhanabay.com/2009/01/29/dynamic-grid-panel-for-ext-js/
                    //console.log('metachange:', arguments);
                    this.reconfigure(
                        store,
                        new Ext.grid.ColumnModel({
                            columns: meta.columns,
                            defaultSortable: true
                        })
                    );
                },
                scope: this
            }
        });
        Ext.ux.RelationGridPanel.superclass.initComponent.call(this);
    }
});
Ext.reg('relationgrid', Ext.ux.RelationGridPanel);

new Ext.Viewport({
    layout: 'fit',
    renderTo: Ext.getBody(),
    items:[
        {
            xtype: 'tabpanel',
            activeTab: 0,
            items: [
                {
                    xtype: 'relationgrid',
                    storeUrl: 'test.js',
                    title: 'Tab 1'
                },{
                    xtype: 'relationgrid',
                    storeUrl: 'test2.js',
                    title: 'Tab 2'
                }
            ],
            listeners: {
                tabchange: function(TabPanel, newTab) {
                    //console.log('reload store');
                    newTab.getStore().reload();
                }
            }
        }
    ]
});
 
        }); //end onReady
        </script>
 
    </head>
    <body>
    </body>
</html>

Steps to reproduce the problem:

Go to tab2
Go to tab1

The result that was expected:

Grid reload on tabchange

The result that occurs instead:

Error on line 46542 of ext-all-debug.js in Ext.grid.GridView's doRender

Screenshot or Video:

attached

Debugging already done:

If you define no explicit view then no error.
In 47280 in ext-all-debug it seems that 'this' is referring to the view of the previous reconfigured grid.
47279 renderRows : function(startRow, endRow) {
47280 var grid = this.grid,
47281 store = grid.store,
47282 stripe = grid.stripeRows,
47283 colModel = grid.colModel,
47284 colCount = colModel.getColumnCount(),
47285 rowCount = store.getCount(),
47286 records;

**devtig** · 3 Dec 2010 5:52 AM

Code:

<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>test</title>
<link rel="stylesheet" type="text/css" href="http://extjs.cachefly.net/ext-3.3.1/resources/css/ext-all.css"/>
<script type="text/javascript" src="http://extjs.cachefly.net/ext-3.3.1/adapter/ext/ext-base.js"></script>
<script type="text/javascript" src="http://extjs.cachefly.net/ext-3.3.1/ext-all-debug.js"></script>
<script type="text/javascript">
Ext.onReady(function() {

Ext.ns('Ext.ux');
Ext.ux.RelationGridPanel = Ext.extend(Ext.grid.GridPanel, {
    columns: [{dataIndex: 'dummy', header: 'dummy', sortable: false, width: 100}],
    view: new Ext.grid.GridView(),
    store: new Ext.data.Store(),
    initComponent: function() {
        Ext.ux.RelationGridPanel.superclass.initComponent.call(this);
    }
});
Ext.reg('relationgrid', Ext.ux.RelationGridPanel);

var vp=new Ext.Viewport({
    layout: 'fit',
    renderTo: Ext.getBody()
});
vp.add([{
        xtype: 'tabpanel',
        activeTab: 0,
        items: [
            {
                xtype: 'relationgrid',
                title: 'Tab 1'
            },{
                xtype: 'relationgrid',
                title: 'Tab 2'
            },{
                xtype: 'relationgrid',
                title: 'Tab 3'
            },{
                xtype: 'relationgrid',
                title: 'Tab 4'
            }
        ],
        listeners: {
            tabchange: function(TabPanel, newTab) {
                var grid1=vp.items.items[0].items.items[0];
                var grid2=vp.items.items[0].items.items[1];
                var grid3=vp.items.items[0].items.items[2];
                var grid4=vp.items.items[0].items.items[3];
                console.log('grid1:', grid1.title, 'does equal', grid1.view.grid.title);
                console.log('grid2:', grid2.title, 'does not equal', grid2.view.grid.title);
                console.log('grid3:', grid3.title, 'does not equal', grid3.view.grid.title);
                console.log('grid4:', grid4.title, 'does not equal', grid4.view.grid.title);
            }
        }
}]);
 vp.doLayout();

});
</script>
</head>
</html>

Check out what the console shows!!!
grid1: Tab 1 does equal Tab 1
grid2: Tab 2 does not equal Tab 1
grid3: Tab 3 does not equal Tab 1
grid4: Tab 4 does not equal Tab 1

It seems that the grid of the view of grid2 is not grid2, but grid1! A better title for the Bug Report would be. When multiple instances are created of a class that is an extension of the Ext.grid.GridPanel and the extension has an explicitly defined view, then all those instances have a property view, which has a property grid that refers to the first instance of the class.

FF 3.6.12 and Chrome

**Condor** · 3 Dec 2010 6:09 AM

Do NOT put complex objects in the prototype. Remember that these objects are shared by all instances!

You need to specify the columns, the view and the store inside the initComponent method.

**devtig** · 3 Dec 2010 6:10 AM

Thanks for the lesson. I see now.

I changed my extension to this and then all grid.view.grid match.

Code:

Ext.ns('Ext.ux');
Ext.ux.RelationGridPanel = Ext.extend(Ext.grid.GridPanel, {
    initComponent: function() {
        this.columns=[{dataIndex: 'dummy', header: 'dummy', sortable: false, width: 100}];
        this.view=new Ext.grid.GridView();
        this.store=new Ext.data.Store();

        Ext.ux.RelationGridPanel.superclass.initComponent.call(this);
    }
});
Ext.reg('relationgrid', Ext.ux.RelationGridPanel);

[CLOSED] GridView doRender error during reconfigure after reconfiguring other grid

Thread Tools

Search Thread

Display

[CLOSED] GridView doRender error during reconfigure after reconfiguring other grid

[CLOSED] GridView doRender error during reconfigure after reconfiguring other grid

Super strange

Super strange

Similar Threads

[FNR] OutOfBoundsException in GridView:doRender

[CLOSED][3.0rc2] Bug in GridView#doRender

[FIXED] [1.1.1] GridView.doRender() possible implementation error

Method doRender of gridView