Results 1 to 6 of 6

Thread: TabPanel prevent beforetabchange and tabchange from firing when altering tabpanel

  1. #1

    Cool TabPanel prevent beforetabchange and tabchange from firing when altering tabpanel

    Hi,

    In our application I create a TabPanel and define some event listeners which call the server for new tab content when the tabs are changed.

    I was very surprised to see that constructing the tabpanel actually fires beforetabchange and tabchange. Perhaps this is correct from a strict stand point but technically, the tabpanel is constructed and the active tab is provided in the constructor as well - I'd expect the events to fire when the tab is up and running.

    Further, it seems impossible to distinguish between human interaction and programmed interaction: when I replace the tabs the events fire again - causing an avalange of events to be send to the server and the same tab to be loaded 11 times over....

    Suspending events seems to be the 'stupid' way out as far I understand as it cripples ExtJS itself. So how do I prevent this behavior?

  2. #2

    Exclamation

    Its official, I'm going to programmers hell

    I currently conjured 2 ways to handle the unwanted events. First, the TabPanel has a property called ignoreCounter which I've set to -2, upon each call to tabchange it gets incremented and from 0 onwards the event is handled normally. Why 2? No clue, I guess it is because all tabs are added at once (event 1) and then one of them gets actually activated (event 2). After the initial setup, the counter is ignored.

    Then I have another event where all tabs are removed and new ones are inserted. Here the event triggers make more sense to me as actually the focus shifts multiple times (as I can see when stepping through, it keeps bringing tabs to the front until the original index has been reached). I 'fixed' this by adding a property 'ignoreEvents' to the tabpanel and flipping it to true when I start purging and adding panels.

    The second problem is handled; although I don't get the use of suspendEvents or beginUpdate as the first seems to destroy the functioning of Ext - in contrast of what the name implies - and the second seems to leave the events and resizing enabled.

    However the first problem is bigger for me as the GUI is initially generated in one big JSON array. This means I can't just disable the event handling using my ignoreEvents flag.

    I also searched for an event which fired before the first insert and the last one. For some reason there seems to be no event after the last insert - even 'rendered' seems to fire before the last tab is done firing its events...

  3. #3

    Default

    *shameless bump*

    Nobody in here knows how to solve this? How do other people handle remote lazy loading in tabs when the events fire multiple times?

  4. #4
    Sencha User Condor's Avatar
    Join Date
    Mar 2007
    Location
    The Netherlands
    Posts
    24,245

    Default

    I don't get what you are talking about. Adding tabs doesn't fire beforetabchange and/or tabchange events.

    Example:
    Code:
    var tabpanel = new Ext.TabPanel({
    	activeTab: 0,
    	items: [{
    		title: 'Tab 1'
    	},{
    		title: 'Tab 2'
    	},{
    		title: 'Tab 3'
    	}],
    	buttons: [{
    		text: 'Add',
    		handler: function(){
    			tabpanel.add({
    				title: 'Tab ' + (tabpanel.items.getCount() + 1)
    			});
    		}
    	}],
    	listeners: {
    		beforetabchange: function(tabpanel, newTab, oldTab){
    			if(!oldTab){
    				console.log('Starting with ' + newTab.title);
    			}else{
    				if(newTab){
    					console.log('Changing from ' + oldTab.title + ' to ' + newTab.title);
    				}else{
    					console.log('Ending with ' + oldTab.title);
    				}
    			}
    		},
    		tabchange: function(tabpanel, tab){
    			console.log('Showing ' + tab.title);
    		}
    	}
    });

  5. #5
    Sencha User
    Join Date
    Mar 2011
    Posts
    1

    Default

    This problem appears in the following way:
    1) add several tabs to panel
    2) call setActiveItem(0) method
    The tabchange event fires several times, but it should be only one, isn't it?

  6. #6
    Sencha User
    Join Date
    Jan 2012
    Posts
    11

    Talking

    A long time ago, in a thread far, far away...
    Quote Originally Posted by cyberwizzard View Post
    I was very surprised to see that constructing the tabpanel actually fires beforetabchange and tabchange. Perhaps this is correct from a strict stand point but technically, the tabpanel is constructed and the active tab is provided in the constructor as well - I'd expect the events to fire when the tab is up and running.

    Further, it seems impossible to distinguish between human interaction and programmed interaction: when I replace the tabs the events fire again - causing an avalange of events to be send to the server and the same tab to be loaded 11 times over....

    Suspending events seems to be the 'stupid' way out as far I understand as it cripples ExtJS itself. So how do I prevent this behavior?
    Yeah, I'd expect the "activeTab" param passed into the constructor not to fire events either. But it sure does, doesn't it?

    I came to the same solution as Condor's, though from his post, I'm not sure he knew he was providing it.

    if(!oldTab){...

    The beforetabchange function takes in three params -- this, new tab item to display, and current tab item being displayed. I tried checking .rendered first, but the TabPanel is considered rendered before the constructor's activeTab is made active.

    Try this to watch what's going on... Take out the "if (null != tabPanelCurrent)" to have it ask every time. If you Cancel before tabPanelCurrent is selected, no tabs are active when the tabPanel comes live on the page.

    Code:
            var tabDataSources = new Ext.TabPanel({
                id:'tabTemp',
                region:'center',
                activeTab:0,
                listeners: {
                    beforetabchange:function(tabPanelThis, componentNew, componentCurrent){
                        var bReturn = true;
                        // add back to ignore activeTab call
                        //if (null != componentCurrent)  { 
                            bReturn = confirm('change tabs?');
                        //}
                        return bReturn;
                    }
                },
                items: [
                    { title:'tab0',html:'tab0' },
                    { title:'tab1',html:'tab1' }
                ]
    
            });
    I think that ought work when you're blasting tabs and starting over too, since you'll no longer have an active tab. I'm about to do the same thing, so we'll see, I guess.
    Last edited by rufwork; 7 Feb 2012 at 8:51 AM. Reason: poorly named params

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •