extjs - 在 Extjs 选项卡中启用文本选择

Question

在我的页面中，我使用 exjs 4.1.3 创建 tabPanels。问题是我无法使用鼠标选择标签标题的文本。

这是我的代码:

TabPanel = Ext.create('Ext.tab.Panel', {
        renderTo: 'tabs',
        resizeTabs: true,
        enableTabScroll: true,
        width: 'auto',
        border:false,
        plain: true,
        tabBar: {
            layout: {
                scrollIncrement: 100
            },
            height: 24,          
            defaults: {
                height: 24           
            }
        },
        items: [{
            title: listTabLabel,
            id: 'firstTab',
            border:false,
            items:mainPanel,
            closable: false,
            tabConfig:{
                style: {
                    borderRadius: 0,
                },
                margin: '0 0 0 0'
            }
        }]
})

当我打开一个新标签时，我称之为下面的代码来添加新标签

TabPanel.add({
    id: record,
    closable: true,
    html: tabContent,
    title: name,     
    tooltip: tabName,
    dirty: false,
    recordValue: ''+record,
    height:50,
    tabConfig: {
        style: {
            borderRadius: 0
        },
        margin: '0 0 0 -2'              
    } 
}

我尝试过的:
我使用了 Extjs 可选功能如下

listeners : {
    boxready: function() {
        Ext.select('.x-tab-center').selectable();  /*To enable user selection of text*/
    }
}

它启用了文本选择，但不够流畅。
问题:
1.如果我在文本上拖动鼠标将不会选择文本，我必须从外面拖动鼠标。
2.如果从中间选择它，则不会发生选择。例如:如果我的选项卡名称是 ABCDFE，那么我不能只选择 dfe。

请帮助解决这个问题。
这是 fiddle

Answer 1

这就是我通过操纵DOM解决的方法

          boxready: function() {
                Ext.select('.x-box-inner, .x-tab-center').selectable();
                var idVal = this.tab.btnEl.id;
                var button = document.getElementById(idVal);
                var height = button.style.height;
                var divEl = Ext.DomHelper.insertBefore(button, {       /*added a div in replacement of button*/
                    tag: 'div', 
                    id : idVal,
                    cls: 'RF_tabHeader x-tab-center',
                    title: button.title,
                    style: 'height: '+height
                });

                divEl.update(button.innerHTML);
                button.parentNode.removeChild(button);                 /* button tag is removed.*/
            }