View Full Version : Can I use Ext.ns() to solve the problem of "Id conflicts in multiple tabs"

27 May 2014, 1:51 AM
About the problem of "Id conflicts in multiple tabs", the suggestion is always to use itemId. But Once the web page has been created, go to check the real id in its final html content, you can find each component's id is a sequential number created by lib instead of itemId. It causes a problem, that is we has an automation test environment to test GUI by fixed and indicated id, we cannot use itemId as our id conflict solution, that makes our automation test fail.

Now I have a controller of treepanel, when its select event occurs,it will create a tabpanel and add multiple tabs, Can I apply Ext.namespace to this code somewhere to avoid id conflict?

Ext.define('zldapp.controller.treepanel.treepanel', {
extend: 'Ext.app.Controller',
stores: ['treepanel.monitorPanel','treepanel.configPanel','treepanel.maintenPanel'],

init: function() {
var myheader = this.header;
'treepanel': {
select: this.onPanelSelect

var splitter = Ext.ComponentQuery.query('splitter')[0];

onPanelSelect: function(selModel, record, index, eOpts) {
var tabidx = 0;
if(eOpts != undefined)
tabidx = eOpts.params.tabIdx;
if (record.get('leaf')) { //it's a leaf
g.start = new Date().getTime();

var contentPanel = Ext.ComponentQuery.query('viewport > panel[region="center"]')[0];
var tabPanel = Ext.create('Ext.zytab');
tabs = record.raw.tabs;
for(var i=0; i < tabs.length; i++){
title: tabs[i].name,
id: tabs[i].id,
bodyStyle: 'background:none;',
layout: 'fit',
border: false,
loader: {
url: tabs[i].url,
renderer: 'component',
autoLoad: false,
listeners : {
beforeload : function(loader) {
var form = loader.target;


28 May 2014, 1:43 AM
Is there another way to avoid id conflict if I don't want to use itemId?

Can I let different tabs in different namespaces?

28 May 2014, 1:56 AM
No. An id must be globally unique throughout your whole app.

An itemId is an id that is "namespaced" to a container hierarchy.