ExtJS grid rowexpander content cannot be selected and copied

Question

I am using ExtJS 6.2.0, I implemented a panel which uses Ext.grid.Panel populated with some data, actually some logging messages. And when double click each row of the grid, the grid rowexpander will display more info of this logging message.

The code is like:

grid = new Ext.grid.Panel({
    ...
    plugins: [{
       ptype: 'rowexpander',
       rowBodyTpl: new Ext.XTemplate(
           '<div class="allow-text-selection" style="background-color:#ffffff;">',
           '<font color="gray">',
           '<pre>{[this.formatMessage(values.log_extra)]}</pre>',
           '</font>',
           '</div>',
           {
               formatMessage: function (message) {
               let decodedMessage = JSON.parse(message);
               return JSON.stringify(decodedMessage, null, 4);
           }
        }
     )
   }],
   ...
});

But when I try to select the data in this rowexpander content (rendered in the form of rowBodyTpl), it just cannot be selected.

ps: And, the grid cell cannot be selected by default, but after I added following config, it works.

viewConfig: {
    enableTextSelection: true,
    getRowClass: function () {
         return this.enableTextSelection ? 'x-selectable' : '';
    }
},

I also add a CSS class "allow-text-selection" to the template, but it still not works.

.allow-text-selection {
    -webkit-user-select: text !important;
    -moz-user-select: text !important;
    -ms-user-select: text !important;
    user-select: text !important;
}

So, my question is how to work around to make the rowexpander content seletable so that I can let users select and copy conveniently.

Thanks for your help.