Issues with multiple livegrids in a Tabpanel

[shadesdude]

I wasn't sure if this belonged here or in user Extensions so move it if need be.

I have a livegrid in a Tabpanel that works fine but as soon as I extend it to more than one livegrid it crashes out.

Here is my code sorry it's kind of long

			Ext.BLANK_IMAGE_URL = 'Images/s.gif';

			var BufferView = new Ext.ux.grid.livegrid.GridView({
				nearLimit : 100,
				loadMask  : {
					msg :  "Buffering. Please wait..."
				}
			});
					
            GRIDNAME1.Grid = Ext.extend(Ext.ux.AutoGridPanel,{
				initComponent:function() {
				var config = {
					title:"Title1",

					loadMask: {
						msg : "Loading..."
					},
					height: 400,
					width: "auto",
					stripeRows : true,
					layout: "fit",
					autoScroll: true,
					deferRowRender: true,
					
					autoSave: true,
					saveMetaUrl: "saveconfig.php",                
					
					store: new Ext.ux.grid.livegrid.Store({
						autoLoad : true,
						bufferSize : 200,
						proxy: new Ext.data.HttpProxy({
							url: "load.php"
						}),
	 
						reader: new Ext.data.JsonReader(
							{root: "rows", id: "id"}
						)
					}),
					selModel : new Ext.ux.grid.livegrid.RowSelectionModel(),
					view     : BufferView,
					bbar     : new Ext.ux.grid.livegrid.Toolbar({
						view        : BufferView,
						displayInfo : true
					})
				};
				Ext.apply(this, Ext.apply(this.initialConfig, config));
				GRIDNAME1.Grid.superclass.initComponent.apply(this, arguments);
		 
				this.on({
					afterlayout:{scope:this, single:true, fn:function() {
						this.store.reload({params: {meta: true, view: 'GRIDNAME1', DataSource: 'sdfsdf'}});
					}}
				});
				}
			});
			
			Ext.reg("GRIDNAME1", GRIDNAME1.Grid);
			
			var BufferView = new Ext.ux.grid.livegrid.GridView({
				nearLimit : 100,
				loadMask  : {
					msg :  "Buffering. Please wait..."
				}
			});
					
            GRIDNAME2.Grid = Ext.extend(Ext.ux.AutoGridPanel,{
				initComponent:function() {
				var config = {
					title:"Title2",

					loadMask: {
						msg : "Loading..."
					},
					height: 400,
					width: "auto",
					stripeRows : true,
					layout: "fit",
					autoScroll: true,
					deferRowRender: true,
					
					autoSave: true,
					saveMetaUrl: "saveconfig.php",                
					
					store: new Ext.ux.grid.livegrid.Store({
						autoLoad : true,
						bufferSize : 200,
						proxy: new Ext.data.HttpProxy({
							url: "load.php"
						}),
	 
						reader: new Ext.data.JsonReader(
							{root: "rows", id: "id"}
						)
					}),
					selModel : new Ext.ux.grid.livegrid.RowSelectionModel(),
					view     : BufferView,
					bbar     : new Ext.ux.grid.livegrid.Toolbar({
						view        : BufferView,
						displayInfo : true
					})
				};
				Ext.apply(this, Ext.apply(this.initialConfig, config));
				GRIDNAME2.Grid.superclass.initComponent.apply(this, arguments);
		 
				this.on({
					afterlayout:{scope:this, single:true, fn:function() {
						this.store.reload({params: {meta: true, view: 'GRIDNAME2', DataSource: 'dfgfd'}});
					}}
				});
				}
			});
			
			Ext.reg("GRIDNAME2", GRIDNAME2.Grid);
			
			var BufferView = new Ext.ux.grid.livegrid.GridView({
				nearLimit : 100,
				loadMask  : {
					msg :  "Buffering. Please wait..."
				}
			});
					
            GRIDNAME3.Grid = Ext.extend(Ext.ux.AutoGridPanel,{
				initComponent:function() {
				var config = {
					title:"Title3",

					loadMask: {
						msg : "Loading..."
					},
					height: 400,
					width: "auto",
					stripeRows : true,
					layout: "fit",
					autoScroll: true,
					deferRowRender: true,
					
					autoSave: true,
					saveMetaUrl: "saveconfig.php",                
					
					store: new Ext.ux.grid.livegrid.Store({
						autoLoad : true,
						bufferSize : 200,
						proxy: new Ext.data.HttpProxy({
							url: "load.php"
						}),
	 
						reader: new Ext.data.JsonReader(
							{root: "rows", id: "id"}
						)
					}),
					selModel : new Ext.ux.grid.livegrid.RowSelectionModel(),
					view     : BufferView,
					bbar     : new Ext.ux.grid.livegrid.Toolbar({
						view        : BufferView,
						displayInfo : true
					})
				};
				Ext.apply(this, Ext.apply(this.initialConfig, config));
				GRIDNAME3.Grid.superclass.initComponent.apply(this, arguments);
		 
				this.on({
					afterlayout:{scope:this, single:true, fn:function() {
						this.store.reload({params: {meta: true, view: 'GRIDNAME3', DataSource: 'shsdh='}});
					}}
				});
				}
			});
			
			Ext.reg("GRIDNAME3", GRIDNAME3.Grid);
			Ext.onReady(function() {
	 
		// create and show window
		var win = new Ext.Panel({
			renderTo: 'loaded',
			width:'auto',
			height:400,
			layout:'fit',
			items:[{
				xtype:'tabpanel',
				defaults:{layout:'fit'},
				activeItem:0,
				items: [{
					id:'tab0',
					xtype:'GRIDNAME1',
					autoScroll:true
				},{
					id:'tab1',
					xtype:'GRIDNAME2',
					autoScroll:true
				},{
					id:'tab2',
					xtype:'GRIDNAME3',
					autoScroll:true
				}]
			}],
			tbar: new Ext.Toolbar({
				items: [{
						text:'<b>Results...</b>'
					}]
			})
		});
		
	 
	});

