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

时间:2017-04-05 12:41:39

标签: extjs

在我的页面中,我正在使用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。

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

1 个答案:

答案 0 :(得分:0)

这就是我通过操纵DOM来解决的问题

.Replace("My Local Server Name", "New Server Name")