1. #11
    Sencha User Jamie Avins's Avatar
    Join Date
    Mar 2007
    Location
    Redwood City, California
    Posts
    3,661
    Vote Rating
    18
    Answers
    17
    Jamie Avins is a jewel in the rough Jamie Avins is a jewel in the rough Jamie Avins is a jewel in the rough

      0  

    Default


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

    Sencha Inc

    Jamie Avins

    @jamieavins

  2. #12
    Sencha User
    Join Date
    Jan 2012
    Posts
    63
    Vote Rating
    0
    marc.gayle is on a distinguished road

      0  

    Default


    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');
    	}
    });

  3. #13
    Sencha User Jamie Avins's Avatar
    Join Date
    Mar 2007
    Location
    Redwood City, California
    Posts
    3,661
    Vote Rating
    18
    Answers
    17
    Jamie Avins is a jewel in the rough Jamie Avins is a jewel in the rough Jamie Avins is a jewel in the rough

      0  

    Default


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

    Sencha Inc

    Jamie Avins

    @jamieavins

  4. #14
    Sencha User
    Join Date
    Jan 2012
    Posts
    63
    Vote Rating
    0
    marc.gayle is on a distinguished road

      0  

    Default


    You mean in the same physical location?

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

  5. #15
    Sencha User Jamie Avins's Avatar
    Join Date
    Mar 2007
    Location
    Redwood City, California
    Posts
    3,661
    Vote Rating
    18
    Answers
    17
    Jamie Avins is a jewel in the rough Jamie Avins is a jewel in the rough Jamie Avins is a jewel in the rough

      0  

    Default


    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.

    Sencha Inc

    Jamie Avins

    @jamieavins

  6. #16
    Sencha User
    Join Date
    Jan 2012
    Posts
    63
    Vote Rating
    0
    marc.gayle is on a distinguished road

      0  

    Default


    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]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

  7. #17
    Sencha User Jamie Avins's Avatar
    Join Date
    Mar 2007
    Location
    Redwood City, California
    Posts
    3,661
    Vote Rating
    18
    Answers
    17
    Jamie Avins is a jewel in the rough Jamie Avins is a jewel in the rough Jamie Avins is a jewel in the rough

      0  

    Default


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

    Sencha Inc

    Jamie Avins

    @jamieavins

  8. #18
    Sencha User
    Join Date
    Jan 2012
    Posts
    63
    Vote Rating
    0
    marc.gayle is on a distinguished road

      0  

    Default


    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.

  9. #19
    Sencha User Jamie Avins's Avatar
    Join Date
    Mar 2007
    Location
    Redwood City, California
    Posts
    3,661
    Vote Rating
    18
    Answers
    17
    Jamie Avins is a jewel in the rough Jamie Avins is a jewel in the rough Jamie Avins is a jewel in the rough

      0  

    Default


    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.

    Sencha Inc

    Jamie Avins

    @jamieavins

  10. #20
    Sencha User
    Join Date
    Jan 2012
    Posts
    63
    Vote Rating
    0
    marc.gayle is on a distinguished road

      0  

    Default


    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.