[FIXED][3.0rc2] IE setHeight

[heidtmare]

  Invalid argument.  ext-all-debug.js, line 3714 character 13 

setHeight : function(height, animate){
            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(arguments, 1));
            return me;
        }, 

I dont have much to work with...i HATE debuging IE!
All is well in FF.

[evant]

More info please, what are you doing that causes this to occur?

[heidtmare]

i think ive found a deplication example:

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

[aconran]

What happens if you add a layout manager to the Viewport such as layout: 'fit'?

[mjlecomte]

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

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:

         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?) ?

[worthy]

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

     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;
    },

[asafm]

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:

            !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:

    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

[rgralhoz]

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

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'));
        }
    }
}