ext-all-debug.js Error

**canesFan08** · 16 Nov 2007 2:23 PM

I'm a newbie to ExtJS and I'm using version 2.0, attempting to build an application properly using the Module pattern, namespace, application, and viewport. When I attempt to view the page in both IE and Firefox I'm getting an error in ext-all-debug.js, line 1504 (error info from Firebug noted below):

l.fireFn has no properties
http://localhost:2587/bbSchoolShell/...t-all-debug.js
Line 1504

The ASPX page and JS files are noted below. Any suggestions to resolve this issue would be
greatly appreciated!

"Default.aspx"

Code:

<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
    <title>Untitled Page</title>
        <!-- Include Ext stylesheets here: -->
        <link rel="stylesheet" type="text/css" href="ext-2.0/resources/css/ext-all.css">

        <!-- GC -->
        <!-- LIBS -->
        <script type="text/javascript" src="ext-2.0/adapter/ext/ext-base.js"></script>
        <!-- ENDLIBS -->
        
        <script type="text/javascript" src="ext-2.0/ext-all-debug.js"></script>
        
        <script type="text/javascript" src="js/bbSchool.js"></script>
    
    
    <link rel="stylesheet" type="text/css" href="css/Default.css">
</head>
<body>
    <form id="form1" runat="server">
        <div id="page-div" style="width:774px;">
        
            <div id="north-div">
                <img src="images/bb_header.jpg" alt="B&B Home" style="border:none;" />
                <div id="toolbar">
                
                </div>
            </div>
            
            <div id="content-div" class="contentcolumn">
            </div>
            
            <div id="footer">
             </div>
        </div>
    </form>
</body>
</html>

"Default.js"

Code:

// reference local blank image
Ext.BLANK_IMAGE_URL = 'ext-2.0/resources/images/default/s.gif';

// create namespace
Ext.namespace('bbSchool');

// create application
bbSchool.app = function() {

    // private variables

    // private functions

    // public space
    return {
        init : function () { 
        /*
        *****************************************************************************
            BEGIN creating the main layout
                north:  header img and toolbar
                center: content
                south:  footer 
        *****************************************************************************
        */
        //Ext.state.Manager.setProvider(new Ext.state.CookieProvider());
           try {
                // create the main layout
                var layout = new Ext.BorderLayout(document.body, {
                    hideOnLayout: true,
                    north: {
                        titlebar: false,
                        split:false,
                        initialSize: 25
                    },
                    center: {
                        titlebar: false,
                        autoScroll:false,
                        tabPosition: 'top',
                        closeOnTab: true,
                        alwaysShowTabs: true,
                        resizeTabs: true
                    }, 
                    south: {
                        titlebar: false,
                        split:false,
                        initialSize: 22,
                        collapsible: false,
                        animate: false
                    }
                });
            }
            
            catch(e){
                alert('Create Main Layout Error: "' + e.message + '" at line: ' + e.lineNumber);
            }

            // tell the layout not to perform layouts until we're done adding everything
            layout.beginUpdate();
                layout.add('north', new Ext.ContentPanel('north-div'));
                
                // create the add feed toolbar
                var maintb = new Ext.Toolbar('toolbar');
                maintb.addButton({
                    id:'btnHome', 
                    text: 'Home', 
                    click: this.navigateHandler.createDelegate(this)
                });

                maintb.addButton({
                    id:'btnAbout', 
                    text: 'About B&B', 
                    click: this.navigateHandler.createDelegate(this)
                });

                maintb.addButton({
                    id:'btnEndorsements', 
                    text: 'Endorsements', 
                    click: this.navigateHandler.createDelegate(this)
                });

                maintb.addButton({
                    id:'btnFAQs', 
                    text: 'FAQs', 
                    click: this.navigateHandler.createDelegate(this)
                });

                maintb.addButton({
                    id:'btnLegal', 
                    text: 'Legal Authority', 
                    click: this.navigateHandler.createDelegate(this)
                });
                
                // restore any state information
                //layout.restoreState();
            layout.endUpdate();

/*    
            var innerLayout = new Ext.BorderLayout('content-div', {
                center: {
                    split:false,
                    //initialSize:29,
                    autoScroll: false,
                    titlebar: false,
                    collapsible: false
                },
                south: {
                    autoScroll:false 
                }
            });

            innerLayout.add('center', new Ext.ContentPanel('content-div'));
            innerLayout.add('south', new Ext.ContentPanel('footer', {fitToFrame: true}));
            mainLayout.add('center', new Ext.NestedLayoutPanel(innerLayout));
            mainLayout.endUpdate();     
*/
 
        /*
        *****************************************************************************
            END specifying ExtJS layout 
        *****************************************************************************
        */

        navigateHandler : function(item) {
            //alert('NavItem: ' + item.text);
            switch(item.text){
                case 'Home':
                    alert("You clicked on the Home menu item.");
                    break;
                    
                case 'About B&B':
                    alert("You clicked on the About B&B menu item.");
                    break;
                    
                case 'Endorsements':
                    alert("You clicked on the Endorsements menu item.");
                    break;
                    
                case 'FAQs':
                    alert("You clicked on the FAQs menu item.");
                    break;
                    
                case 'Legal Authority':
                    alert("You clicked on the Legal Authority menu item.");
                    break;
                    
                case 'Contact Us':
                    alert("You clicked on the Contact Us menu item.");
                    break;
                    
                case 'Help':
                    alert("You clicked on the Help menu item.");
                    break;
                    
                case 'Login':
                    alert("You clicked on the Login menu item.");
                    break;
                    
                default:
                    alert("You clicked on the default menu item.");
                    break;
            }
        } //end navigateHandler
        
    } //end init function
    
    } //end return
        
}(); // end bbSchool app

