Uncaught TypeError: Cannot call method 'substring' of undefined ext-all-debug.js:3487

[awhitford]

In my Ext3 to Ext4 migration, I am left with a killer that I do not understand:

Uncaught TypeError: Cannot call method 'substring' of undefined
Manager.Ext.ClassManager.parseNamespace  ext-all-debug.js:3487
Manager.Ext.ClassManager.get  ext-all-debug.js:3583
Manager.Ext.ClassManager.instantiate  ext-all-debug.js:3749
Manager.Ext.ClassManager.instantiateByAlias  ext-all-debug.js:3737
(anonymous function)  ext-all-debug.js:1537
(anonymous function)  ext-all-debug.js:1521
Ext.define.create  ext-all-debug.js:16667
Ext.define.createComponent  ext-all-debug.js:28187
Ext.define.lookupComponent  ext-all-debug.js:28175
Ext.define.prepareItems  ext-all-debug.js:28146
Ext.define.addDocked  ext-all-debug.js:32932
Ext.define.bridgeToolbars  ext-all-debug.js:37435
Ext.define.initComponent  ext-all-debug.js:37312
Base.callParent  ext-all-debug.js:2833
Ext.define.initComponent  ext-all-debug.js:74857
(anonymous function)  ext-all-debug.js:1537
Base.callParent  ext-all-debug.js:2833
Ext.define.initComponent  ext-all-debug.js:76456
(anonymous function)  ext-all-debug.js:1537
Ext.define.constructor  ext-all-debug.js:18576
Base.callParent  ext-all-debug.js:2833
Ext.define.constructor  ext-all-debug.js:27217
(anonymous function)  ext-all-debug.js:1537
Ext.Class.Class.newClass  ext-all-debug.js:3067
anonymous:2
Manager.Ext.ClassManager.instantiate  ext-all-debug.js:3787
Manager.Ext.ClassManager.instantiateByAlias  ext-all-debug.js:3737
(anonymous function)  ext-all-debug.js:1537
(anonymous function)  ext-all-debug.js:1521
Ext.define.create  ext-all-debug.js:16667
Ext.define.createComponent  ext-all-debug.js:28187
Ext.define.lookupComponent  ext-all-debug.js:28175
Ext.define.prepareItems  ext-all-debug.js:28146
Ext.define.add  ext-all-debug.js:28235
Ext.define.add  ext-all-debug.js:28225
Ext.define.initItems  ext-all-debug.js:28065
Ext.define.initComponent  ext-all-debug.js:28049
(anonymous function)  ext-all-debug.js:1537
Base.callParent  ext-all-debug.js:2833
Ext.define.initComponent  ext-all-debug.js:60633
AutosysAdminViewportUi.Ext.extend.initComponent  MyViewport.ui.js:348
AutosysAdminViewport.Ext.extend.initComponent  MyViewport.js:134
Ext.define.constructor  ext-all-debug.js:18576
Base.callParent  ext-all-debug.js:2833
Ext.define.constructor  ext-all-debug.js:27217
Ext.Class.Class.newClass  ext-all-debug.js:3067
(anonymous function)  MyViewport.js:140
isEvent  ext-all-debug.js:10117
call  ext-all-debug.js:10073

I traced this further down to the offending component, a paging toolbar. Its config is simply:

        bbar: {
          xtype: 'paging',
          pageSize: 50,
          store: myStore,
          displayInfo: true
        }

What could be wrong?

[mankz]

Try:

bbar: {
              xtype: 'pagingtoolbar',
              pageSize: 50,
              store: myStore,
              displayInfo: true
            },

[awhitford]

Changing the xtype from 'paging' to 'pagingtoolbar' seemed to solve the problem. Thank you!

But then this suggests that there is a documentation problem as the 4.02 documentation still lists 'paging' as an eligible xtype.

http://docs.sencha.com/ext-js/4-0/#/api/Ext.Component

[mankz]

Yes, docs are in bad shape. The Ext source always tells the truth though

[ricasouz]

I got the same error message, but with another source code. I'm following the tutorial below
http://docs.sencha.com/ext-js/4-0/#!...n_architecture

and before entering in the chapter "creating a model and a store", I have this error.

Any idea?

• [COLOR=red !important]Uncaught TypeError: Cannot call method 'substring' of undefined[/COLOR]
  • [COLOR=red !important]Ext.ClassManager.parseNamespace[/COLOR]ext-debug.js:6183
  • [COLOR=red !important]Ext.ClassManager.get[/COLOR]ext-debug.js:6303
  • [COLOR=red !important]Ext.ClassManager.instantiate[/COLOR]ext-debug.js:6596
  • [COLOR=red !important]Ext.ClassManager.instantiateByAlias[/COLOR]ext-debug.js:6562
  • [COLOR=red !important]Ext.apply.widget[/COLOR]ext-debug.js:6973
  • [COLOR=red !important]Ext.define.editUser[/COLOR]Users.js:21
  • [COLOR=red !important]fire[/COLOR]ext-debug.js:16976
  • [COLOR=red !important]Ext.define.dispatch[/COLOR]EventBus.js:61
  • [COLOR=red !important]Ext.override.fireEvent[/COLOR]EventBus.js:36
  • [COLOR=red !important](anonymous function)[/COLOR]Observable.js:642
  • [COLOR=red !important]fire[/COLOR]ext-debug.js:16976
  • [COLOR=red !important]Ext.define.continueFireEvent[/COLOR]Observable.js:291
  • [COLOR=red !important]Ext.define.fireEvent[/COLOR]Observable.js:264
  • [COLOR=red !important]Ext.override.fireEvent[/COLOR]EventBus.js:35
  • [COLOR=red !important]Ext.define.processUIEvent[/COLOR]View.js:482
  • [COLOR=red !important]Ext.define.handleEvent[/COLOR]View.js:404
  • [COLOR=red !important](anonymous function)[/COLOR]
  • [COLOR=red !important]wrap[/COLOR]ext-debug.js:17524

