Results 1 to 5 of 5

Thread: How to catch focus on Tab button (or activate on focus)

  1. #1
    Ext JS Premium Member
    Join Date
    Dec 2011
    Posts
    8
    Vote Rating
    0
      0  

    Default Answered: How to catch focus on Tab button (or activate on focus)

    End result I'm after is for keyboard access in a tab bars to behave like a normal OS tabbed dialog where the tab panel is activated when its tab button receives focus.

    I assumed I could set up a listener for the focus event on tabs. Obviously each tab is comprised of several child components for the tab button and the content panel so a focus definition in the tab config doesn't work. My next thought is to navigate the DOM and try attaching a focus handler to the BUTTON element but that feels like it wouldn't be the 'extjs way'...

    I've been thru the API docs for tab Panels, Bars, Tabs, Buttons and nothing is jumping out at me. Any help is appreciated.

    Thanks!

  2. After thinking through your problem a bit more, I don't know if the tabs in the tab bar (what I assume you're trying to focus on) are the same DOM elements as the tabs themselves, so it's very possible that this doesn't do what you expect:

    PHP Code:
    myTab.el.on('focus', function() { ... }) 
    In other words, the tabs (in the tab bar) are different Ext.Element objects than the tabs (panels) themselves.

    PHP Code:
    myTab.el //underlying DOM of the panel... NOT the clickable (focus-able) tab in the tab bar 
    You might try using the DomQuery class to select the tabs (in the tab bar) and add the Element "focus" listeners that way. Make sense?

  3. #2
    Sencha Developer
    Join Date
    Sep 2008
    Location
    Antioch, IL
    Posts
    1,516
    Answers
    99
    Vote Rating
    1593
      1  

    Default

    I'm unclear on exactly what you want... but I think you might have success using the Ext.Element() class:
    - http://docs.sencha.com/ext-js/4-0/#!/api/Ext.Element

    From any component, you can call the following to the it's Element:
    PHP Code:
    var panel = new Ext.panel.Panel({ ... });

    panel.el //Ext.Element 
    The Element class gives you access to a number of native DOM events (like "focus"), so I think this gives you what you're after.

  4. #3
    Ext JS Premium Member
    Join Date
    Dec 2011
    Posts
    8
    Vote Rating
    0
      0  

    Default

    So let's say I have a TabPanel which contains the following Tabs:
    Code:
    var myTab1 = Ext.create('Ext.tab.Tab', {
         title: 'Tab 1',
        html: 'Some content'
        });
    var myTab2 = Ext.create('Ext.tab.Tab', {
        title: 'Tab 2',
        html: 'Some content'
        });
    I'm new to ExtJS so I'm probably missing something but I've been unable to attach a focus event handler to either myTab1 or myTab1.el. myTab1.addListener('activate'...) works but not for 'focus'.

    I'm using FocusManager. When the user activates the tab list, the TAB key cycles between tabs and ENTER activates the focused tab. Instead, I'd like to activate the tab immediately on focus. When the user hits TAB to focus Tab2, Tab2 should be activated and its content displayed.

    In pseudo-code: myTab2.on('focus', myTab2.activate()). Does that make sense?

  5. #4
    Sencha Developer
    Join Date
    Sep 2008
    Location
    Antioch, IL
    Posts
    1,516
    Answers
    99
    Vote Rating
    1593
      1  

    Default

    After thinking through your problem a bit more, I don't know if the tabs in the tab bar (what I assume you're trying to focus on) are the same DOM elements as the tabs themselves, so it's very possible that this doesn't do what you expect:

    PHP Code:
    myTab.el.on('focus', function() { ... }) 
    In other words, the tabs (in the tab bar) are different Ext.Element objects than the tabs (panels) themselves.

    PHP Code:
    myTab.el //underlying DOM of the panel... NOT the clickable (focus-able) tab in the tab bar 
    You might try using the DomQuery class to select the tabs (in the tab bar) and add the Element "focus" listeners that way. Make sense?

  6. #5
    Ext JS Premium Member
    Join Date
    Dec 2011
    Posts
    8
    Vote Rating
    0
      0  

    Default

    Thanks, that's kind of where my mind was going originally it just seemed like it was stepping too far outside the framework. I've finally been able to select the tab buttons and capture focus changes using DomQuery.select().

Posting Permissions

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