Включение выделения текста на вкладке Extjs

на моей странице Я создаю tabPanels с помощью exjs 4.1.3. проблема в том, что я не могу выбрать текст заголовка вкладки с помощью мыши.

вот мой код:

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.

пожалуйста, помогите решить этот вопрос. вот скрипка

6
extjs

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