Ext JS 탭 패널 - 동적 탭 - 탭이 작동하지 않음

Question

누군가가이 문제에 도움이된다면 고맙겠습니다. 노드를 클릭하면 탭을 탭 패널에로드하는 트리 패널이 있습니다.

탭이 제대로로드되지만 문제가 중복됩니다. Tab 패널에 추가하기 전에 탭이 있는지 확인해야합니다. 나는이 문제를 해결할 것 같지 않고 내 두뇌를 먹고있다. 이것은 꽤 간단하고 솔루션에 대한 stackoverflow 및 EXT JS 포럼을 확인했지만 그들은 나를 위해 작동하지 않는 것 또는 나는 장님이되고있다.

이 나무에 대한 내 코드입니다 :

 
var opstree = new Ext.tree.TreePanel({ 
       renderTo: 'opstree', 
    border:false, 
       width: 250, 
       height: 'auto', 
       useArrows: false, 
       animate: true, 
       autoScroll: true, 
       dataUrl: 'libs/tree-data.json', 
       root: { 
        nodeType: 'async', 
        text: 'Tool Actions' 
       }, 
       listeners: { 
        render: function() { 
         this.getRootNode().expand(); 
        } 
       } 
      }) 

    opstree.on('click', function(n){ 
    var sn = this.selModel.selNode || {}; // selNode is null on initial selection 
    renderPage(n.id); 
    }); 

    function renderPage(tabId) { 

    var TabPanel = Ext.getCmp('content-tab-panel'); 
    var tab = TabPanel.getItem(tabId); 

    //Ext.MessageBox.alert('TabGet',tab); 

    if(tab){ 
    TabPanel.setActiveTab(tabId); 
    } 
    else{ 
    TabPanel.add({ 
    title: tabId, 
    html: 'Tab Body ' + (tabId) + '

',  
    closable:true 
    }).show(); 

    TabPanel.doLayout(); 
    }  
    } 
     }); 

는 이것은 탭 패널

new Ext.TabPanel({ 
    id:'content-tab-panel', 
       region: 'center', 
       deferredRender: false, 
    enableTabScroll:true, 
       activeTab: 0, 

       items: [{ 
        contentEl: 'about', 
        title: 'About the Billing Ops Application', 
        closable: true, 
        autoScroll: true, 
    margins: '0 0 0 0' 
       },{ 
        contentEl: 'welcomescreen', 
        title: 'PBRT Application Home', 
        closable: false, 
        autoScroll: true, 
    margins: '0 0 0 0' 
       }] 
      }) 

누군가가 도와 주실 수 코드입니다?

Answer 1

이 작업을 수행하는 핵심은 탭에 일관된 명명 규칙을 작성하는 것이므로 해당 탭이 아직 추가되었는지 확실하게 알 수 있습니다. 당신이 노드의 ID를 사용하도록 선택한 것처럼 보입니다 - 괜찮습니다. TabPanel.add으로 전화를 걸면 노드의 ID를 새 탭의 id으로 보내십시오. 그런 다음 테스트하여 TabPanel.findById이 있는지 테스트 할 수 있습니다.

참고 : 일부 변수 이름은 매우 혼란 스럽습니다. TabPanel은 변수 이름으로는 좋지 않은 선택이며 소문자로 시작하여 프레임 워크 클래스 다음에 이름을 지정하지 마십시오. tabs 또는 tp을 시도하십시오. 또한 노드 ID 앞에 tab-과 같은 문자열을 추가하면 명명 규칙이 더 명확 해집니다. 탭을 확장하면 새 탭을 추가하는 작업을 탭 패널의 사용자 정의 메서드에 캡슐화 할 수도 있습니다.

Answer 2

테스트되지 않았지만 이것이 효과가 있다고 생각합니다.

if (!Ext.getCmp('content-tab-panel')) { 
    Tabpanel.add({ config }).show(); 
    Tabpanel.doLayout(); 
} 

Answer 3

다음으로 기능 renderPage(tabId)를 교체해야합니다 :

function renderPage(tabId) { 

    var TabPanel = Ext.getCmp('content-tab-panel'); 
    var tab = TabPanel.getItem(tabId); 

    //Ext.MessageBox.alert('TabGet',tab); 

    if(tab){ 
    TabPanel.setActiveTab(tabId); 
    } 
    else{ 
    TabPanel.add({ 
    title: tabId, 
    html: 'Tab Body ' + (tabId) + ' 
',  
    id: tabId,**// this line very important, without this its not working** 
    closable:true 
    }).show(); 

    TabPanel.doLayout(); 
    }  
    } 

Answer 4

function addNewTab(nName,nId){ 
    //nName is Node Name and nId is node Id 
    //Ext.Msg.alert('message',nId); 
    var tp = Ext.getCmp('content-tab-panel');//Tab Panel Id 
    var checkTab=tp.findById(nId); 
    if(checkTab){ 
     tp.setActiveTab(nId); 
    } else { 
     tp.add({ 
      title:nName, 
      id:nId, 
      closable:true, 
      autoScroll:true 
      }).show(); 
    } 
} 

Answer 5

는 ExtJS로 4.0에서이를 구현하기는 ExtJS의 API .findById() 작동하지 않습니다에 일부 수정이 있었다 이것을 시도하십시오

function AddTabs(tabTitle,yourTabId){ 
    var YourTabPanel = Ext.getCmp('YourTabPanelId'); 
    var TabToCheck = YourTabPanel.getChildByElement(yourTabId); 
    if(TabToCheck){ 
     YourTabPanel.setActiveTab(yourTabId); 
    } else { 
    YourTabPanel .add({ 
     title:tabTitle, 
     id:nId, 
     closable:true, 
     autoScroll:true, 
     layout: 'fit', 
     }).show(); 
    } 
    YourTabPanel.doLayout(); 
}