PDA

View Full Version : [CLOSED][3.0.0] selectOnFocus in WebKit (when readOnly: true)


rblon
11 Dec 2009, 6:28 AM
I'm using Ext 3.0 and it appears selectOnFocus is not working in Chrome and Safari when readOnly is true (FF and IE are fine).

Below I have an example. When the "readOnly: true," line is commented out, it all works as expected.



Ext.onReady(function() {

var testWindow = function() {
var formPanel = new Ext.form.FormPanel({
bodyStyle: 'padding: 5px',
defaultType: 'textfield',
labelAlign: 'top',
items: [{
id: 'test-textfield',
fieldLabel: 'Copy the following link',
readOnly: true,
selectOnFocus: true,
value: 'http://www.example.com/',
width: 200
}]
});

var win = new Ext.Window({
title: 'Test',
width: 250,
height: 135,
layout: 'fit',
items: formPanel,
buttons: [{
text: 'OK',
width: 70,
handler: function() {
win.close();
}
}],
listeners: {
show: function() {
var tf = Ext.getCmp('test-textfield');
tf.focus.defer(300, tf);
}
}
});

win.show(this);
}

new Ext.Button({
text: 'Click me',
handler: testWindow
}).render(Ext.getBody());
});
mystix
11 Dec 2009, 8:05 AM
works fine using the latest code from SVN (and i assume the official 3.0.3 release as well).

drop this code into the /examples folder:


<html>
<head>
<link rel="stylesheet" type="text/css" href="../resources/css/ext-all.css" />
<script type="text/javascript" src="../adapter/ext/ext-base.js"></script>
<script type="text/javascript" src="../ext-all.js"></script>
<script>
Ext.onReady(function() {
Ext.create({
xtype: 'textfield',
readOnly: true,
selectOnFocus: true,
renderTo: document.body,
value: 'This textfield is readonly.'
});
});
</script>
</head>

<body>
</body>
</html>
rblon
11 Dec 2009, 8:37 AM
I actually thought Ext 3.0.3 was only for support subscribers, now I see that it is public.
"Released on July 6th, 2009" on the download page (http://www.extjs.com/products/extjs/download.php) seems a typo, though.

Anyway, I have tried your example (both with 3.0 and 3.0.3) and it indeed works fine.

However, my example still doesn't work correctly in Chrome/Safari with 3.0.3. When I comment out the "readOnly: true," line, then the text gets selected when I open the window. However with that line not commented out, it doesn't get selected.


works fine using the latest code from SVN (and i assume the official 3.0.3 release as well).

Did you refer to my or your example?
mystix
11 Dec 2009, 9:49 AM
Did you refer to my or your example?


i was referring to my barebones example, which works perfectly fine when readOnly:true and selectOnFocus:true.
mystix
11 Dec 2009, 9:53 AM
your deferred textfield focus on window show is the culprit.

switch to this window listener instead


listeners: {
show: function() {
Ext.getCmp('test-textfield').focus(true);
}
}



[edit]
or in your original case, you need to pass in the true argument to select the text in the TextField when focusing it.


listeners: {
show: function() {
var tf = Ext.getCmp('test-textfield');
tf.focus.defer(300, tf, [true]);
}
}

my advice would be to do away with unnecessary calls to defer() where possible.
mystix
11 Dec 2009, 10:10 AM
edited the code i posted...
rblon
11 Dec 2009, 1:31 PM
It does seem I need the delay; so avoiding the defer function means I use


listeners: {
show: function() {
Ext.getCmp('test-textfield').focus(true, 300);
}
}

which works correct in all browsers.

You could argue that the selectText argument in the focus function is doing the work as this would also select the text if selectOnFocus: false. Or in other words, it seems in IE/FF selectOnFocus: true and selectText: false leads to text being selected, while in Chrome/Safari it doesn't.

Thanks for your help
mystix
11 Dec 2009, 2:59 PM
my guess is that the call to focus() on window show happens when the CPU is busy showing the window on IE / FF so that delay there is necessary to allow the CPU time to recover on those 2 (slowpoke) browsers.
rblon
11 Dec 2009, 3:05 PM
On my machine I do need a delay for Chrome as well in this example.

I never like these delays: not only is not nice for the user experience, it also requires choosing an arbitrary delay time.
mystix
12 Dec 2009, 7:08 AM
On my machine I do need a delay for Chrome as well in this example.

I never like these delays: not only is not nice for the user experience, it also requires choosing an arbitrary delay time.

sometimes, unfortunately, they're inevitable -- either the processor is simply unable to cope, or the DOM is unable to keep pace with the processor.

i doubt you need a 300ms delay though -- try bringing that down to 50 or even 10.