Beginner's questions: The following classes are not declared even...

[elcrian]

Hey,
I've just started messing arround with Sencha Touch, read through some of the tutorials and encoutered and error which I don't understand at all:

Uncaught Error: The following classes are not declared even if their files have been loaded: 'Sencha.view.Main'. Please check the source code of their corresponding files for possible typos: 'app/view/Main.js

The corresponding error occured after I tried to implement a primitive view-class into one of the examples to decapsulate views from an initializing class and to endorse OOP.

app.js

//<debug>Ext.Loader.setPath({
    'Ext': 'touch/src',
    'GS': 'app'
});
//</debug>


Ext.application({
    name: 'Sencha',
    views: ['Main'],
    launch: function() {
        Ext.Viewport.add(Ext.create('GS.view.Main'));
    }
});

main.js

Ext.define('GS.view.Main', {
    extend: 'Ext.tab.Panel',
    xtype: 'main',
    requires: [
        'Ext.TitleBar',
    ],
    config: {
        tabBarPosition: 'bottom',


        items: [
            {       title: 'Home',
                    iconCls: 'home',
                    cls: 'home',
                    html: [                       
                        '<h1>Welcome to Sencha Touch</h1>',
                        "<p>You're creating the Getting Started app. This demonstrates how ",
                        "to use tabs, lists and forms to create a simple app</p>",
                        '<h2>Sencha Touch 2</h2>'
                    ].join("")
                },
                //this is the new item
                {
                    title: 'Contact',
                    iconCls: 'user',
                    xtype: 'formpanel',
                    url: 'contact.php',
                    layout: 'vbox',


                    items: [
                        {
                            xtype: 'fieldset',
                            title: 'Contact Us',
                            instructions: 'Random text.',
                            items: [
                                {
                                    xtype: 'textfield',
                                    label: 'Name'
                                },
                                {
                                    xtype: 'emailfield',
                                    label: 'Email'
                                },
                                {
                                    xtype: 'textareafield',
                                    label: 'Message'
                                }
                            ]
                        },
                        {
                            xtype: 'button',
                            text: 'Send',
                            ui: 'confirm',
                            handler: function() {
                               alert('asdf-movie');
                            }
                        },
                        {
                            xtype: 'toolbar',
                            title: 'Mighty header of doom',
                            docked: 'top'
                        }
                    ]
                }
        ]
    }
});

I'm pretty sure that this error is incredibly simple to solve, but I don't really get it atm. I've never really learned or used JS, but I guess the stuff shouldn't be to hard anyways (I normally work with Java or C#).
Adding to that: What's the most recommendable example-project for a "newbie"?

Thanks in advance.

[george.m]

The error is a namespacing issue. In your Ext.Application code, you have set name: 'Sencha', but in your view, you have set the class name to 'GS.view.Main'.

So to solve this, replace name: 'Sencha' in your Ext.Application to read name: 'GS'

Remember to change this in the Ext.Viewport.add(..) aswell

[elcrian]

Darn it, now that was awfully simple. Thanks a lot!