Page 1 of 2 12 LastLast
Results 1 to 10 of 19

Thread: TabPanel listener doesn't seem to be listening

  1. #1

    Default TabPanel listener doesn't seem to be listening

    Hi all,

    I'm new to both extjs and the site, but having searched the forum I can find nothing to explain the problem I am having. I have a layout based on the Complex example, with a TabPanel. On the first tab I have a click listener that should fire when the tab is clicked, but nothing is happening. Change the type of listener to activate and it works as expected. Any help would be much appreciated.

    Thanks in advance for your replies

    PHP Code:
    new Ext.TabPanel({
                        
    region:'center',
                        
    deferredRender:false,
                        
    activeTab:0,
                        
    items:[{
                            
    contentEl:'center1',
                            
    title'Refresh Messages',
                            
    autoScroll:true,
                            
    autoLoad:'index.cfm?fuseaction=forum.messages',
                            
    listeners: {click refreshTab}
                           },{
                            
    contentEl:'center2',
                            
    title'Start New Topic',
                            
    autoScroll:true
                        
    }]
                    })

                     var 
    refreshTab=function(tab){
              
    tab.getUpdater().refresh();}; 

  2. #2
    Sencha User
    Join Date
    Mar 2007
    Location
    Bah
    Posts
    434

    Default

    1. You are posting to the 1.x help forum, but you are using 2.0 code. As a general recommendation, choosing the appropriate forum can help you get better/faster answers, and helps others too.

    2. Panels are components, and components do not respond to mouse events (like click). You must attach those types of listeners to the component's associated Elements, such as header or body.
    Fernando G

  3. #3

    Default

    Apologies efege, if the thread can be moved to the appropriate place I'd appreciate it.

  4. #4

    Default

    Right, I've been hacking at this for a while and I'm not really getting anywhere. Looking at various forum posts I see what I have to do but can't quite put it together.

    So TabPanel is a component, and what I need to do is refresh the contents of the body of this component. I realise I can do this using something like tab.body.refresh(). What I'm having trouble with is setting up an event handler to catch the click event.

    I have this:

    PHP Code:
    tabPanel.getComponent('refresh_messages').body.on("click"refreshTab,this); 
    and this

    PHP Code:
    tabPanel.getActiveTab().body.on("click"refreshTab,this); 
    ...where my item has an id of "refresh_messages". refreshTab is a function that should alert some text (just testing, if I can get the event handler to work properly it'll do the tab.body.refresh() thing). Any help would be greatly appreciated and I thank you in advance for any replies.

  5. #5
    Sencha User
    Join Date
    Mar 2007
    Posts
    7,854

    Default

    Are you trying to update an individual tab?

    getComponent takes an index or id - you have not assigned an id, so what you're doing won't work. Assigning a title doesn't give it that value as an id. Give each tab item an id or access them by index. Why would you refresh on body click instead of something like tab activate?

  6. #6
    Sencha User hendricd's Avatar
    Join Date
    Aug 2007
    Location
    Long Island, NY USA
    Posts
    5,966

    Default

    If you want to refresh when the tab is clicked, use the panels 'activate' event, not click(for DOM elements).
    "be dom-ready..."
    Doug Hendricks

    Maintaining ux: ManagedIFrame, MIF2 (FAQ, Wiki), ux.Media/Flash, AudioEvents, ux.Chart[Fusion,OFC,amChart], ext-basex.js/$JIT, Documentation Site.


    Got Sencha licensing questions? Find out more here.


  7. #7

    Default

    TryanDLS, apologies, I'd updated my tab definition with an id, but didn't update the OP.

    hendricd, thanks for the steer, I'll give it a whirl.

  8. #8

    Default

    Guys, as I understand it, the "activate" event will only fire when you select another tab and return to the first tab. I want to refresh the content when the currently active tab is clicked. This is why I was trying to attach the onclick event to the tabpanel body. Is this the wrong way to go about it?

  9. #9

    Default

    Ok, another update. Attaching the listener to the TabPanel body is *so* not what I was trying to do, although attaching it to the TabPanelItem body works. So how do I attach a listener to the actual tab itself? I thought that tabPanel.getActiveTab().addListener("click, refreshTab, this) would do the trick, but no. efege mentioned a header, although I can see no mention of a header element in the docs for TabPanelItem. Anyone got any ideas?

  10. #10
    Sencha User hendricd's Avatar
    Join Date
    Aug 2007
    Location
    Long Island, NY USA
    Posts
    5,966

    Default

    Might need tweaking, but this should force and activeTab refresh for ALL mouse-click scenarios for the tabPanel and ALL its child panels:


    Code:
    new Ext.TabPanel({ 
                        region:'center', 
                        deferredRender:false, 
                        activeTab:0,
                        default:{autoScroll:true},
                        listeners: {render: function(tabPanel){
                                          tabPanel.getEl().on('click',function(e){
                                              if(this.activeTab){
                                                 this.activeTab.getUpdater().refresh()
                                               }
                                           },tabPanel);
                                          tabPanel.strip.on('click',function(e){
                                               var t = this.findTargets(e);
                                               if(t && !t.close && t.item & t.item == this.activeTab){
                                                     this.activeTab.getUpdater().refresh();
                                               }
                                        },tabPanel);
                                         },
                                     tabchange: function(tp,newTab){
                                          newTab.getUpdater().refresh();
    
                                     }
                            },
                            items:[{ 
                                     contentEl:'center1', 
                                     title: 'Refresh Messages', 
                                     autoLoad:'index.cfm?fuseaction=forum.messages', 
                                      },{ 
                                      contentEl:'center2', 
                                      title: 'Start New Topic', 
                            }] 
                    }) 
    
    If you are using autoLoad, why bother with contentEl at all ? It would get overriden (removed from the DOM) on the first body update anyway.

    Further, why would you want to refesh the 'Start new Topic' panel everytime it was clicked?

    @Airhole -- what on earth ?
    "be dom-ready..."
    Doug Hendricks

    Maintaining ux: ManagedIFrame, MIF2 (FAQ, Wiki), ux.Media/Flash, AudioEvents, ux.Chart[Fusion,OFC,amChart], ext-basex.js/$JIT, Documentation Site.


    Got Sencha licensing questions? Find out more here.


Page 1 of 2 12 LastLast

Posting Permissions

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