2012-03-13 2 views
1

initComponent 함수에서 this.ownerCt를 통해 부모 구성 요소에 액세스 할 수있는 방법이 있습니까?ExtJS4 : initComponent 함수 this.ownerCt

this.ownerCt를 통해 액세스하려고 시도하는 동안 나는 initComponent 이후에 ownerCt 속성이 으로 설정되었음을 알았습니다. 그래서 내가 어떻게 부모의 속성을 바꿀 수있는 구성 요소의 초기화 프로세스에 연결할 수 있는지 모르겠습니다.

+0

정확히 달성하려는 것은 무엇입니까? – sha

+0

현재 탐색 경로를 탐색하려고합니다. 따라서 현재 경로를 부모 막대에 추가하고 싶습니다. – wessnerj

+0

ownerCt는 현재 구성 요소가 포함 된 컨테이너입니다. 얼마나 정확하게 작동하는지 자세히 설명해 주시겠습니까? 어떤 종류의 구성 요소를 만들려고하고 어떻게 빵 부스러기를 만들지 ... – sha

답변

1

나는이 질문에 직접 대답하지 않는다는 것을 알고있다. 나는 당신의 질문에 코멘트에 이것을 놓았을 것이지만 나는 아직 나타나지 않을 것입니다. 빵 부스러기를 짓고 있다면. 탭 패널을 확장하고 원하는 탐색을 만드는 탭 표시 줄에 대한 플러그인을 만드는 방법을 살펴 보겠습니다.

Ext.define('HOD.plugins.Breadcrumbs', { 

    // private 
    init : function(tabBar) { 
     tabBar.on('beforeadd', this.addIcons, this); 
     tabBar.on('beforeremove', this.handleTabRemove, this); 
    }, 

    addIcons: function(tabBar, newTab, index, options) { 
     if (index > 0) { 
      newTab.iconCls = 'icon-arrow'; 
      tabBar.items.each(function(tab) { 
       if (tab != newTab) { 
        tab.overCls = 'breadcrumbs-over' 
       } 
      }); 
     } 
    }, 

    handleTabRemove: function(tabBar, oldTab, options) { 
     var count = tabBar.items.getCount(); 
     if (count > 1) { 
      var newTab = tabBar.items.getAt(count-2); 
      newTab.overCls = ''; 
      newTab.removeCls('x-tab-breadcrumbs-over'); 
     } 
    } 
}); 

그런 다음 위의 플러그인을 사용하여 탭을 올바르게 스타일링하도록 탭 패널을 확장하십시오.

Ext.define('HOD.view.GlobalNavigation', { 
    extend: 'Ext.tab.Panel', 
    border: false, 
    alias: 'widget.content', 
    requires: ['HOD.plugins.Breadcrumbs'], 
    tabBar: { 
     cls: 'breadcrumbs', 
     plugins: ['tabbarbreadcrumbs'] 
    }, 

    initComponent: function() { 
     this.on('tabchange', this.handleTabChange, this); 
     this.callParent(arguments); 
    }, 

    push: function(tab) { 
     this.add(tab); 
     this.setActiveTab(tab); 
    }, 

    pop: function() { 
     // Get the current cards; 
     var cards = this.getLayout().getLayoutItems(); 
     if (cards.length > 1) { 
      this.setActiveTab(cards[cards.length-2]); 
     } 
    }, 

    handleTabChange: function (tabPanel, newCard, oldCard, options) { 
     var cards = tabPanel.getLayout().getLayoutItems(); 

     for (var i = (cards.length - 1); i > 0; i--) { 
      if (cards[i] !== newCard) { 
       this.remove(cards[i]); 
      } else { 
       break; 
      } 
     } 
    } 
}); 

나는 게시 된 내용이 here if you need more detail입니다.

+0

위대한 작품 Jamie - Sencha 포럼에 플러그인을 게시해야합니다. – dbrin

+0

나는 할 것이다. 나는 공공 소비를 위해 조금만 정리하면 가까운 미래에 github에 올려 놓고 싶은 몇 가지 UI 부분을 가지고 있습니다. –

0

내부 요소 함수에서 컨테이너의 내용을 변경하지 않는 것이 좋습니다. 대신 요소에서 이벤트를 만들고 해당 이벤트를 발생시킨 다음 컨테이너에서 수신합니다.

이렇게하면 구성 요소가 컨테이너에 무언가를 수행 할 것을 알리고 컨테이너 자체가이를 수행합니다.