PDA

View Full Version : [CLOSED][3.??] style: padding, grouptabs, and IE



mpelzsherman
17 Jun 2009, 9:07 AM
The code below demonstrates what appears to be a bug with IE and grouptabs.



<html>
<head>
<title>Grouptabs IE Bug</title>
<link href="ext-3.0-rc2/resources/css/ext-all.css" media="screen" rel="stylesheet" type="text/css">
<link href="ext-3.0-rc2/examples/grouptabs/grouptabs.css" rel="stylesheet">
</head>
<body>
<script type="text/javascript" src="ext-3.0-rc2/adapter/ext/ext-base.js"></script>
<script type="text/javascript" src="ext-3.0-rc2/ext-all-debug.js"></script>
<script type="text/javascript" src="ext-3.0-rc2/examples/grouptabs/GroupTabPanel.js"></script>
<script type="text/javascript" src="ext-3.0-rc2/examples/grouptabs/GroupTab.js"></script>

<div id="outer-panel" style="width:100%"></div>
<script type="text/javascript">

var groupTabItems = [{
mainItem: 0,
title: 'Item Title',
items:[{ // tab item
title: 'Item Title',
height: 150,
layout: 'fit',
// the following line works fine:
// style: 'margin: 10px; font:15px tahoma,arial,verdana,sans-serif;',
// the following line results in an error in IE:
style: 'padding: 10px; font:15px tahoma,arial,verdana,sans-serif;',
html: "blah blah blah"
}]}];

var criteriaSelectionPanel = new Ext.Panel({
layout: 'fit',
title: "Outer Panel",
renderTo: 'outer-panel',
items:[{
xtype: 'grouptabpanel',
tabWidth: 130,
activeGroup: 0,
items: groupTabItems
}]
});

</script>
</body>
</html>

mjlecomte
17 Jun 2009, 10:57 AM
Thanks for the report.

Please see this thread: http://extjs.com/forum/showthread.php?t=71015

Some information is missing from your post, screenshot, what the problem/error is, which specific browser version(s), etc.

Also note there are a few bugs already reported and still OPEN (http://extjs.com/forum/search.php?do=process&forumchoice[]=41&query=OPEN&titleonly=1) related to Group Tabs, please check if your issue was reported already.

mpelzsherman
18 Jun 2009, 12:47 PM
The error occurs in all versions of IE I've tried so far: 6, 7, and 8.

Here is a screen shot: http://twitpic.com/7qmo5

The error is "Invalid Argument", and occurs on line 3704 of ext-all-debug.js (v. 3 rc 2)

setWidth : function(width, animate){
var me = this;
width = me.adjustWidth(width);
!animate || !me.anim ? <======= HERE
me.dom.style.width = me.addUnits(width) :
me.anim({width : {to : width}}, me.preanim(arguments, 1));
return me;
},

mjlecomte
18 Jun 2009, 2:42 PM
I think one of the other threads I mentioned has this fixed already. I checked the code below in IE8 and there were no errors and it rendered just like FF.




<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>GroupTabs Example</title>

<!-- ** CSS ** -->
<!-- base library -->
<link rel="stylesheet" type="text/css" href="../../resources/css/ext-all.css" />

<!-- overrides to base library -->
<link rel="stylesheet" type="text/css" href="../ux/css/GroupTab.css" />

<!-- page specific -->
<style type="text/css">

</style>

<!-- ** Javascript ** -->
<!-- ExtJS library: base/adapter -->
<script type="text/javascript" src="../../adapter/ext/ext-base.js"></script>

<!-- ExtJS library: all widgets -->
<script type="text/javascript" src="../../ext-all.js"></script>

<!-- overrides to base library -->

<!-- extensions -->
<script type="text/javascript" src="../ux/GroupTabPanel.js"></script>
<script type="text/javascript" src="../ux/GroupTab.js"></script>

<!-- page specific -->
<script type="text/javascript">

Ext.BLANK_IMAGE_URL = '../../resources/images/default/s.gif';

Ext.onReady(function(){

var groupTabItems = [{
mainItem: 0,
title: 'Item Title',
items: [{ // tab item
title: 'Item Title',
height: 150,
layout: 'fit',
// the following line works fine:
// style: 'margin: 10px; font:15px tahoma,arial,verdana,sans-serif;',
// the following line results in an error in IE:
style: 'padding: 10px; font:15px tahoma,arial,verdana,sans-serif;',
html: "blah blah blah"
}]
}];

var criteriaSelectionPanel = new Ext.Panel({
layout: 'fit',
title: "Outer Panel",
renderTo: 'outer-panel',
items: [{
xtype: 'grouptabpanel',
tabWidth: 130,
activeGroup: 0,
items: groupTabItems
}]
});
});
</script>

</head>

<body>
<div id="outer-panel" style="width:100%"></div>
</body>
</html>

mjlecomte
18 Jun 2009, 2:42 PM
Updating the status to CLOSED

mpelzsherman
22 Jun 2009, 6:29 AM
Which release was this fixed in?

evant
22 Jun 2009, 6:31 AM
It's fixed in the current SVN build, you'll see it in the next release.