Cannot call method 'setActiveItem' of 'undefined'

**Jamie Avins** · 18 Feb 2012 1:14 PM

Can you post your application definition. I believe the problem lies there.

**marc.gayle** · 18 Feb 2012 1:16 PM

Sure...here goes:

Code:

Ext.application({
    tabletStartupScreen: 'core-tablet.png',
	phoneStartupScreen: 'core-phone.png',
	icon: 'core-icon.png',
	name: 'MyApp',
	views: ['Start', 'NewIncident'],
	
	launch: function() {
		Ext.create('MyApp.view.Start');
	}
});

**Jamie Avins** · 18 Feb 2012 1:19 PM

This seems correct. The Start is loading, I assume the Start.js file is in the same place as the NewIncident?

**marc.gayle** · 18 Feb 2012 1:23 PM

You mean in the same physical location?

Yes...it is at app/view/Start.js and NewIncident = app/view/NewIncident.js.

**Jamie Avins** · 18 Feb 2012 1:27 PM

Very odd, For now, can you add the NewIncident definition above the Ext.application. At least that way it will be defined and get you past this problem.

**marc.gayle** · 18 Feb 2012 1:37 PM

Ok I did that, i.e. I took the definition for 'Ext.define('MyApp.view.NewIncident') out of the NewIncident.js file and put it in my app.js before Ext.application.

Now, the app loads, but it still throws some errors in the console

[COLOR=red !important]GET http://localhost:5000/MyApp/view/NewIncident.js?_dc=1329600944029 404 (Not Found)[/COLOR]

[COLOR=red !important]sencha-touch-debug.js:7935Uncaught Error: [Ext.Loader] Failed loading 'MyApp/view/NewIncident.js', please verify that the file exists[/COLOR]

[COLOR=red !important]
[/COLOR]

When I click the 'create new Incident' button, it triggers this error:

sencha-touch-debug.js:6368Uncaught Error: [Ext.create] Invalid class name or alias '[object Object]' specified, must be a non-empty string

**Jamie Avins** · 18 Feb 2012 1:45 PM

Something is not right, can you post your full current views and application. I'll run it here and check it over.

**marc.gayle** · 18 Feb 2012 2:04 PM

Sure:

app/Index.html

Code:

<!DOCTYPE html>
<html>
<head>
    <title>My App</title>
    <link rel="stylesheet" href="resources/css/myapp.css">
    <link rel="stylesheet" href="resources/css/myapp-custom.css">
    <script src="lib/sencha-touch-debug.js"></script>
    <script src="app/app.js"></script>
    <script src="app/view/Start.js"></script>
    <script src="app/view/Bits.js"></script>
</head>
<body></body>
</html>

app/app.js:

Code:

// New
//------------------------------------------------------------
Ext.define('MyApp.view.NewIncident', {
    extend: 'Ext.form.FormPanel',
    xtype: 'incident',
    config: {
        layout: {
            type: 'vbox',
            align: 'stretch',
            pack: 'center'
        },
        items: [{
            xtype: 'textfield',
            name: 'CaseID',
            placeHolder: 'Incident Number'
        },{
            xtype: 'button',
            name: 'Begin',
            ui: 'Confirm',
            text: 'Begin',
            handler: function(button, event) {
                // MyApp.Viewport.setActiveItem('Dashboard', {type: 'fade'});
            }
        }],
        dockedItems: [{
            xtype: 'toolbar',
            cls: 'Secondary',
            dock: 'bottom',
            items: [{
                xtype: 'button',
                text: 'Cancel',
                handler: function() {
                    // MyApp.Viewport.setActiveItem('Start', {type: 'slide', direction: 'down'});
                }
            }]
        }],
        listeners: {
            activate: function() {
                ToolbarGlobal.setTitle('New Incident');
            }
        }        
    }
});


Ext.application({
    tabletStartupScreen: 'core-tablet.png',
    phoneStartupScreen: 'core-phone.png',
    icon: 'core-icon.png',
    name: 'MyApp',
    views: ['Start', 'NewIncident'],


    
    launch: function() {
        Ext.create('MyApp.view.Start');
    }
});

