在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選項卡中啓用文本選擇

回答

相關問題