Enabling Extjs Text Selection

Question

On my page, I create tabPanels using exjs 4.1.3. The problem is that I can’t select the tab title text with the mouse.

here is my code:

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'
            }
        }]
})

when I open a new tab, I call this code below to add a new tab

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'              
    } 
}

What I tried: I used the Extjs selection function as shown below

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

It allows you to select text, but it is not smooth enough. questions: 1. the text will not be selected; if I drag the mouse onto the text, I have to drag the mouse from the outside. 2. The choice does not occur if you select it from the middle. ex: if the name of my tab is ABCDFE, then I cannot select only dfe.

Please help solve this problem. here 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.*/
            }