View Full Version : Grid Cell Editing Editor - selectOnFocus

14 Jan 2014, 8:52 AM

I'm not sure if this is a bug but I'll put it here first. Maybe other users have it working. This is only occurring for EXT JS 4.2.

I have a grid with cell editors. Each cell editor is a textfield and has the selectOnFocus config set to true. Issue is that the selectOnFocus isn't working. When I focus on these fields, it doesn't highlight the text.

Editor code:

header: 'Test',
dataIndex: 'test',
flex: 1,
editor: {
xtype: 'textfield',
selectOnFocus: true

Full code for testing:

Ext.create('Ext.data.Store', {
storeId: 'simpsonsStore',
fields: ['name', 'email', 'phone'],
data: {
'items': [{
"name": "Lisa",
"email": "[email protected]",
"phone": "555-111-1224"
}, {
"name": "Bart",
"email": "[email protected]",
"phone": "555-222-1234"
}, {
"name": "Homer",
"email": "[email protected]",
"phone": "555-222-1244"
}, {
"name": "Marge",
"email": "[email protected]",
"phone": "555-222-1254"
proxy: {
type: 'memory',
reader: {
type: 'json',
root: 'items'

Ext.create('Ext.grid.Panel', {
title: 'Simpsons',
store: Ext.data.StoreManager.lookup('simpsonsStore'),
columns: [{
header: 'Name',
dataIndex: 'name',
editor: 'textfield'
}, {
header: 'Email',
dataIndex: 'email',
flex: 1,
editor: {
xtype: 'textfield',
selectOnFocus: true,
allowBlank: false
}, {
header: 'Phone',
dataIndex: 'phone'
selType: 'cellmodel',
plugins: [
Ext.create('Ext.grid.plugin.CellEditing', {
clicksToEdit: 1
height: 200,
width: 400,
renderTo: Ext.getBody()

Is anyone else having this problem or is it just me?


Gary Schlosberg
14 Jan 2014, 12:15 PM
It seems to work for me in this Fiddle:

If it isn't working for you, in which browser are you seeing this?

15 Jan 2014, 1:04 AM
I'm using Firefox for my page, but the link you gave works fine on Firefox too.

It's a big page, so there must be something that's causing this. I will try to find the cause of it, if I do I'll post it here. I just wanted to know if this was an issue of mine or EXT JS. Now that I know it's mine, I can investigate it further.

Would this be a CSS or EXT JS issue? Trying to determine if there is something in my code that's overwriting this but not sure if its CSS or JS.

Thanks for your help :)

15 Jan 2014, 2:14 AM
Ok not sure what the problem is but I found a solution.

In the textfield I added the following listener:

focus: function(field) {
}, 1);

This seems to work. Not sure what the issue is though.