Hybrid View

  1. #1
    Ext User
    Join Date
    Aug 2010
    Posts
    2
    Vote Rating
    0
    shadesdude is on a distinguished road

      0  

    Default Issues with multiple livegrids in a Tabpanel

    Issues with multiple livegrids in a Tabpanel


    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.

  2. #2
    Sencha User darthwes's Avatar
    Join Date
    Mar 2010
    Posts
    633
    Vote Rating
    -13
    darthwes can only hope to improve

      0  

    Default


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

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

  3. #3
    Ext User
    Join Date
    Aug 2010
    Posts
    2
    Vote Rating
    0
    shadesdude is on a distinguished road

      0  

    Default


    Wow I figured it out...

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

Similar Threads

  1. Ext.Ajax.request Issues when called multiple times in a page
    By tdmitch in forum Ext 3.x: Help & Discussion
    Replies: 4
    Last Post: 26 May 2010, 2:25 PM
  2. Replies: 10
    Last Post: 20 May 2009, 10:09 AM
  3. TabPanel hideMode visiblity issues
    By scoobasteve1982 in forum Ext 2.x: Help & Discussion
    Replies: 1
    Last Post: 19 Nov 2008, 7:08 PM
  4. More GridPanel in TabPanel Issues
    By john_vaudin in forum Ext 2.x: Help & Discussion
    Replies: 4
    Last Post: 23 May 2008, 9:22 AM
  5. Performance Issues with Multiple Grids and Tabs
    By prophet in forum Ext 1.x: Help & Discussion
    Replies: 14
    Last Post: 1 Jun 2007, 3:55 AM

Thread Participants: 1

Tags for this Thread

film izle

hd film izle

film sitesi

takipci kazanma sitesi

takipci kazanma sitesi

güzel olan herşey

takipci alma sitesi

komik eğlenceli videolar