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

Question

在我的页面中,我正在使用exjs 4.1.3创建tabPanel.问题是我无法使用鼠标选择标题标题的文本.

这是我的代码:

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.

请帮忙解决这个问题.这里是小提琴

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.*/
            }