Ext.onReady(bbSchool.init, bbSchool, true);
//Ext.EventManager.onDocumentReady(bbSchool.init, bbSchool, true);

**hendricd** · 16 Nov 2007 2:29 PM

You are loading 2.0 version libraries, but using 1.1 ContentPanels in your script.

Which version are playing with here?

**aconran** · 16 Nov 2007 2:33 PM

The error which you posted is typically due to trying to tie an event handler to a function that doesn't exist. Look at your code above and review where navigateHandler is. It should be part of the return instead of nested inside the init function.

**aconran** · 16 Nov 2007 3:23 PM

The issue which Doug pointed out above is definitely critical and should be looked at first before you take my advice.

**canesFan08** · 19 Nov 2007 8:39 AM

My intent was to use 2.0, thanks for noting my use of ContentPanel. I've trimmed down the JS to what's noted below but I'm still getting the error message "l.fireFn has no properties":

Code:

// reference local blank image
Ext.BLANK_IMAGE_URL = 'ext-2.0/resources/images/default/s.gif';

// create namespace
Ext.namespace('bbSchool');

// create application
bbSchool.app = function() {

    // private variables

    // private functions

    // public space
    return {
        init : function () { 
           try {
                // create the main layout
                var layout = new Ext.BorderLayout(document.body, {
                    north: {
                        titlebar: false,
                        split:false
                    },
                    center: {
                        titlebar: false,
                        autoScroll:false
                    }, 
                    south: {
                        titlebar: false,
                        split:false,
                        collapsible: false,
                        animate: false
                    }
                });
            }
            catch(e){
                alert('Create Main Layout Error: "' + e.message + '" at line: ' + e.lineNumber);
            }

            // tell the layout not to perform layouts until we're done adding everything
            layout.beginUpdate();
                layout.add('north', new Ext.Panel('north-div'));
            layout.endUpdate();
        
        } //end init function
            
    } //end return
        
}(); // end bbSchool app

Ext.onReady(bbSchool.init, bbSchool, true);

**hendricd** · 19 Nov 2007 8:47 AM

Lose the try catch wrapper (in bbSchool.init) so you can use Firebug to show you the callstack -- you need to find out what event is being fired (and by whom).

**brian.moeskau** · 19 Nov 2007 9:21 AM

This layout code is still 1.1 style. This is not valid:

Code:

layout.beginUpdate();
layout.add('north', new Ext.Panel('north-div'));
layout.endUpdate();

Please have a look at this: http://extjs.com/learn/Ext_1_to_2_Mi...rLayout_to_2.0

**canesFan08** · 19 Nov 2007 10:25 AM

Thanks for the link Brian but I had previously seen that page. I've limited my JS code to what's noted below (I removed the try/catch as suggested in another response) but I'm still getting an error in both IE and Firefox (I copied the error from FireFox and that is noted below as well):

l.fireFn has no properties
http://localhost:2587/bbSchoolShell/...t-all-debug.js
Line 1504

my revised JS file:

Code:

// reference local blank image
Ext.BLANK_IMAGE_URL = 'ext-2.0/resources/images/default/s.gif';

// create namespace
Ext.namespace('bbSchool');

// create application
bbSchool.app = function() {

    // private variables

    // private functions

    // public space
    return {
        init : function () { 
                var viewport = new Ext.Viewport({
                    layout:'border',
                    items:[
                        {
                            region:'north',
                            contentEl: 'north-div'
                        },{
                            region:'center',
                            contentEl: 'center-div'
                        },{
                            region:'south',
                            contentEl: 'south-div'
                        }]
                });                        
        
        } //end init function
            
    } //end return
        
}(); // end bbSchool app

Ext.onReady(bbSchool.init, bbSchool, true);

**hendricd** · 19 Nov 2007 10:30 AM

Why don't you start with one of the basic 2.0 examples and modify it. Your still stuck on 1.1 thinking... The layout engine is dramatically different from 1.x.

**brian.moeskau** · 19 Nov 2007 10:34 AM

Are you still using this html?

Code:

    <form id="form1" runat="server">
        <div id="page-div" style="width:774px;">
        
            <div id="north-div">
                <img src="images/bb_header.jpg" alt="B&B Home" style="border:none;" />
                <div id="toolbar">
                
                </div>
            </div>
            
            <div id="content-div" class="contentcolumn">
            </div>
            
            <div id="footer">
             </div>
        </div>
    </form>

If so, your naming does not match your code.

ext-all-debug.js Error

Thread Tools

Search Thread

Display

ext-all-debug.js Error

ext-all-debug.js Error