Page 1 of 2 12 LastLast
Results 1 to 10 of 20

Thread: [OPEN-1059] JS error on IE7 / iFrames

    Thank you for reporting this bug. We will make it our priority to review this report.
  1. #1
    Sencha User
    Join Date
    Dec 2008
    Posts
    73

    Default [OPEN-1059] JS error on IE7 / iFrames

    Hello,

    I made this simple application and wrapped it in an iframe.

    index.jsp
    Code:
    <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"  "http://www.w3.org/TR/html4/loose.dtd">
    <html>
        <head>
            <title>Test Application</title>
            <link rel="stylesheet" type="text/css"  href="js/ext/resources/css/ext-all.css" />
    
    <!-- Extjs lib-->
            <script type="text/javascript"  src="js/ext/adapter/ext/ext-base.js"></script>
            <script type="text/javascript"  src="js/ext/ext-all-debug.js"></script>
            
            <script type="text/javascript" src="temp.js"  ></script>
            
        </head>
        <body>
        </body>
    </html>
    wrapper.jsp

    Code:
    <html>
        <head>
        </head>
        <body>
            <iframe src ="index.jsp" height="100%" width="100%">
            Your browser does not support iframes.
            </iframe> 
        </body>
    </html>
    temp.js
    Code:
    Ext.namespace('test.view');
    
    test.view.Main = function () {
        
        this.initView = function () {
            Ext.QuickTips.init();
            
            var pushPullStore = new Ext.data.SimpleStore({
                autoLoad: true,
                fields: ['code', 'description'],
                data: [
                    ['', 'Both'],
                    ['PUSH', 'Push'],
                    ['PULL', 'Pull']]
            });
            
            var pushPullCombo = new Ext.form.ComboBox({
                fieldLabel: 'Push/Pull',
                triggerAction: 'all',
                mode: 'local',
                store: pushPullStore,
                displayField: 'description',
                valueField: 'code',
                forceSelection: true,
                width: 95,
                name: 'pushPullCd',
                value: ''
            });
           
            new Ext.Viewport({
                items : [{
                  xtype : 'panel',
                  items : [{
                      xtype : 'button',
                      text : 'Hello',
                      handler : function() {
                          alert('hello');
                      }
                  }, pushPullCombo]
                }]
            })
            
        };
    
        return {
            init: function () {
                this.initView();
            }
        }
    }();
    
    Ext.onReady(test.view.Main.init)
    When I try accessing the code using index.jsp, the components work fine, but if I access the app using wrapper.jsp, IE7 throws a javascript error saying Ext.fly(...) is null or not an object when I select an entry from the combobox and the button doesn't show its alert message.

    Can anyone help, please? The issue seems to occur only for IE7 and not for other IE versions or Firefox.

    Thank you!

  2. #2
    Sencha Premium Member
    Join Date
    Oct 2007
    Posts
    8

    Default having same/similar problem

    We are having a similar problem:

    Using a Sharepoint webpart to point at another server hosting my Ext enabled website. FF has no issues... IE7 outside of sharepoint has no issues. IE7 and Sharepoint webpart (IFrame) produces javascript error 'Ext.fly(...)' is Null or not an object. on a button click.

  3. #3
    Sencha - Community Support Team jsakalos's Avatar
    Join Date
    Apr 2007
    Location
    Slovakia
    Posts
    27,664

    Default

    This sounds like a bug. Did you search bugs forum if anything similar has already been reported? I can move this thread to bugs if not.
    Jozef Sakalos, aka Saki

    Education, extensions and services for developers at new http://extjs.eu
    News: Grid MultiSearch Plugin, Grid MultiSort Plugin, Configuring ViewModel Hierarchy


  4. #4
    Sencha User
    Join Date
    Dec 2008
    Posts
    73

    Default

    Thank you for the support.

    I've searched the ExtJS forums and all I've found that's related is an issue with the DOCTYPE. If you add a frameset doctype to the containing jsp (in this case, wrapper.jsp) and convert the iframes into frame tags, then everything works fine.

    However, our application is meant to be ported into a larger application that uses iframes to display a multitude of applications. Adding a doctype and changing the tags will just not be possible.

    Please move into bugs, if possible. I'll continue to check into the thread for progress. We just need any fixes quite urgently because we are already in QA phase and the users just aren't able to use our application from IE7.

    Thanks again.


    ETA:

    Actually, if you remove the doctype declaration from index.jsp above, everything will work ok. However, our application is (obviously) much much larger than the one above and any custom CSS that we have gets distorted if we do that.
    Last edited by cdeguzman; 30 Mar 2010 at 11:11 PM. Reason: Adding extra information

  5. #5
    Sencha - Community Support Team jsakalos's Avatar
    Join Date
    Apr 2007
    Location
    Slovakia
    Posts
    27,664

    Default

    Moved. It looks more like IE bug than Ext bug, perhaps there is a workaround.
    Jozef Sakalos, aka Saki

    Education, extensions and services for developers at new http://extjs.eu
    News: Grid MultiSearch Plugin, Grid MultiSort Plugin, Configuring ViewModel Hierarchy


  6. #6
    Sencha User Jamie Avins's Avatar
    Join Date
    Mar 2007
    Location
    Redwood City, California
    Posts
    3,661

    Default

    What version of Ext is this for? Sounds like an issue with onReady in the IFrame perhaps.

  7. #7
    Sencha Premium Member
    Join Date
    Jun 2009
    Posts
    5

    Default Ext version

    In our (rjackson64840, above and I work together) case, this is Ext JS Library 3.0.3, against SharePoint Server 2007, using IE 7.0.5730.13.

  8. #8
    Sencha User Jamie Avins's Avatar
    Join Date
    Mar 2007
    Location
    Redwood City, California
    Posts
    3,661

    Default

    The have changed the onReady detection code for 3.2. Are you able to test you application with it?

  9. #9
    Sencha Premium Member
    Join Date
    Jun 2009
    Posts
    5

    Default

    Yes, I think we can try version 3.2 and see what happens. We will let you know the results.

  10. #10
    Sencha Premium Member
    Join Date
    Jun 2009
    Posts
    5

    Default Results using Ext JS version 3.2

    We were able to test with version 3.2, which produced the same javascript error with IE7 + Sharepoint.

    I think it would help to show the code we are using, derived from TreeCombo.js implementation in the regular forums. Ref: http://extjs.com/forum/showthread.php?t=38654&page=4. For version 3.2, the only change from 3.0.2 is to remove the "readonly: true" line.

    The parent values populate ok, but any click on the [+] expanders produces the error.

    Could not attach the js file here, so pasting below.

    TreeCombo.js
    =========

    Code:
    Ext.namespace('Ext.ux'); 
     
    /* ------------------------------------------------------------------------- 
        custom implementation so that we can add more 'choices' to the tree 
        data that is returned in the json response 
    --------------------------------------------------------------------------*/ 
    Ext.ux.TreeLoader = Ext.extend(Ext.tree.TreeLoader, { 
     
        /* ------------------------------------------------------------------------- 
     
        --------------------------------------------------------------------------*/ 
        constructor : function(config) { 
            config = config || {}; 
     
            Ext.apply(config, { 
                // @todo - additional config here 
            }); 
     
            Ext.applyIf(config, { 
                // @todo - conditional config here 
            }); 
     
            Ext.ux.TreeLoader.superclass.constructor.call(this, config); 
        } // constructor() 
        , 
        /* ------------------------------------------------------------------------- 
     
         --------------------------------------------------------------------------*/ 
        initComponent : function() { 
            Ext.ux.TreeLoader.superclass.initComponent.call(this); 
     
        } // initComponent() 
        , 
        processResponse : function(response, node, callback){ 
            var json = response.responseText; 
            try { 
                var o = eval("("+json+")"); 
                var choices = new Array(); 
                if (this.extraChoices) { 
                    choices = choices.concat(this.extraChoices); 
                } 
                choices = choices.concat(o); 
                node.beginUpdate(); 
                for(var i = 0, len = choices.length; i < len; i++){ 
                    var n = this.createNode(choices[i]); 
                    if(n){ 
                        node.appendChild(n); 
                    } 
                } 
                node.endUpdate(); 
                if(typeof callback == "function"){ 
                    callback(this, node); 
                } 
            }catch(e){ 
                this.handleFailure(response); 
            } 
        } 
     
    }); // TreeLoader 
     
    /* ------------------------------------------------------------------------- 
    adapted from extJS forums;  see:  http://extjs.com/forum/showthread.php?t=38654&page=4 
    --------------------------------------------------------------------------*/ 
    Ext.ux.TreeCombo = Ext.extend(Ext.form.TriggerField, { 
     
        triggerClass: 'x-form-tree-trigger', 
     
        initComponent : function(){ 
            Ext.ux.TreeCombo.superclass.initComponent.call(this); 
            this.on('specialkey', function(f, e){ 
                if(e.getKey() == e.ENTER){ 
                    this.onTriggerClick(); 
                } 
            }, this); 
            this.getTree(); 
        }, 
     
        onTriggerClick: function() { 
            this.getTree().show(); 
            this.getTree().getEl().alignTo(this.wrap, 'tl-bl?'); 
        }, 
     
        getTree: function() { 
            if (!this.treePanel) { 
                if (!this.treeWidth) { 
                    this.treeWidth = Math.max(200, this.width || 200); 
                } 
                if (!this.treeHeight) { 
                    this.treeHeight = 200; 
                } 
                this.treePanel = new Ext.tree.TreePanel({ 
                    id : this.id + 'treePanel' + Math.floor(Math.random() * 100000), 
                    renderTo: Ext.getBody(), 
                    loader: this.loader || new Ext.ux.TreeLoader({ 
                        preloadChildren: true, 
                        requestMethod : 'GET', 
                        baseParams : this.params, 
                        url: this.dataUrl || this.url, 
                        extraChoices : this.extraChoices, 
                        listeners : { 
                            'load' : this.onTreeLoaded.createDelegate(this) 
                        } 
                    }), 
                    root: this.root || new Ext.tree.AsyncTreeNode({ 
                        text : 'root' 
                    }), 
                    rootVisible: (typeof this.rootVisible != 'undefined') 
                        ? this.rootVisible : (this.root ? true : false), 
                    floating: true, 
                    autoScroll: true, 
                    minWidth: 200, 
                    minHeight: 200, 
                    width: this.treeWidth, 
                    height: this.treeHeight, 
                    listeners: { 
                        hide: this.onTreeHide, 
                        show: this.onTreeShow, 
                        click: this.onTreeNodeClick, 
                        expandnode: this.onExpandOrCollapseNode, 
                        collapsenode: this.onExpandOrCollapseNode, 
                        resize: this.onTreeResize, 
                        scope: this 
                    } 
                }); 
                this.treePanel.show(); 
                this.treePanel.hide(); 
                this.relayEvents(this.treePanel.loader, ['beforeload', 'load', 'loadexception']); 
                if(this.resizable){ 
                    this.resizer = new Ext.Resizable(this.treePanel.getEl(),  { 
                       pinned:true, handles:'se' 
                    }); 
                    this.mon(this.resizer, 'resize', function(r, w, h){ 
                        this.treePanel.setSize(w, h); 
                    }, this); 
                } 
            } 
            return this.treePanel; 
        }, 
     
        onExpandOrCollapseNode: function(node) { 
            if (!node.expanded) { 
                this.setDisplayNone(node); 
            } 
            if (!this.maxHeight || this.resizable) 
                return;  // -----------------------------> RETURN 
            var treeEl = this.treePanel.getTreeEl(); 
            var heightPadding = treeEl.getHeight() - treeEl.dom.clientHeight; 
            var ulEl = treeEl.child('ul');  // Get the underlying tree element 
            var heightRequired = ulEl.getHeight() + heightPadding; 
            if (heightRequired > this.maxHeight) 
                heightRequired = this.maxHeight; 
            this.treePanel.setHeight(heightRequired); 
        }, 
     
        onTreeResize: function() { 
            if (this.treePanel) 
                this.treePanel.getEl().alignTo(this.wrap, 'tl-bl?'); 
        }, 
     
        onTreeShow: function() { 
            Ext.getDoc().on('mousewheel', this.collapseIf, this); 
            Ext.getDoc().on('mousedown', this.collapseIf, this); 
        }, 
     
        onTreeHide: function() { 
            Ext.getDoc().un('mousewheel', this.collapseIf, this); 
            Ext.getDoc().un('mousedown', this.collapseIf, this); 
        }, 
     
        collapseIf : function(e){ 
            if(!e.within(this.wrap) && !e.within(this.getTree().getEl())){ 
                this.collapse(); 
            } 
        }, 
     
        /** 
         * Set the display style on the node to none. 
         * Needed because ext 3 only sets visibility which leaves a space visible. 
         *  
         * Since: ext 3 
         * @param node 
         */ 
        setDisplayNone: function(node){ 
            node.ui.ctNode.style.display = "none"; 
        }, 
     
        collapse: function() { 
            this.getTree().hide(); 
            if (this.resizer) 
                this.resizer.resizeTo(this.treeWidth, this.treeHeight); 
        }, 
     
        // private 
        validateBlur : function(){ 
            return !this.treePanel || !this.treePanel.isVisible(); 
        }, 
     
        setValue: function(value) { 
            this.startValue = this.value = value; 
            if (this.treePanel) { 
                var node = this.treePanel.getNodeById(value); 
                if (node) { 
                    this.setRawValue(node.text); 
                    this.treePanel.expandPath(node.getPath()); 
                    this.treePanel.getSelectionModel().select(node); 
                    this.fireEvent('select', this, node); 
                } 
            } 
        }, 
     
        getValue: function() { 
            return this.value; 
        } 
        , 
        /* ------------------------------------------------------------------------- 
            get the ID from the selected node as opposed to the text 
        --------------------------------------------------------------------------*/ 
        getSelectedId : function() { 
            var result = null; 
            var node = this.treePanel.getSelectionModel().getSelectedNode(); 
            if (node) { 
                result = node.id; 
            } 
            return result; 
        } // getSelectedId() 
        , 
        onTreeNodeClick: function(node, e) { 
            this.setRawValue(node.text); 
            this.value = node.id; 
            this.fireEvent('select', this, node); 
            this.collapse(); 
        } 
        , 
        /* ------------------------------------------------------------------------- 
     
        --------------------------------------------------------------------------*/ 
        onTreeLoaded : function() { 
            if (this.initialValue) { 
                this.treePanel.expandAll(); 
                this.treePanel.collapseAll(); 
                this.setValue(this.initialValue); 
            } 
        } // onTreeLoaded() 
     
    });
    Thanks,

    Jeff

Page 1 of 2 12 LastLast

Similar Threads

  1. [OPEN-1159] GroupTabPanel doesn't work well on IE7
    By sabline in forum Ext 3.x: Bugs
    Replies: 1
    Last Post: 27 Jul 2010, 11:13 AM
  2. Replies: 0
    Last Post: 30 Apr 2010, 5:21 AM
  3. [OPEN-746] Menu selection has a gap on the top in IE7
    By lobasty in forum Ext 3.x: Bugs
    Replies: 0
    Last Post: 18 Mar 2010, 1:49 AM
  4. [OPEN-491][3.1] IE7 window drag performance
    By ValterBorges in forum Ext 3.x: Bugs
    Replies: 31
    Last Post: 25 Feb 2010, 4:16 PM
  5. Replies: 1
    Last Post: 23 Feb 2009, 8:35 AM

Posting Permissions

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