[DreamWork]

morning,

i have the same problem with following code

Uncaught TypeError: Cannot call method 'substring' of undefined
ext-core-debug.js:6183

the code is generated with Ext-Designer

my Code:

        Ext.apply(this, {
            items : [ {
                id: 'tabpanel',
                xtype : 'container',
                region : 'center',
                items : [ {
                    xtype : 'tabpanel',
                    height : 920,
                    width : 1250,
                    activeTab : 0,
                    items : [ {
                        xtype : 'panel',
                        height : 884,
                        width : 1246,
                        title : 'Tab 1'
                    }, {
                        xtype : 'panel',
                        closable : true,
                        title : 'Tab 2'
                    }, {
                        xtype : 'panel',
                        title : '+'
                    } ]
                } ]
            }, {
                xtype : 'container',
                width : 181,
                region : 'west',
                split : true
            }, {
                xtype : 'panel',
                height : 920,
                width : 212,
                autoScroll : true,
                layout : {
                    type : 'accordion'
                },
                collapsed : false,
                collapsible : true,
                title : 'My Panel',
                region : 'west',
                split : true,
                items : [ {
                    width : 53,
                    collapsed : true,
                    title : 'Settings'
                }, {
                    width : 200,
                    collapsed : false,
                    title : 'Options'
                } ]
            } ]
        });

where is the error in my code ?

thx
Sven

[ricasouz]

I'm sorry, but I think that I found my mistake... in views I was not putting the 'user.Edit'

Thanks for everything.

[yancyn]

I face the same error also. But it is at line 8196: return Date.monthNames[month].substring(0,3); This happened to me twice as 2 times the network also having proxy issue. I'm not sure it is due to some tunnelling issue or missing javascript not fully loaded into my browser (could it be?). Because as I know, substring is a native function of javascript. The method above will redirect to call base javascript function.

Thanks.

[puspabs]

I also get this erorr

Uncaught TypeError: Cannot call method 'substring' of undefined

when I try the guide/application_architecture,,
this is my view code List.js

Ext.define('AM.view.user.List', {
    extend: 'Ext.grid.Panel',
    alias: 'widget.userlist',
    title: 'All Users',
    
    initComponent: function() {
        this.store = {
                fields:['name', 'email'],
                data : [
                        {name: 'Ed', email:'ed@secha.com'},
                        {name: 'Tommy', email:'tommy@secha.com'}
                ]
        
        };
        
        this.columns = [
                {header: 'Name', dataIndex: 'name', flex:1},
                {header: 'Email', dataIndex: 'email', flex:1}
        ];
        
        this.callParent(arguments);
    }
});

and this is my User.js as my controller

Ext.define('AM.controller.Users', {
    extend: 'Ext.app.Controller',
    
    views: ['user.List'],

    init: function() {
        this.control({
            'viewport > panel': {
                render: this.onPanelRendered
            }
        });
    },

    onPanelRendered: function() {
        console.log('The panel was rendered');
    }
});

and app.js as my javascript application code

Ext.application({
                name : 'AM',
                appFolder : 'app',
                launch : function() {
                        Ext.create('Ext.container.Viewport', {
                                    layout : 'border',
                                    controllers : ['Users'], //DEFAULT CONTROLLER
                                    defaults: {
                                    collapsible: false,
                                    split: true
                                    },
                                    items: [{    
                                    title:'Header',
                                        region: 'north',
                                        //contentEl: 'north', //Get our content from the "north" div
                                        margins: '5 5 5 5',
                                        height: 70,
                                        html: 'header',
                                    split:false //cannot resize this area
                                    },{
                                        title:'Navigation',
                                        collapsible: true, //make this column collapsable
                                        region:'west',
                                        contentEl: 'west', //Get our content from the "west" div
                                        margins: '5 0 5 5',
                                        cmargins: '5 5 5 5',
                                        html: '<ul><li><a href="#" id="add">Add Tab</a></li></ul>',
                                        width: 175,
                                        minSize: 100, //set the limits for resizing
                                        maxSize: 250 //set the limits for resizing
                                    },
                                     //tabs 
                                        {
                                        xtype: 'userlist',
                                        margins: '5 0 5 5',
                                        region: 'center',
                                        title : 'User List '
                                        }
                                    ]
                           });
                    } 
});

do you know why that error happen?

[editor]

I'm trying to make test app based on SenchaCon MVC video http://vimeo.com/33311074, exatcly the same code but I also get the same error ....

Ext.define('Sencha.view.Viewport', {
extend: 'Ext.TabPanel',


config: {


fullscreen: true,
tabBarPosition: 'bottom',


items: [
{
xtype: 'homepanel'
},
{
xtype: 'productspage'
}
]
}


});

I am using http://www.sencha.com/products/touch/download Sencha Touch 2 RC
<script src="touch/sencha-touch-all.js" type="text/javascript"></script>

Is there a workaround for using xtype or what is wrong here in my code? I have checked typos, etc. and everything is exactly the same as presented on video but it doesn't work.

I have also tried to put diferent names like suggested here im bug thread but this haven't helped much.