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

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

这里是我的代码：

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

来源

2017-04-05 Safiya PV

能否请你创造一些小提琴和显示这个例子中它。我会解决这个问题有本身。 – Tejas

感谢您的回复@ tejas1991。在小提琴中，它的作用是fyn :(我们注意到问题是按钮，上面的代码在创建标签标题时使用了按钮标签，所以如果我使用selectable（）如果我将courser放在按钮标签和Trag之外，文本将会被选中。但不是在按钮内 –

我刚刚检查你的小提琴，因为你说我们的标签标题extjs使用按钮标签。为了好奇心，我改变了按钮标签的名称来标签，它工作正常（功能）。所以我们需要一种方法我们可以用标签替换这个按钮标签 – Tejas

这是我如何解决通过操作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.*/ 
      }

来源

2017-04-24 09:29:12

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

回答

相关问题