Results 1 to 2 of 2

Thread: Prevent Focus Management in Toolbar

  1. #1
    Sencha User
    Join Date
    Mar 2011
    Vote Rating

    Question Prevent Focus Management in Toolbar


    I've been looking everywhere, but I can't find an answer to my problem maybe someone out here can help me

    I have a panel with a toolbar
    The toolbar has 3 items (Button, Textfield, Button)
    This works fine, I can press buttons, I can't write, edit, etc. in the Textfield...

    But if I change to: Button, component, button
    And in the component I write a html: '<input type="text" style="width: 500px">'

    The focus manager (maybe something else...) kicks in ... well.. not really so good with that text input, I can write... but I can't press Backspace, if I do, nothing happens, nor I can press the arrow keys....

    Is there a way to supress the focus manager only in that text input??? or to the whole toolbar (I don't really need it)

    I've tried the "Ext.FocusManager.disable()" but that doesn't work (also the Ext.FocusManager.enabled returns false... so maybe it's not really fault of the Focus Manager)

    I've narrowed down the problem to the toolbar...
    I created a Text Input some place else, and all the keys work... I moved that same input (using jquery) inside the toolbar... and the backspace and arrow keys stop working... if I move it out, the keys start working again :S

    I need it to be a text input because I'm planning on using a jQuery plugin which hides the current input and replaces it with another input... so you see... even if I use textfield, the textfield will get hidden and a text input will replace it without backspace and arrow keys functionality

    Any help will be greatly appreciated


  2. #2
    Sencha User
    Join Date
    Mar 2011
    Vote Rating



    Using the xtype: 'textfield' there was something odd for me....
    returns false....

    If I do a Ext.FocusManager.enable(); and after that a Ext.FocusManager.disable();
    Even the xtype: 'textfield' stops working with the backspace and arrow keys :O

    So I guess FocusManager has something to do....

    anyway, I provisionally solved my issue :P

    I left the component as textfield

                    xtype: 'textfield',
                    name: 'emailsi',
                    id: 'emailsi',
                    labelStyle: 'width: auto',
                    labelWidth: 120,
                    width: 500,
                    fieldLabel: idioma.personasInvolucradas
    And when the text input gets created via jquery it applies "display: none" to the previous textfield
    So... I restore the
    and also apply a
    position: absolute; float: right; z-index: -1
    so it gets hidden again and doesn't disturb the layout :P

    And finally, to restore the Backspace and Left/Right Arrow Keys functionality........

    I create a
    event in jQuery, like this:

                            $('#emailsi>div>input').css({display: 'block', 'z-index': '-2', position: 'absolute', float: 'right'});
    Basically, I discovered that as long as the original textfield has the focus, I can press backspace in the text input (also there's where I apply the css thing, first it was outside the focus event, but when the toolbar gets repainted, the textfield goes back to display:none)

    If someone has a better solution, it will be very welcomed


Tags for this Thread

Posting Permissions

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