and the specific error is occurring here in ext-all-debug.js

fire : function(){
        var me = this,
            listeners = me.listeners,
            len = listeners.length,
            i = 0,
            l;

        if(len > 0){
            me.firing = TRUE;
            var args = Array.prototype.slice.call(arguments, 0);
            for (; i < len; i++) {
                l = listeners[i];
                // Fails here with "this.loading" is null or not an object on the second time through the loop.
                if(l && l.fireFn.apply(l.scope || me.obj || window, args) === FALSE) { 
                    return (me.firing = FALSE); 
                }
            }
        }
        me.firing = FALSE;
        return TRUE;
    }

The intent is to not instantiate until the tab has been selected and then load. Additionally
if I add a text item in the tabpanel position 0 then the last data source will load correctly.
It's pretty puzzling but I'm pretty new to this.

I think it's because of things that aren't being set in onBeforeLoad in livegrid but trying to set loading to be true didn't help so I'm out of ideas.

    onBeforeLoad : function(store, options)
    {
        var proxy = store.proxy;
        if (proxy.activeRequest && proxy.activeRequest[Ext.data.Api.actions.read]) {
            proxy.getConnection().abort(proxy.activeRequest[Ext.data.Api.actions.read]);
        }
        this.fireEvent('abortrequest', store, options);

        this.loading        = true; // This didn't fix the error
        this.isBuffering    = false;
        this.isPreBuffering = false;

        options.params = options.params || {};

        var apply = Ext.apply;

        apply(options, {
            scope    : this,
            callback : function(){
                this.reset(false);
            },
            suspendLoadEvent : false
        });

        apply(options.params, {
            start    : 0,
            limit    : this.ds.bufferSize
        });

        return true;
    },

I ran the trace in IE6, which I suspect I have issues with the invisible elements since I don't
see any data load. In Chrome I get the error Cannot call method 'setDisabled' of undefined,
but I assume it is stemming from the same issue. In all honesty it feels like I am doing this
incorrectly so any suggestions are appreciated.

Wow sorry that got so long.

[darthwes]

grid.on({
  afterlayout:{scope:this, single:true, fn:function() {
    this.store.reload({params: {meta: true, view: 'GRIDNAME1', DataSource: 'sdfsdf'}});
  }}
});

Works? That's not what the documentation for on/addListener says...Wierd...

Not that there's anything wrong with using whatever works for you, I'm just puzzled by this syntax.

Sounds like you're hitting problems where you're trying to reference items that are not yet instantiated.

{
  xtype: 'grid',
  sm: ...
  store: ...
}

Is a json literal. Until ExtJS instantiates a GridPanel using that literal, it's not possible to treat it as if it were an ExtJS grid.
I have this problem from time to time, I usually work it out by changing the order in which I'm declaring the pieces so that they will be instantiated when I want them. I hope that helps, I haven't been able to sit down with your code, yet, just throwing some info over the wall first.

[shadesdude]

Wow I figured it out...

bbar     : new Ext.ux.grid.livegrid.Toolbar({
						view        : BufferView,
						displayInfo : true
					})

It was conflicting between the BufferView. I missed the renaming on it so it would never instantiate that element of the class.

Thanks for helping me think about it differently.