2

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: ''

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

Regards!!!!!!!!

figus
  • 307
  • 2
  • 15

1 Answers1

1

ok....

Using the xtype: 'textfield' there was something odd for me.... Ext.FocusManager.enabled 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 display:block 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 .focus() event in jQuery, like this:

                $('.textboxlist-bit-editable-input').focus(function(){
                    $('#emailsi>div>input').css({display: 'block', 'z-index': '-2', position: 'absolute', float: 'right'});
                    Ext.getCmp('emailsi').focus();
                });

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 :D

Regards!!

figus
  • 307
  • 2
  • 15
  • I'm dealing with this same issue, did you ever find a better solution? – limscoder Aug 26 '11 at 22:30
  • @limscorder that was my solution... use the textfield component, if you use the default components, they work as they should, if you require a simple , create both, then hide the extjs textfield component, and on the input text focus event, give the focs back to the extjs textfield component like $('#myinput').focus(fuction(){Ext.getCmp('mycomponent').focus();}); – figus Sep 04 '11 at 11:15