app/view/Start.js

Code:

Ext.define('MyApp.view.Start', {
    extend: 'Ext.Container',
    requires: ['MyApp.view.NewIncident'],
    config: {
        id: 'Start',
        cls: 'Start',
        fullscreen: true,
        layout: {
            type: 'vbox',
            pack: 'stretch',
            align: 'center', 
        },
        defaults: {
            flex: 1
        },
        items: [{
            xtype: 'panel',
            layout: {
                type: 'vbox',
                pack: 'top'
            },
            items: [{
                xtype: 'button',
                cls: 'PadTop',
                ui: 'Confirm',
                text: 'Create New Incident',
                handler: function(button, event) {
                    var myNewIncident = Ext.create({
                        xtype: 'incident',
                        id: 'Incident_New'
                    });
                    MyApp.Viewport.add(myNewIncident);
                    MyApp.Viewport.setActiveItem(myNewIncident);
                    MyApp.Viewport.animateActiveItem(myNewIncident, {type: 'slide', direction: 'up'});
                }
            }]
        },{
            xtype: 'panel',
            flex: '1',
            layout: {
                type: 'vbox',
                pack: 'bottom'
            },
            items: [{
                xtype: 'button',
                cls: 'PadBot',
                ui: 'Minor',
                text: 'Edit Existing Incident',
                handler: function(button, event) {
                    MyApp.Viewport.setActiveItem('Incident_Edit', {type: 'slide', direction: 'up'});
                }
            }]
        },{
            xtype: 'toolbar',
            docked: 'top',
            items: [{
                //iconCls: 'settings6',
                icon: 'resources/themes/images/myapp/icon-settings.png',
                ui: 'Default',
                handler: function() {
                    MyApp.Viewport.setActiveItem('Settings', {type: 'flip'});
                }
            },{
                xtype: 'spacer'
            },{
                //iconCls: 'info',
                icon: 'resources/themes/images/myapp/icon-info.png',
                ui: 'Default',
                handler: function() {
                    MyApp.Viewport.setActiveItem('Info', {type: 'flip'});
                    //var this_view = this.getId();
                    //console.log(this_view);
                }
            }]
        }]    
    }
    
});


// INTRO
//------------------------------------------------------------
Ext.define('MyApp.view.Intro', {
    extend: 'Ext.Panel',
    config: {
        id: 'Intro',
        layout: {
            type: 'vbox',
            align: 'center',
            pack: 'center'
        },
        items: [{
            html: [
                '<p>Welcome! Before you can get started you must.....</p>'
            ]
        },{
            xtype: 'button',
            ui: 'Default',
            cls: 'PadTop',
            text: 'Go to Settings',
            handler: function() {
                MyApp.Viewport.setActiveItem('Settings', {type: 'flip'});
            }
        }]        
    }


    
});


// FIRST-TIME RUN
//------------------------------------------------------------
Ext.define('MyApp.view.DetectFirst', {
    extend: 'Ext.Panel',
    config: {
        id: 'DetectFirst',
        layout: 'card',
        items: ['MyApp.view.Start', 'MyApp.view.Intro'],
        listeners: {
            activate: function() {
                ToolbarGlobal.hide();
            }
        }    
        
    }
});

app/view/Bits.js

Code:

// GENERAL
var setTitle = function(target,title) {
    target.dockedItems.items[0].setTitle(title);
}
// TOOLBARS
Ext.define('ToolbarGlobal',{
    extend: 'Ext.Toolbar',
    config: {
        xtype: 'toolbar',
        items: [{
            //iconCls: 'settings6',
            icon: 'resources/themes/images/myapp/icon-settings.png',
            ui: 'Default',
            handler: function() {
                MyApp.Viewport.setActiveItem('Settings', {type: 'flip'});
            }
        },{
            xtype: 'spacer'
        },{
            //iconCls: 'info',
            icon: 'resources/themes/images/myapp/icon-info.png',
            ui: 'Default',
            handler: function() {
                MyApp.Viewport.setActiveItem('Info', {type: 'flip'});
                //var this_view = this.getId();
                //console.log(this_view);
            }
        }]
    }
});

