Ramesh Lamani Ramesh Lamani - 6 months ago 15
Javascript Question

Ext.AbstractManager.register(): Registering duplicate id "btnLogout" with this manager

I have did one common view, this view is required in all the pages. so wherever i need, i am calling this view of xtype . Within this common view have some components with defined by id value.

As per requirement depends on pages i need to hide some button from common view again need to show. These activities will come depending on pages. While first launching time screen will come. once i navigating to another page it will show error like Ext.AbstractManager.register(): Registering duplicate id "btnLogout" with this manager.

If i changed componets id value to name value or itemId value. then it will navigate fine but problem is not able to hide and show the buttons because showing undefined sysntax is var a = Ext.getCmp('btnBackID'); console.log(a);, it will be undefined. once the component returns as object, i can do hide show functionality.

Can any one tell how resolve this issue else give me alternate ways to achieve. great appreciate. Thank you. i have given my code below

Common View

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

]
});


Controller Code:

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

If your view is not a singleton, you cannot give IDs to its components - IDs must be unique, or you get the duplicate id error.

What you really need is some reference to the view from which you are trying to show/hide buttons. When you have that reference, you can use the down method to find your buttons. For example:

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