Hybrid View

    You found a bug! We've classified it as a bug in our system. We encourage you to continue the discussion and to find an acceptable workaround while we work on a permanent fix.
  1. #1
    Ext User heidtmare's Avatar
    Join Date
    Mar 2007
    Location
    The Space Coast, FL
    Posts
    307
    Vote Rating
    0
    heidtmare is on a distinguished road

      0  

    Default [FIXED][3.0rc2] IE setHeight

    [FIXED][3.0rc2] IE setHeight


    PHP Code:
      Invalid argument.  ext-all-debug.jsline 3714 character 13 
    PHP Code:
    setHeight : function(heightanimate){
                var 
    me this;
                
    height me.adjustHeight(height);
                !
    animate || !me.anim // <--  line 3714
                    
    me.dom.style.height me.addUnits(height) :
                    
    me.anim({height : {to height}}, me.preanim(arguments1));
                return 
    me;
            }, 
    I dont have much to work with...i HATE debuging IE!
    All is well in FF.
    I like it. Simple, easy to remember.
    ...but why is the rum gone?

  2. #2
    Sencha - Ext JS Dev Team evant's Avatar
    Join Date
    Apr 2007
    Location
    Sydney, Australia
    Posts
    17,054
    Vote Rating
    659
    evant has a reputation beyond repute evant has a reputation beyond repute evant has a reputation beyond repute evant has a reputation beyond repute evant has a reputation beyond repute evant has a reputation beyond repute evant has a reputation beyond repute evant has a reputation beyond repute evant has a reputation beyond repute evant has a reputation beyond repute evant has a reputation beyond repute

      0  

    Default


    More info please, what are you doing that causes this to occur?
    Evan Trimboli
    Sencha Developer
    Twitter - @evantrimboli
    Don't be afraid of the source code!

  3. #3
    Ext User heidtmare's Avatar
    Join Date
    Mar 2007
    Location
    The Space Coast, FL
    Posts
    307
    Vote Rating
    0
    heidtmare is on a distinguished road

      0  

    Default


    i think ive found a deplication example:

    PHP Code:
    new Ext.Viewport({
        
    items:[{
            
    xtype'tabpanel',
            
    activeTab:0,
            
    items:[{
                
    xtype'form',
                
    title:'FormTab',
                
    buttons: [{
                    
    text'BtnText'
                
    }]
            }]
        }]
    }); 
    the above works great in FF but makes IE flip out.
    This causes 2 setHeight errors.
    Removing the btn makes them go away.


    EDIT: I just confirmed that commenting out the buttons in my actual application fixed the problem...
    but i am quite fond of those buttons and would like to put them back ;p
    I like it. Simple, easy to remember.
    ...but why is the rum gone?

  4. #4
    Sencha - Architect Dev Team aconran's Avatar
    Join Date
    Mar 2007
    Posts
    9,413
    Vote Rating
    129
    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


    What happens if you add a layout manager to the Viewport such as layout: 'fit'?
    Aaron Conran
    @aconran
    Sencha Architect Development Team

  5. #5
    Ext User
    Join Date
    Jul 2007
    Location
    Florida
    Posts
    9,996
    Vote Rating
    6
    mjlecomte will become famous soon enough mjlecomte will become famous soon enough

      0  

    Default


    Here's some more basic test cases that reveal another issue (see notes about buttonAlign...mentioned this in separate bug report):

    Code:
    Ext.onReady(function(){
    
        new Ext.Panel({
            title:'Panel 1 setHeight Problem',
            width:300,height:300,
            renderTo: document.body,
            layout:'fit',
            items: [{
                xtype: 'tabpanel',
                activeTab: 0,
                items: [{
    /*
                    xtype: 'panel',
                    title: 'FormTab',
                    buttons: [{
                        text: 'BtnText' // button is right aligned
                    }]
                },
                {
    // specifying panel is ok
    */
                    //specifying form causes setHeight issue
                    xtype: 'form',
                    title: 'FormTab',
                    buttons: [{
                        text: 'BtnText'  // button is centered
                    }]
                }]
            }]
        });
    
        new Ext.Panel({
            title:'Panel 2 ok except button alignment',
            width:300,height:300,
            renderTo: document.body,
            layout:'fit',
            items: [{
                xtype: 'tabpanel',
                activeTab: 0,
                items: [{
                    xtype: 'panel',
                    title: 'FormTab',
                    buttons: [{
                        text: 'BtnText' // button is right aligned
                    }]
                },{
                    xtype: 'form',
                    title: 'FormTab',
                    buttons: [{
                        text: 'BtnText'  // button is centered
                    }]
                }]
            }]
        });
    
    
        new Ext.Panel({
            title:'Panel 3 ok',
            width:300,height:300,
            renderTo: document.body,
            layout:'fit',
            items: [{
                    xtype: 'form',
                    title: 'FormTab',
                    buttons: [{
                        text: 'BtnText'
                    }]
            }]
        });
    
    });
    FOr whatever reason, one of the early passes of setHeight, when it's a form, has a height of -9.

    So I did this:
    Code:
             setHeight : function(height, animate){
                var me = this;
                height = me.adjustHeight(height);
                if (height<0){height=0;}
                !animate || !me.anim ? 
                    me.dom.style.height = me.addUnits(height) :
                    me.anim({height : {to : height}}, me.preanim(arguments, 1));
                return me;
            },
    And the problem went away. Is there a scenario to set a negative height (or width?) ?

  6. #6
    Ext User
    Join Date
    Dec 2007
    Posts
    13
    Vote Rating
    0
    worthy is on a distinguished road

      0  

    Default


    I made the same changes to setWidth too and used Ext coding standard.

    Code:
         setWidth : function(width, animate){
            var me = this;
            width = me.adjustWidth(width);
            // @change: Cause in IE width is sometimes less than 0.
            width = width < 0 ? 0 : width;
            // @changeend
            !animate || !me.anim ?
                me.dom.style.width = me.addUnits(width) :
                me.anim({width : {to : width}}, me.preanim(arguments, 1));
            return me;
        },
    
    
         setHeight : function(height, animate){
            var me = this;
            height = me.adjustHeight(height);
            // @change: Cause in IE height is sometimes less than 0.
            height = height < 0 ? 0 : height;
            // @changeend
            !animate || !me.anim ?
                me.dom.style.height = me.addUnits(height) :
                me.anim({height : {to : height}}, me.preanim(arguments, 1));
            return me;
        },

  7. #7
    Sencha User
    Join Date
    Jul 2010
    Posts
    10
    Vote Rating
    1
    asafm is on a distinguished road

      1  

    Exclamation Problems occurs at IE8 with ExtJS 3.4.0

    Problems occurs at IE8 with ExtJS 3.4.0


    Quote Originally Posted by evant View Post
    More info please, what are you doing that causes this to occur?
    Ok, so same thing happens to me too with ExtJS 3.4.0.

    The error thrown is at this line:

    Code:
                !animate || !me.anim ?
                    me.dom.style.height = me.addUnits(height) :
                    me.anim({height : {to : height}}, me.preanim(arguments, 1));
    height is an NaN.
    me.addUnits(height) returns "NaNpx"
    and IE does not agree to place a String at me.dom.style.height, while Chrome is ok with it.
    This explains the illegal argument exception.

    This above excerpt of code is from setHeight which is called from syncHeight:

    Code:
        syncHeight : function(){
            var h = this.toolbarHeight,
                    bd = this.body,
                    lsh = this.lastSize.height,
                    sz;
    
    
            if(this.autoHeight || !Ext.isDefined(lsh) || lsh == 'auto'){
                return;
            }
    
    
    
    
            if(h != this.getToolbarHeight()){
                h = Math.max(0, lsh - this.getFrameHeight());
                bd.setHeight(h);
                sz = bd.getSize();
                this.toolbarHeight = this.getToolbarHeight();
                this.onBodyResize(sz.width, sz.height);
            }
        },
    Here lsh is "100%" and of course when performing the calculation:
    h = Math.max(0, lsh - this.getFrameHeight());
    the result of "100%" - 38 is NaN
    after that bd.setHeight(h) is called with NaN.

    So this bug is till open, and I fail to understand yet how to fix it.

    Thanks,

    Asaf

  8. #8
    Sencha Premium Member
    Join Date
    Jan 2008
    Location
    San Francisco Bay, CA
    Posts
    42
    Vote Rating
    1
    rgralhoz is on a distinguished road

      0  

    Exclamation ComboBox.doResize(undefined) leads to setWidth(NaN)

    ComboBox.doResize(undefined) leads to setWidth(NaN)


    I also found a similar issue w/IE8 and Ext 3.1.1, I'm not sure if this the right place to post it [I hope Sencha support can correct me].

    My structure
    I had an Ext.form.ComboBox subclass in a panel, in a structure like this:
    MyContainer1 > MyContainer2 > MyPanel > MyCombo

    Using Ext.js 3
    Trying to call setHeight([a positive value]) on MyContainer2 or doLayout() on MyContainer1 wouldn't work correctly on IE.

    Analysis
    At some point the comboBox doResize(w) method was being called with w undefined.
    This was leading to the same effects described by @asafm , with setWidth(NaN) being called since Math.max( undefined, this.minListWidth) returns NaN;

    My Fix
    Code:
    MyCombo = Ext.extend(Jx.form.JxComboBox, {
        //...
       doResize: function(w){        
            if(!Ext.isDefined(this.listWidth) && !isNaN(w)){
                var lw = Math.max(w, this.minListWidth);
                this.list.setWidth(lw);
                this.innerList.setWidth(lw - this.list.getFrameWidth('lr'));
            }
        }
    }