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

[slemiere]

Hi,

In my application I had the same issue in IE8 (width was for some reason set to -3.8). Using the fix of Worthy worked but is it something that will be included in the next release of Ext 3 ?
Thanks anyway

Sylvain

[heidtmare]

using the worthy / mjlecomte suggested fix did in fact solve my original issue.

[aconran]

The negative setHeight/setWidth's should not be occurring. We are debugging why they are being sent into this function.

[Condor]

Duplicate of this bug.

ps. The negative height was coming from the syncHeight function (fix).