Results 1 to 10 of 10

Thread: [SOLVED] Beta3-app is not working with 4.0 code

  1. #1
    Sencha User
    Join Date
    Apr 2007
    Posts
    172

    Default [SOLVED] Beta3-app is not working with 4.0 code

    Hi,

    I've created the MVC-app with Beta 3 and expanded it. Using border-layout, created several controllers, models, stores and views. It is not yet finished, but it was running with Beta3.

    I've just altered the path in the index.html to ext-all-debug from beta3 to the new 4.0 and now I get this error using firebug (FF4.0):
    The following classes are not declared even if their files have been loaded: 'EX.controller.headermainmenu'. Please check the source code of their corresponding files for possible typos: 'app/controller/headermainmenu.js'
    http://localhost/ext-4.0.0/ext-all.js
    Line 1

    This code is working under Beta3.

    So is something changed I'm not aware of?

    index.html
    PHP Code:
    <html>
    <
    head>
        <
    meta http-equiv="Content-Type" content="text/html; charset=utf-8">
        <
    title id="page-title">Main title</title>

        <
    link rel="stylesheet" type="text/css" href="../ext-4.0.0/resources/css/ext-all.css">
        <
    script type="text/javascript" src="../ext-4.0.0/ext-all.js"></script>
    <script>
    </script>
        <script type="text/javascript" src="app.js"></script>
    </head>
    <body>

    </body>
    </html> 
    app.js
    PHP Code:
    // JavaScript Document
    Ext.Loader.setConfig({    
        
    enabledtrue,    
        
    disableCachingtrue,    
        
    paths: {'EX''/app'}
    });

    var 
    objFormEmptyLine = {
                            
    xtype'displayfield',
                            
    fieldLabel'&nbsp;',
                            
    labelSeparator''
                        
    };

    Ext.create('Ext.app.Application', { 
        
    name'EX'

        
    controllers: [
            
    'headermainmenu',
            
    'countries',
            
    'members',
            
    'seasons',
            
    'handicap',
            
    'leagues'
        
    ], 
     
        
    views: [
            
    'header.Mainmenu',
            
    'league.List',
            
    'member.List'
        
    ], 
     
        
    launch: function() { 
            
    Ext.create('Ext.container.Viewport', { 
    /*
                layout: 'fit',
                items: { 
                    xtype: 'leaguelist' 
                }
    */
                
    layout'border',
                
    items: [
                    {
                        
    xtype'header_mainmenu',
                        
    layout'fit',
                        
    region'north',
                        
    borderfalse,
                        
    height120
                    
    },
                    {
                        
    xtype'container',
                        
    region'west',
                        
    layout'border',
                        
    width350,
                        
    collapsibletrue,
                        
    splittrue,
                        
    items: [

                            {
                                
    xtype'panel',
                                
    layout'fit',
                                
    region'center'
                            
    },

                            {
                                
    xtype'memberlist',
                                
    region'south',
                                
    collapsibletrue,
                                
    splittrue,
                                
    flex0.8
                            
    }
                        ]
                    },
                    {
                        
    xtype'container',
                        
    region'center',
                        
    layout'fit',
                        
    items: [
                            {
                                
    xtype'leaguelist'
                            
    }
                        ]
                    }
                ]
            }); 
        } 
    }); 
    controller/headermainmenu.js
    PHP Code:
    Ext.define('EX.controller.Headermainmenu', { 
        
    extend'Ext.app.Controller'

        
    init: function() { 
            
    this.control({ 
                
    'header_mainmenu button[id=home]': { 
                    
    clickthis.gotoIndex
                
    },
                
    'header_mainmenu button[id=leagues]': { 
                    
    clickthis.gotoIndex
        
    }
            }); 
        }, 

        
    gotoIndex: function() {
            
    window.document.location.href 'index.html';
        }
    }); 

    If I change the controller order in app.js, I get the same message but with a different name (eg. members

    I'm just trying to learn MVC, so it might overlook something.
    If you need more information, please let me know.

    I also noted that reloading the app, makes Firefox uses more and more memory. So there is a huge memoryleak in Ext 4.0 / MVC architecture.

    Thanks,
    Maurice.

  2. #2
    Sencha Premium Member
    Join Date
    Feb 2009
    Posts
    317

    Default

    The class definition has a capital "H" in Headermainmenu, but you're referencing it using a lowercase "h" in your "controllers: [...]" section.

    The recommended naming convention would be to use the capital H in the class name - "EX.controller.Headermainmenu" - and everywhere that the class is referenced, including the javascript file name - "/app/controller/Headermainmenu.js"

    (and camelCase is ok, too - "HeaderMainMenu")

  3. #3
    Sencha User
    Join Date
    Apr 2007
    Posts
    172

    Default

    Thanks! That seems to be the first problem. Apparently 4.0 is way more strict.

    I now get this message: Cannot create an instance of unrecognized alias: widget.header_mainmenu
    The view 'header.Mainmenu' is defined with a capital M, just like the js-file. The subdir 'header' is defined as lower case.

    PHP Code:
    Ext.define('EX.view.header.Mainmenu' ,{ 
        
    extend'Ext.panel.Panel'
        
    alias 'widget.header_mainmenu'

        
    bodyStyle: {
            
    background'#222e87;',
            
    color'#f7f8fe',
            
    padding'10px 20px'
        
    },
        
    html'<font size=6><strong>Main menu</strong></font>',
            
        
    bbar: {
            
    xtype'toolbar',
            
    items: [
                {
                    
    xtype'tbspacer',
                    
    width20
                
    },
                {
                    
    xtype'button',
                    
    text'Home',
                    
    id'home'
                
    },
                {
                    
    xtype'button',
                    
    text'Leagues',
                    
    id'leagues'
                
    },
                {
                    
    xtype'button',
                    
    text'Reports',
                    
    id'reports'
                
    },
                {
                    
    xtype'button',
                    
    text'Maintenance',
                    
    id'maintenance',
                    
    menu: [
                        {
                            
    xtype'menuitem',
                            
    text'Leagues',
                            
    layout'vbox',
                            
    menu: [
                                {
                                    
    xtype'menuitem',
                                    
    text'Seasons',
                                    
    id'seasons'
                                
    },
                                {
                                    
    xtype'menuitem',
                                    
    text'Handicap',
                                    
    id'handicap'
                                
    }
                            ]
                        },
                        {
                            
    xtype'menuitem',
                            
    text'Members',
                            
    layout'fit',
                            
    menu: [
                                {
                                    
    xtype'menuitem',
                                    
    text'Countries',
                                    
    id'countries'
                                
    }
                            ]
                        },
                        {
                            
    text'Languages',
                            
    id'languages'
                        
    }
                    ]
                },
                
    '->',
                {
                    
    xtype'button',
                    
    text'Logout',
                    
    id'logout'
                
    },
                {
                    
    xtype'tbspacer',
                    
    width20
                
    }
            ]
        },

        
    initComponent: function() { 
            
    this.callParent(arguments); 
        } 

    }); 

  4. #4
    Sencha User
    Join Date
    Apr 2007
    Posts
    172

    Default

    SOLVED! (can't seem to change the main title as I get an error 'PATHS is not defined' in firebug for this action (edit post, go advanced)).

    Finally found the problem. Apparently the documentation (guide) for MVC architecture changed!! (and so has Ext JS 4.0 compared to beta 3).

    The views MUST now be part of the controller-code instead of the application-code.

  5. #5
    Sencha User Jehu's Avatar
    Join Date
    Feb 2011
    Posts
    24

    Default

    Quote Originally Posted by medusadelft View Post
    Finally found the problem. Apparently the documentation (guide) for MVC architecture changed!! (and so has Ext JS 4.0 compared to beta 3).
    I can't find the difference you talking about. At the mvc-guide the views are still in Application.js, not in the controller.
    How you've solved your problem exactly?

  6. #6
    Sencha User Jehu's Avatar
    Join Date
    Feb 2011
    Posts
    24

    Default

    ok, i've added requires to the controllers. now it works. but why define views: [...] in Application.js if they are not autoloaded?

  7. #7
    Sencha Premium Member steffenk's Avatar
    Join Date
    Jul 2007
    Location
    Haan, Germany
    Posts
    2,676

    Default

    Quote Originally Posted by medusadelft View Post
    SOLVED! (can't seem to change the main title as I get an error 'PATHS is not defined' in firebug for this action (edit post, go advanced)).
    Go to overview and dblclick beside title to change it.
    vg Steffen
    --------------------------------------
    Release Manager of TYPO3 4.5

  8. #8
    Sencha User
    Join Date
    Apr 2007
    Posts
    172

    Default

    Maybe you are using a cached version of the achitecture guide?

    In the Beta3 documentation about the MVC achitecture, one of the code-pieces is this:
    PHP Code:
    Ext.create('Ext.app.Application', {
        
    name'AM',

        
    controllers: [
            
    'Users'
        
    ],

        
    views: [
            
    'user.List'
        
    ],

        
    launch: function() {
            
    Ext.create('Ext.container.Viewport', {
                
    layout'fit',
                
    items: {
                    
    xtype'userlist'
                
    }
            });
        }
    }); 

    In the new 4.0.0 MVC guide, the same code-piece is:
    PHP Code:
    Ext.define('AM.controller.Users', {
        
    extend'Ext.app.Controller',

        
    views: [
            
    'user.List'
        
    ],

    ...... 
    and
    PHP Code:
    Ext.application({
        
    name'AM',

        
    controllers: [
            
    'Users'
        
    ],

        
    launch: function() {
            
    Ext.create('Ext.container.Viewport', {
                
    layout'fit',
                
    items: {
                    
    xtype'userlist'
                
    }
            });
        }
    }); 
    Last edited by medusadelft; 27 Apr 2011 at 5:18 AM. Reason: added version number

  9. #9
    Sencha User
    Join Date
    Apr 2007
    Posts
    172

    Default

    Quote Originally Posted by steffenk View Post
    Go to overview and dblclick beside title to change it.
    Thanks, it worked!

  10. #10
    Sencha User
    Join Date
    Apr 2007
    Posts
    172

    Default

    Quote Originally Posted by steffenk View Post
    Go to overview and dblclick beside title to change it.
    Thanks, it worked!

Similar Threads

  1. Replies: 1
    Last Post: 15 Apr 2011, 5:47 AM
  2. Code Not Working ! !
    By sunder in forum Sencha Touch 1.x: Discussion
    Replies: 3
    Last Post: 3 Sep 2010, 4:02 AM
  3. [SOLVED]strange html code on a combobox in a editorgridpanel[SOLVED]
    By axelaxel in forum Ext 2.x: Help & Discussion
    Replies: 3
    Last Post: 13 Nov 2008, 4:52 AM
  4. JS-Code isn't working within Tab
    By Spiff1 in forum Ext 2.x: Help & Discussion
    Replies: 9
    Last Post: 13 May 2008, 1:25 AM
  5. Working on FF but not on IE [code inside]
    By greencavern in forum Ext 2.x: Help & Discussion
    Replies: 2
    Last Post: 4 Feb 2008, 4:15 AM

Tags for this Thread

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •