Ext.AbstractManager.register（）：向該管理器註冊重複ID「btnLogout」

Question

我已經做了一個通用視圖，該視圖在所有頁面中都是必需的。所以無論我需要什麼，我都會調用xtype的這個視圖。在這個常見的視圖中有一些由id值定義的組件。

根據要求取決於頁面我需要隱藏一些從常見的視圖按鈕再次需要顯示。這些活動將取決於頁面。首次啓動時間屏幕即將到來。一旦我導航到另一個頁面，它將顯示錯誤，如Ext.AbstractManager.register（）：向此管理器註冊重複ID「btnLogout」。

如果我將組件ID值更改爲名稱值或itemId值。那麼它將導航很好，但問題是無法隱藏和顯示按鈕，因爲顯示未定義的sysntax是var a = Ext.getCmp（'btnBackID'）; console.log（a）;它將是未定義的。一旦組件作爲對象返回，我可以隱藏顯示功能。

任何人都可以告訴如何解決這個問題，否則給我另一種方式來實現。非常感謝。謝謝。我已經給下面

共視我的代碼

Ext.define('abc.view.GlobalNavigationView', { 
    extend:'Ext.panel.Panel', 
    alias:'widget.globalNavigationView', 
    id:'globalNavigationId', 
    layout: { 
     type: 'vbox', 
     align:'stretch' 
    }, 
    items: 
     [ 
      { 
       xtype: 'toolbar', 
       layout: 'hbox', 
       flex: 1, 
       items: 
        [ 
         { 
          xtype: 'button', 
          flex: .1, 
          text: 'Back', 
          id: 'btnBackID',      
         },       

         { 
          xtype: 'button', 
          flex:.1, 
          id: 'btnSave', 
          cls: 'saveCls' 
         }, 
         { 
          xtype: 'button', 
          flex:.1, 
          id: 'btnEmail', 
          text: 'Email' 
         }, 
         { 
          xtype: 'button', 
          flex:.1, 
          id: 'btnPrint', 
          text: 'Print' 
         }, 
         { 
          xtype: 'button', 
          flex:.1, 
          itemId: 'btnFilter', 
          text: 'Filter' 
         }, 
         { 
          xtype: 'button', 
          flex:.1, 
          id: 'btnLogout', 
          cls: 'logoutCls' 
         } 
        ] 
      } 

     ] 
}); 

HomeView1

Ext.define('GulfMark.view.WeeklyHomeView1', { 
    extend:'Ext.panel.Panel', 
    alias:'widget.weeklyfcastView', 
    id:'weeklyfcastId', 
     layout: 'fit', 
     items: 
     [ 
      { 
       xtype: 'globalNavigationView', 
       id: 'globalNavigationWeekly1', 
       flex: 1, 
       docked:"top", 
       scrollable:false 
      }, 
      { 
       my componets of this view 
       ......................... 
      } 

     ] 
}); 

HomeView2

Ext.define('GulfMark.view.WeeklyHomeView1', { 
    extend:'Ext.panel.Panel', 
    alias:'widget.weeklyfcastView', 
    id:'weeklyfcastId', 
     layout: 'fit', 
     items: 
     [ 
      { 
       xtype: 'globalNavigationView', 
       id: 'globalNavigationWeekly2', 
       flex: 1, 
       docked:"top", 
       scrollable:false 
      }, 
      { 
       my componets of this view 
       ----------------------- 
      } 

     ] 
}); 

控制器代碼：

init:function(){ 

     this.control({ 
      'globalNavigationView ':{ 
       click:this.onbtnBackClick, 
       render: this.onbtnBackrender, 
      },    
      'weeklyfcastView':{ 
       show:this.onShowweeklyfcastView, 
       render:this.onRenderweeklyfcastView 
      } 
     }); 
    }, 

    onShowweeklyfcastView: function(){  

     var btnFilter = Ext.getCmp('btnFilter'); 
     console.log(btnFilter); // if i used components id to name or itemId, here will show undefined 
     btnFilter.setHidden(true); 
     //btnFilter .hide(); 

    } 

Answer 1

如果你的觀點是不是單身，你不能給ID，以它的組件 - ID必須是唯一的，或者你得到duplicate id錯誤。

你真正需要的是對你試圖顯示/隱藏按鈕的視圖的一些引用。當你有這個參考時，你可以使用down方法找到你的按鈕。例如：

var iPanel = // Create new panel here. 
iPanel.down('button[text="Email"]').hide(); 

Answer 2

此代碼的工作在EXTJS 6中相同的視圖多個按鈕，具有相同的itemId（未ID - ID將拋出異常，如上所述）

查看：

  { 
       xtype : 'button', 
       text : 'Save and Come Back Button 1', 
       itemId : 'saveAndComeBackButton', 
       handler : 'saveAndComeBack' 
      }, 
      { 
       xtype : 'button', 
       text : 'Save and Come Back Button 2', 
       itemId : 'saveAndComeBackButton', 
       handler : 'saveAndComeBack' 
      }, 

控制器：

this.__setButtons('#saveAndComeBackButton','disable'); 


__setButtons: function (buttonItemId,state) { 

    Ext.Array.forEach(
     Ext.ComponentQuery.query(buttonItemId), 
     function (button){ 
      if (state === 'enable'){ 
       button.enable(); 
      }else{ 
       button.disable(); 
      } 
     } 
    ); 

}