NewIncident.js

Code:

// The code pasted above the Ext.application in my app.js was right here
//
//

// Edit
//------------------------------------------------------------
Ext.define('EditIncident', {
    extend: 'Ext.TabPanel',
    config: {
        id: 'Incident_Edit',
        layout: {
            type: 'vbox',
            align: 'stretch'
        },
        ui: 'Filters',
        defaults: {
            flex: 1,
            itemTpl: '{date} ({number})',
        },
        items: [{
            xtype: 'list',
            title: 'By Date',
            store: IncidentsDate,
            itemTpl: '{date} ({number})',
            listeners: {
                itemtap: function() {
                    // MyApp.Viewport.setActiveItem('Dashboard', {type: 'slide', direction: 'left'});
                }
            }
        },{
            xtype: 'list',
            title: 'Incident Number',
            store: IncidentsID,
            itemTpl: '{number} ({date})',
            listeners: {
                itemtap: function() {
                    // MyApp.Viewport.setActiveItem('Dashboard', {type: 'slide', direction: 'left'});
                }
            }
            //onItemDisclosure: function(record, btn, index) {
            //    MyApp.Viewport.setActiveItem('Dashboard', {type: 'slide', direction: 'left'});
            //}
        }],
        dockedItems: [{
            xtype: 'toolbar',
            cls: 'Secondary',
            dock: 'bottom',
            items: [{
                xtype: 'button',
                text: 'Cancel',
                handler: function() {
                    // MyApp.Viewport.setActiveItem('Start', {type: 'slide', direction: 'down'});
                }
            }]
        }],
        listeners: {
            activate: function() {
                ToolbarGlobal.setTitle('Edit Incident');
            }
        }        
    }
});

I think that's everything, but if I have missed anything, let me know.

**Jamie Avins** · 18 Feb 2012 3:12 PM

Ok, Just about have it all working now.

First the issue with the loading of files:

Mine looks something like this, but other than the paths it should work for you. Notice I only load app.js.

Code:

    <link rel="stylesheet" href="../../../resources/css/sencha-touch.css"/>
    <script src="../../../sencha-touch-debug.js"></script>
    <script src="app.js" type="text/javascript"></script>

Next bug was my fault, I didn't realize we had done the xtype part. So we can just add this to the Viewport with add as follows and it will create it as well:

Code:

 
                handler: function(button, event) {
                    var myNewIncident = Ext.Viewport.add({
                        xtype: 'incident',
                        id: 'Incident_New'
                    });
                    Ext.Viewport.animateActiveItem(myNewIncident, {type: 'slide', direction: 'up'});
                }

Also note the Ext.Viewport is the reference to Viewport since it's a singleton and there's always just one.

At this point it all works, just the ToolbarGlobal from activate on the incident is a problem. But I'm guessing you just haven't gotten there yet.

**marc.gayle** · 18 Feb 2012 3:32 PM

You are right about the GlobalToolbar...but we couldn't get that working - for whatever reason. Haven't tackled it properly yet though.

As for the handler function, here is what I have:

Code:

                handler: function(button, event) {
                    var myNewIncident = Ext.create({
                        xtype: 'incident',
                        id: 'Incident_New'
                    });
                    MyApp.Viewport.add(myNewIncident);
                    MyApp.Viewport.setActiveItem(myNewIncident);
                    Ext.Viewport.animateActiveItem(myNewIncident, {type: 'slide', direction: 'up'});
                }

Note that I no longer get the 404 error...but now when I click 'Create New Incident', I get this error:

Uncaught Error: [Ext.create] Invalid class name or alias '[object Object]' specified, must be a non-empty string
That error is for 'sencha-touch-debug.js:6368'

I even commented out the lines above the new line, i.e. MyApp.Viewport.add(NewIncident), and the setActiveItem below it, and I still get that error.

Cannot call method 'setActiveItem' of 'undefined'

Thread Tools

Search Thread

Display