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
Code:
			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
Code:
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.

Code:
    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.