Question

I’m currently playing with ExtJS 4 for my new project. I’m using MVC architecture and use widget for others component.

The problem is I can’t make instance for Ext.tab.Panel. Here’s my code

app.js

Ext.Loader.setConfig({   enabled: true });
Ext.application({   
        name: 'FBSPAM',   
        autoCreateViewport: false,   
        appFolder: 'app',   
        controllers: ['Users'],   
        launch: function(){       
              Ext.create('Ext.container.Viewport', {        
                   layout: 'border',       
                   title: 'App',        
                   items: [
                          {                
                               region: 'west',                
                               title: 'Menu',                
                               width: 250,                
                               xtype: 'accordionmenu'            
                          },
                          {                
                               region: 'center',                
                               xtype: 'tab'               
                              //items: tabpanel            
                           }        
                     ]    
               });
         }
});  

view/Tab.js

Ext.define('FBSPAM.view.Tab',{   
       extend: 'Ext.tab.Panel',   
       alias: 'widget.tab',   
       height: '100%',   
       layout: 'fit',   
       border: false,   
       initComponent: function(){      
            this.items = [          
                  {
                        title: "Hello",
                        html: "Hello World"           
                   }                  
            ];              
            this.callParent(arguments);   
      }
}); 

Error Message:

Uncaught RangeError: Maximum call stack size exceeded  

Answer 1

That’s because you use taken alias. Change alias: 'widget.tab' to something else (eg. widget.tab2) and it will work.