ExtJS 4.2 grid viewconfig enableTextSelection

Question

I have a grid with different columns and with text selection enabled:

viewConfig: {
    markDirty : false,
    enableTextSelection: true
},

Some of the columns shows plain data like strings, but others shows formated numbers:

header : '<span style="color:#C85E00;font-weight:bold;">COUNT</span>',
dataIndex : 'count',
itemId : '',
style : 'text-align:center;',
flex : 0.25,
align : 'right',
renderer : function (v, params, data, rowIndex, colIndex){
        return Ext.util.Format.number(v,'0.000 /i');
    }

In the columns that has no renderer, the text selection works perfect, but when I try to select the text of a column that has a renderer, has strange behavior. I need to click at least 3-4 times to select all the text, but in the columns without renderer with a doubleclick all works perfect.

Do I need to add something more to the column with renderer to select text correctly??

Answer 1

This seems to be a "problem" with the dot that your renderer puts in the number, and not with the renderer itself, the default behavior when you double click its to select the word, as you have a dot in the text, it'll only select the "word" you double-clicked (in your case, your number until the first dot)

I think you can try to change this behavior using a css class with: user-select:all

like this:

renderer : function (value, metaData){
        metaData.tdCls += 'YourCssClassWithUserSelectAll'
        return Ext.util.Format.number(v,'0.000 /i');
}

Answer 2

Possible solution

Searching for more information, I have find that there is a type of column for grids called numbercolumn, using it and instead of using a renderer, setting the format like this:

header : '<span style="color:#C85E00;font-weight:bold;">COUNT</span>',
dataIndex : 'count',
itemId : '',
style : 'text-align:center;',
flex : 0.25,
align : 'right',
xtype : 'numbercolumn',
format : '0.000 /i'

The selection now works perfect.

Answer 3

Include the editor configuration in columns with renderer. Then selectOnFocus property will solve your requirement. Like this

header : '<span style="color:#C85E00;font-weight:bold;">COUNT</span>',
dataIndex : 'count',
itemId : '',
style : 'text-align:center;',
flex : 0.25,
align : 'right',
renderer : function (v, params, data, rowIndex, colIndex){
        return Ext.util.Format.number(v,'0.000 /i');
},
editor: { 
 selectOnFocus: true,
 readOnly: true,
 align : 'right',
}