Results 1 to 7 of 7

Thread: [solved] Layout (viewPort) works great in Firefox, dies in Explorer

  1. #1

    Thumbs up [solved] Layout (viewPort) works great in Firefox, dies in Explorer

    I created a layout with north, south, west, and center areas. The west region is a treeview, and the other three aren't ext components.

    In Firefox, everything is lovely and I have no Firebug errors.

    In IE, the layout is REALLY tall, missing the west region, and generally looks broken. I'm also getting a javascript error: 'events is null or not an object' on a mysteriously empty line.

    The tree worked fine in IE prior to adding it to a layout, so I'm pretty sure it's the viewport.

    Thank you in advance for any help you can give!

    Best wishes,
    Cat

    Code:
    <script type="text/javascript">
    Ext.onReady(function(){
    
           //Ext.state.Manager.setProvider(new Ext.state.CookieProvider());
        var index_tree = new Ext.tree.TreePanel({
            width:100,
            //autoHeight:true,
            rootVisible:false,
            autoScroll:true,
            containerScroll: true,
            title: 'Select an ISA',
            loader: new Ext.tree.TreeLoader({ dataUrl:'includes/treedata.cfm' }), 
            root: new Ext.tree.AsyncTreeNode({
                text:'title'
            })
        });
        
        var viewport = new Ext.Viewport({
                layout:'border',
                items:[
                    new Ext.BoxComponent({
                        region:'north',
                        el: 'header',
                        style: 'background: white;',
                        height:48
                    }),
                    new Ext.BoxComponent({
                        region:'south',
                        el: 'footer',
                        height:30
                    }), {
                        region:'west',
                        el: 'west',
                        collapsible: true,
                        width: 225,
                        minSize: 175,
                        maxSize: 900,
                        autoScroll:true,
                        containerScroll: true,
                        layout:'fit',
                        margins:'0 1 0 0',
                        items: [index_tree]
                    },
                    new Ext.BoxComponent({
                        region:'center',
                        el: 'content',
                        margins:'0'
                    }),
                 ]
            });
        });
    </script>
    and my page:
    Code:
    <div id="header" style="z-index:10">
        <div style="position: absolute; top: 3px; left: 3px;">
            Yadda Yadda
        </div>
    </div>
    
    <div style="padding-top:37px;padding-bottom:0px">
    
    <div id="west" style="overflow: auto;">
    </div>
    
    <div id="content" style="z-index:1">
        <h1>Welcome!</h1>
        Some sort of welcome content should go here, with possibly instructions on what to do.
    </div>
    
    </div>
    
    <div id="footer" style="z-index:10">
    
        <div class="copyright">Copyright (c) 2008</div>
        <div class="utilityLinks"><a href="disclaimer.cfm" title="Disclaimer">Disclaimer</a></div>    
    
    </div>

  2. #2

    Default

    extra comma after your boxComponent

  3. #3

    Default

    Ha! Oh errant comma, why hast thou forsaken me?

    Have I been untrue? Have I been cruel, so that you felt the need to hide at the end of a list? Surely not!

    Mine love for you is everlasting, and I have returned you to thy proper place.

  4. #4

    Default

    I suggest some kind of context aware editor or IDE such as aptana that will make simple mistakes like this painfully obvious

  5. #5
    Ext JS Premium Member
    Join Date
    Jan 2008
    Posts
    88

    Default

    Quote Originally Posted by devnull View Post
    I suggest some kind of context aware editor or IDE such as aptana that will make simple mistakes like this painfully obvious
    Actually, they don't make them painfully obvious at all! Neither Aptana nor Netbeans catch all commas that are out of place.

    Does anyone know of a JS editor that does catch all JS syntax errors?

    Allan

  6. #6
    Sencha User
    Join Date
    Mar 2007
    Location
    Austria
    Posts
    118

    Default

    Quote Originally Posted by Allan View Post
    Does anyone know of a JS editor that does catch all JS syntax errors?
    I also did some research about that a couple of days ago. You can configure the Intellij Idea inspection profiles for JavaScript pretty well and it catches a lot of stuff (e.g. trailing commas in objects) but I haven't found a way to highlight trailing commas in an array. I'm thinking about writing an Idea plugin myself just to add this functionality because I find it highly annoying (or frustrating). The only thing that works for me is jslint but it would be far more convenient if there was IDE support for this.

    It might have something to do with the fact that all real browsers already ignore the trailing comma. Only "JScript currently gets this implementation detail wrong, even though it was specified in ECMAScript 3" - http://ejohn.org/blog/bug-fixes-in-javascript-2/

    Or they just don't care, I really don't know..

  7. #7
    Ext User para's Avatar
    Join Date
    Apr 2007
    Location
    Redmond, WA
    Posts
    918

    Default

    I don't know of one. I do all my development in FF. Once I'm satisfied with it in FF, I run it through JSLint. Once all errors and warning are taken care of, it works in IE every time.

Posting Permissions

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