Enable text highlight on grid columns that are disabled

[sissonb]

I have a grid that has a column that looks like this,


{
header:'Id',
dataIndex:'id',
flex:1,
editable:false
}


I want the user to be able to highlight and copy the id, but not be able to change it's value. With editable:false I cannot highlight and copy the id's text.

Another thing I tried was adding readOnly:true to the editor like this,


{
header:'Id',
dataIndex:'id',
flex:1,
editor: {
readOnly:true,
xtype: 'textfield'
}

}


This allows me to highlight and copy, but also lets the user modify the id value which I do not want. It ignores the readOnly property.

I was looking at the CSS and noticed the .x-unselectable class is being applied to the grid container which gives -webkit-user-select: none;.

So I tried to override this by adding tdCls:"ovrrideUserSelect" to my column config like this


{
header:'Id',
dataIndex:'id',
flex:1,
editable:false, tdCls:"ovrrideUserSelect"


}




.ovrrideUserSelect{
-webkit-user-select: text !important;
}


This fails too. When selecting a row a new dom instance is create which does not have the tdCls applied and cannot be highlighted and copied. Screencast of issue (http://screencast.com/t/kbltpCNKIWNt). This issue is probably because I am using the Ext.grid.plugin.RowEditing plugin.

So what is the best way to let the user copy the text in a cell, but not let them modify it?(readOnly)

Thanks!

[vietits]

Try to set enableTextSelection of grid view to true:


Ext.create('Ext.grid.Panel', {
....
viewConfig: {
enableTextSelection: true,
....
},
....
});