Results 1 to 8 of 8

Thread: How to create focusable BoxComponent?

  1. #1

    Default How to create focusable BoxComponent?

    I'm not sure if this is possible, but I'm hoping it is. I'm currently working on a custom component extending from BoxComponent. In order to support navigation with just the keyboard (like tabbing), I want to somehow make this custom component focusable. So that when the user hits the tab key and this component is next to get focus, it somehow gets focus and I can do something, like modify the class to make the border change colors, etc. Then, once this component has the "focus", it can handle key events, like key down, etc.

    Any help on this would be appreciated.

  2. #2
    Sencha User Animal's Avatar
    Join Date
    Mar 2007
    Location
    Bédoin/Nottingham
    Posts
    30,892

    Default

    As an <a href="#"> as the main element.

    This is the usual way of doing this in HTML 4

  3. #3
    Sencha User aconran's Avatar
    Join Date
    Mar 2007
    Posts
    9,488

    Default

    You can maintain an anchorEl as Nige has suggested above or you can set the top level div's tabIndex to -1. This will enable you to get keyboard events on that particular div and programatically focus it.
    Aaron Conran
    @aconran

  4. #4

    Default

    Quote Originally Posted by aconran View Post
    You can maintain an anchorEl as Nige has suggested above or you can set the top level div's tabIndex to -1. This will enable you to get keyboard events on that particular div and programatically focus it.
    I tried your suggestion, but it doesn't seem that tabbing works. For example, I placed three of my custom components on the screen and set autoEl to:

    Code:
    autoEl: {
         tag: "div",
         tabIndex: -1
    }
    Although a focus rectangle now appears around the component when I click on it with the mouse, if I tab, it does not tab to the next custom component. Would Animal's way allow normal tabbing?

  5. #5

    Default

    Quote Originally Posted by Animal View Post
    As an <a href="#"> as the main element.

    This is the usual way of doing this in HTML 4
    How do I specify <a href="#"> for the autoEl of the BoxComponent? I couldn't get it to work with:

    Code:
    autoEl: {
        tag: 'a',
        src: Ext.BLANK_IMAGE_URL,
        cls: 'x-image-button',
        href: "#"
    }

  6. #6

    Default

    I figured out the correct syntax for the href:

    Code:
    autoEl: {
        src: Ext.BLANK_IMAGE_URL,
        cls: 'x-image-button',
        html: '<a href="#">'
    }
    BUT, the focus rectangle is no longer showing. I think this is okay though. However, I need some how to know the control has the focus. I currently have a click event successfully handle such as:

    Code:
    onRender: function(ct, position) {
        this.autoEl = Ext.apply({}, this.initialConfig, this.autoEl);
        MyWidget.superclass.onRender.apply(this, arguments);
        this.el.on('click', this.onClick, this);
    }
    How do I also hook up an event handler for "focus" and "keydown" so I can capture key events?

  7. #7

    Default

    I found that if I put tabIndex: 0, it now tabs through the components. However, I still can't figure out how to attach a onFocus event to my component. Any help with that would be appreciated.

  8. #8
    Sencha User Animal's Avatar
    Join Date
    Mar 2007
    Location
    Bédoin/Nottingham
    Posts
    30,892

    Default

    Your first way was correct. The autoEl has to be an 'a'

    Capture all events when they bubble. Have the Container which manages all these Components manage the keyboard and mouse gestures.

Similar Threads

  1. How to create North Panel using BoxComponent
    By alexaung in forum Ext 3.x: Help & Discussion
    Replies: 1
    Last Post: 21 Jul 2010, 7:32 AM
  2. How: BoxComponent in a BoxComponent
    By prodigy7 in forum Ext 2.x: Help & Discussion
    Replies: 2
    Last Post: 28 May 2009, 6:38 AM
  3. Replies: 4
    Last Post: 26 Apr 2009, 10:13 PM
  4. help with boxcomponent.
    By lionking in forum Ext 2.x: Help & Discussion
    Replies: 0
    Last Post: 9 Jun 2008, 6:21 AM

Posting Permissions

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