Results 1 to 3 of 3

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

  1. #1
    Sencha Premium Member
    Join Date
    May 2013
    Posts
    48
    Answers
    1

    Default Can I use Ext.ns() to solve the problem of "Id conflicts in multiple tabs"

    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?

    Code:
    Ext.define('zldapp.controller.treepanel.treepanel', {
        extend: 'Ext.app.Controller',
       stores: ['treepanel.monitorPanel','treepanel.configPanel','treepanel.maintenPanel'],    
    	
        init: function() {
    	 var myheader = this.header;
            this.control({
                'treepanel': {
                    select: this.onPanelSelect
    					
                }
            });
        },
        onAfterLayout:function(){
    		var splitter = Ext.ComponentQuery.query('splitter')[0];
    		splitter.setVisible(false);
        		
        },
        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];					
    		contentPanel.removeAll();
    		var tabPanel = Ext.create('Ext.zytab');
    		contentPanel.add(tabPanel);
    		tabs = record.raw.tabs;
    		for(var i=0; i < tabs.length; i++){
    				tabPanel.add({
    					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;
    								form.removeAll();
    							}
    					        }
    					}                                  
                                 });			
    		}			
    		tabPanel.setActiveTab(tabidx);
            }
        }
    	
    });

  2. #2
    Sencha Premium Member
    Join Date
    May 2013
    Posts
    48
    Answers
    1

    Default

    Is there another way to avoid id conflict if I don't want to use itemId?

    Can I let different tabs in different namespaces?

  3. #3
    Sencha Premium User evant's Avatar
    Join Date
    Apr 2007
    Location
    Sydney, Australia
    Posts
    19,258
    Answers
    759

    Default

    No. An id must be globally unique throughout your whole app.

    An itemId is an id that is "namespaced" to a container hierarchy.
    Twitter - @evantrimboli
    Former Sencha framework engineer, available for consulting.
    As of 2017-09-22 I am not employed by Sencha, all subsequent posts are my own and do not represent Sencha in any way.

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •