Cannot call method 'substring' of undefined

1
votes

Here is my code:

Ext.define('Ext.app.Portal', {
    extend: 'Ext.container.Viewport',

    uses: ['Ext.app.PortalPanel', 'Ext.app.PortalColumn', 'Ext.app.GridPortlet', 'Ext.app.ChartPortlet'],

    getTools: function () {
        return [{
            xtype: 'tool',
            type: 'gear',
            handler: function (e, target, panelHeader, tool) {
                var portlet = panelHeader.ownerCt;
                portlet.setLoading('Working...');
                Ext.defer(function () {
                    portlet.setLoading(false);
                }, 2000);
            }
        }];
    },

    initComponent: function () {
        var content = '<div class="portlet-content">' + Ext.example.shortBogusMarkup + '</div>';

        Ext.apply(this, {
            id: 'app-viewport',
            layout: {
                type: 'border',
                padding: '0 5 5 5'
            }, //eo layout
            items: [{ //app-header : item 1 of app-viewport
                id: 'app-header',
                xtype: 'box',
                region: 'north',
                height: 40,
                html: 'My Portal'
            }, { //container : item 2 of app-viewport
                xtype: 'container',
                region: 'center',
                layout: 'border',
                items: [{ //app-options: item 1 of container
                    id: 'app-options',
                    title: 'Options',
                    region: 'west',
                    animCollapse: true,
                    width: 200,
                    minWidth: 150,
                    maxWidth: 400,
                    split: true,
                    collapsible: true,
                    layout: 'accordion',
                    layoutConfig: {
                        animate: true
                    },
                    items: [{ //portal: item 1 of app-options

                        title: 'portal',
                        autoScroll: true,
                        border: false,
                        iconCls: 'nav'
                    }, { //settings : item 2 of app-options
                        title: 'Settings',
                        html: '<div class="portlet-content">' + 'details ??' + '</div>',
                        border: false,
                        autoScroll: true,
                        iconCls: 'settings'
                    }] //eo items app-options
                }, { //item 2 of container    
                    id: 'app-portal',
                    xtype: 'tabpanel',
                    activeTab: 0,
                    region: 'center',
                    items: [{
                        title: 'tab1',
                        layout: 'column',
                        html: 'this is the first tab',
                        closable: true
                    }, {
                        title: 'tab2',
                        closable: true
                    } //eo tab2
                    ] //eo items tabpanel

                }]
            }] //eo   app-portal
        }); //eo apply

        this.callParent(arguments);
    },

    onPortletClose: function (portlet) {
        this.showMsg('"' + portlet.title + '" was removed');
    },

    showMsg: function (msg) {
        var el = Ext.get('app-msg'),
            msgId = Ext.id();

        this.msgId = msgId;
        el.update(msg).show();

        Ext.defer(this.clearMsg, 3000, this, [msgId]);
    },

    clearMsg: function (msgId) {
        if (msgId === this.msgId) {
            Ext.get('app-msg').hide();
        }
    }

});

Any help would be greatly appreciated.

3
extjstabsportalextjs4

3 Answers

6
votes

For others who might see "Cannot call method 'substring' of undefined", when I see this it's usually because of a problem finding an alias. Usually a bad xtype. For instance, if I use xtype: 'img' instead of xtype: 'image'. I debug this by looking in the stack trace for 'instantiateByAlias' and look at the arguments for that call. One of them is a config with the problematic xtype in it.

3
votes

first... i tried to copypaste your code, and replace it into portal sample,...
i didn't get your error, there is no substring error, but i got error in tabpanel part.. i think, the error is because uses config (this because substrin, can be found in classes.js)..

in portal sample, they use Ext.app.PortalPanel, Ext.app.PortalColumn, Ext.app.GridPortlet,and Ext.app.ChartPortlet,
but in your script you don't use it.. just remove uses part,
you don't need that, you just need tabpanel

second, see classes.js file there is no tabpanel define...
if you want to manipulate the portal without boundaries..
use the ext-all.js instead of ext-core..

change this : 

<script type="text/javascript" src="../../builds/ext-core.js"></script>
<script type="text/javascript" src="../shared/examples.js"></script>
<script type="text/javascript" src="classes.js"></script>
<script type="text/javascript" src="portal.js"></script>

to this

<script type="text/javascript" src="../../bootstrap.js"></script>
<script type="text/javascript" src="../shared/examples.js"></script>
<script type="text/javascript" src="portal.js"></script>
0
votes

tats correct Usually a bad xtype. For instance, if I use xtype: 'img' instead of xtype: 'image'. will cause this.