Extjs टैब

Question

में टेक्स्ट चयन सक्षम करना मेरे पृष्ठ में मैं xjs का उपयोग कर टैबपैन बना रहा हूं 4.1.3। समस्या यह है कि मैं माउस का उपयोग कर टैब शीर्षक का पाठ चुनने में सक्षम नहीं हूं। के रूप में मैं नया टैब जोड़ने के लिए एक नया टैब मैं कोड के नीचे इस फोन को खोलने

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

मैं क्या कोशिश की है

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

:

यहाँ मेरी कोड है मैं के रूप में ExtJS चयन फ़ंक्शन का उपयोग किया

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

यह टेक्स्ट चयन को सक्षम बनाता है लेकिन यह पर्याप्त चिकनी नहीं है। समस्याएं: 1. यदि मैं पाठ पर माउस खींचता हूं तो पाठ का चयन नहीं किया जाएगा, मुझे माउस को बाहर से खींचना होगा। 2. चयन तब नहीं हो रहा है जब इसे मध्य से चुनें। उदाहरण: यदि मेरा टैब नाम एबीसीडीएफई है, तो मैं केवल डीएफ चुनने में सक्षम नहीं हूं।

कृपया इस समस्या को हल करने में मदद करें। यहाँ fiddle

Answer 1

है यह मैं कैसे डोम

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