PDA

View Full Version : Two question for IE6,7,8


gnddavid
10 Aug 2009, 5:41 AM
(1) One question for compute scrollbar width
I can't right compute web browser scrollbar width for IE6,7,8,look:
var __CONSTANTS_SCOLLER_WIDTH = Ext.getBody().getWidth()-Ext.getBody().getViewSize().width;

but I only get __CONSTANTS_SCOLLER_WIDTH is '0'.Otherwise In FF it's '16'.

how can I right compute web browser scrollbar width for IE6,7,8?

(2) Two question for IE6,7 because DOCTYPE
I define DOCTYPE in html,such as
<!DOCTYPEhtmlPUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

and

Ext.ns('Ext.ux');
Ext.ux.Panel = Ext.extend(Ext.util.Observable,{
constructor: function(elId, config) {
config = config || {};
Ext.apply(this, config);

Ext.ux.Panel.superclass.constructor.call(this, config);
this.el = this.el? this.el : Ext.get(elId);
this.el.setStyle('cursor','default');

this.initEvents();

this.el.setLeft(0);
this.el.setTop(0);
this.el.setWidth(200);
this.el.setHeight(200);

},
initEvents: function() {
Ext.EventManager.on(Ext.getBody(),"mousedown",this.onBodyMouseDown,this);
},
onBodyMouseDown:function() {
alert(0);
}
});

Now in test.html
<!DOCTYPEhtmlPUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
... ...
<div id="pdiv" ></div>
<script language="javascript">
Ext.onReady(function(){
new Ext.ux.Panel('pdiv');
});
</script>

then ,I mouse down the div , but not alert '0'.

but I remove the DOCTYPE.I mouse down the div,then can alert '0';

I think Ext.EventManager - DOCTYPE bug?How can fix it?

Thanks!
Condor
10 Aug 2009, 6:10 AM
1. The next Ext 3.0 version will contain a Ext.getScrollBarWidth() function which uses two nested divs to calculate the scrollbar width.

2. This is not an Ext bug. In standards compliant mode the document body is the height of the content and not the size of the viewport. This means that you can't click on it, because the div is directly above it.
gnddavid
10 Aug 2009, 6:53 AM
Thanks! I see one question.But two question.I find another reasion in IE6,7.Look:

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd (http://www.w3.org/TR/html4/loose.dtd)">
<html>
<head>
<META http-equiv="Content-Type" content="text/html; charset=GBK">
<title>Administrator</title>
<script language="javascript" type="text/javascript" src="ext3/ext-core.js"></script>
<script>
Ext.ns('Ext.ux');
Ext.ux.Panel = Ext.extend(Ext.util.Observable,{
constructor: function(elId, config) {
config = config || {};
Ext.apply(this, config);
Ext.ux.Panel.superclass.constructor.call(this, config);
this.el = this.el? this.el : Ext.get(elId);
this.el.setStyle('cursor','default');
this.initEvents();
this.el.setLeft(500);
this.el.setTop(200);
this.el.setWidth(200);
this.el.setHeight(200);
},
initEvents: function() {
Ext.EventManager.on(Ext.getBody(),"mousedown",this.onBodyMouseDown,this);
},
onBodyMouseDown:function() {
alert(0);
}
});
</script>
</head>
<body>
<div id="pdiv" style="position:absolute;border:3px solid #c0c0c0" ></div>
<script language="javascript">
Ext.onReady(function(){
new Ext.ux.Panel('pdiv');
});
</script>
</body>
</html>

Two point is very important for the question.
(1) If it has DOCTYPE , the div style not contain 'position:absolute',we mouse down the div ,then can alert '0'.but the div style contain 'position:absolute',we mouse down the div
but not alert '0'.otherwise we mouse down the border for the div,then can alert '0'.

(2) If it has not DOCTYPE , we mouse down the div,then all can alert '0'.

what reason ? when has DOCTYPE, how can I listen 'mousedown' of the div?

Thanks
Condor
10 Aug 2009, 6:58 AM
Sorry, I don't get the problem (but your English isn't helping either).

Can you explain better? (you could try posting in your own language - maybe somebody here can understand it)
gnddavid
10 Aug 2009, 7:10 AM
Sorry, I don't get the problem (but your English isn't helping either).

Can you explain better? (you could try posting in your own language - maybe somebody here can understand it)

What I am saying is the definition of the DOCTYPE in the circumstances, when the div contains style 'position: absolute' time, not div mouse click alert (0). But does not contain a 'position: absolute' time, the mouse click div to be alert (0)

DOCTYPE definition if there is no time, div style, whether or not included 'position: absolute', the mouse click can be alert (0);
So, my question is, if the definition of the DOCTYPE, but also contains the content div style 'position: absolute', how to write the script makes the mouse click to be alert (0);

Thanks!
gnddavid
13 Aug 2009, 10:47 PM
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd (http://www.w3.org/TR/html4/loose.dtd)">
<html>
<head>
<META http-equiv="Content-Type" content="text/html; charset=GBK">
<title>Administrator</title>
<script language="javascript" type="text/javascript" src="ext3/ext-core.js"></script>
<script>
Ext.ns('Ext.ux');
Ext.ux.Panel = Ext.extend(Ext.util.Observable,{
constructor: function(elId, config) {
config = config || {};
Ext.apply(this, config);
Ext.ux.Panel.superclass.constructor.call(this, config);
this.el = this.el? this.el : Ext.get(elId);
this.el.setStyle('cursor','default');
this.initEvents();
this.el.setLeft(500);
this.el.setTop(200);
this.el.setWidth(200);
this.el.setHeight(200);
},
initEvents: function() {
Ext.EventManager.on(Ext.getBody(),"mousedown",this.onBodyMouseDown,this);
},
onBodyMouseDown:function() {
alert(0);
}
});
</script>
</head>
<body>
<div id="pdiv" style="position:absolute;border:3px solid #c0c0c0" ></div>
<script language="javascript">
Ext.onReady(function(){
new Ext.ux.Panel('pdiv');
});
</script>
</body>
</html>

当我去掉了DOCTYPE定义的时候,鼠标单击DIV能够执行mousedown事件.但是当我加上DOCTYPE则,鼠标单击DIV不能执行mousedown事件.问问大家有没有遇到过这个问题,还有有什么解决办法么?