1. #1
    Ext User
    Join Date
    Nov 2007
    Location
    wake forest, nc
    Posts
    4
    Vote Rating
    0
    canesFan08 is on a distinguished road

      0  

    Question ext-all-debug.js Error

    ext-all-debug.js Error


    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);
    Last edited by aconran; 16 Nov 2007 at 2:30 PM. Reason: please use code tags.

  2. #2
    Sencha - Community Support Team hendricd's Avatar
    Join Date
    Aug 2007
    Location
    Long Island, NY USA
    Posts
    5,962
    Vote Rating
    10
    hendricd will become famous soon enough hendricd will become famous soon enough

      0  

    Default


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

    Which version are playing with here?
    "be dom-ready..."
    Doug Hendricks

    Maintaining ux: ManagedIFrame, MIF2 (FAQ, Wiki), ux.Media/Flash, AudioEvents, ux.Chart[Fusion,OFC,amChart], ext-basex.js/$JIT, Documentation Site.


    Got Sencha licensing questions? Find out more here.


  3. #3
    Sencha - Architect Dev Team aconran's Avatar
    Join Date
    Mar 2007
    Posts
    9,080
    Vote Rating
    113
    aconran is a splendid one to behold aconran is a splendid one to behold aconran is a splendid one to behold aconran is a splendid one to behold aconran is a splendid one to behold aconran is a splendid one to behold aconran is a splendid one to behold

      0  

    Default


    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.
    Aaron Conran
    @aconran
    Sencha Architect Development Team

  4. #4
    Sencha - Architect Dev Team aconran's Avatar
    Join Date
    Mar 2007
    Posts
    9,080
    Vote Rating
    113
    aconran is a splendid one to behold aconran is a splendid one to behold aconran is a splendid one to behold aconran is a splendid one to behold aconran is a splendid one to behold aconran is a splendid one to behold aconran is a splendid one to behold

      0  

    Default


    The issue which Doug pointed out above is definitely critical and should be looked at first before you take my advice.
    Aaron Conran
    @aconran
    Sencha Architect Development Team

  5. #5
    Ext User
    Join Date
    Nov 2007
    Location
    wake forest, nc
    Posts
    4
    Vote Rating
    0
    canesFan08 is on a distinguished road

      0  

    Default


    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);
    Last edited by brian.moeskau; 19 Nov 2007 at 10:35 AM. Reason: code tags (# button)

  6. #6
    Sencha - Community Support Team hendricd's Avatar
    Join Date
    Aug 2007
    Location
    Long Island, NY USA
    Posts
    5,962
    Vote Rating
    10
    hendricd will become famous soon enough hendricd will become famous soon enough

      0  

    Default


    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).
    "be dom-ready..."
    Doug Hendricks

    Maintaining ux: ManagedIFrame, MIF2 (FAQ, Wiki), ux.Media/Flash, AudioEvents, ux.Chart[Fusion,OFC,amChart], ext-basex.js/$JIT, Documentation Site.


    Got Sencha licensing questions? Find out more here.


  7. #7
    Sencha User
    Join Date
    Apr 2012
    Location
    Austin, Texas
    Posts
    2
    Vote Rating
    0
    brian.moeskau is an unknown quantity at this point

      0  

    Default


    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

  8. #8
    Ext User
    Join Date
    Nov 2007
    Location
    wake forest, nc
    Posts
    4
    Vote Rating
    0
    canesFan08 is on a distinguished road

      0  

    Default


    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);
    Last edited by brian.moeskau; 19 Nov 2007 at 10:35 AM. Reason: code tags please

  9. #9
    Sencha - Community Support Team hendricd's Avatar
    Join Date
    Aug 2007
    Location
    Long Island, NY USA
    Posts
    5,962
    Vote Rating
    10
    hendricd will become famous soon enough hendricd will become famous soon enough

      0  

    Default


    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.
    "be dom-ready..."
    Doug Hendricks

    Maintaining ux: ManagedIFrame, MIF2 (FAQ, Wiki), ux.Media/Flash, AudioEvents, ux.Chart[Fusion,OFC,amChart], ext-basex.js/$JIT, Documentation Site.


    Got Sencha licensing questions? Find out more here.


  10. #10
    Sencha User
    Join Date
    Apr 2012
    Location
    Austin, Texas
    Posts
    2
    Vote Rating
    0
    brian.moeskau is an unknown quantity at this point

      0  

    Default


    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.