PDA

View Full Version : What doctype should I use with Ext JS?



ericprimmer
15 Jul 2009, 6:30 AM
I'm just starting to look into using Ext JS.

Is there a preferred HTML doctype to be used with Ext JS? XHTML or HTML 4.01, transitional or strict?

Does it matter?

When an Ext JS component outputs HTML to a page, which version of HTML will it conform to?

Animal
15 Jul 2009, 6:55 AM
Mostly I've seen recommendations to use no doctype.

We don't use a doctype.

Condor
15 Jul 2009, 6:58 AM
Ext components should create XHTML compliant markup (if they don't -- it happened before -- you should post a bugreport).

Ext tries to render correctly with any doctype, but there are rare cases in which no doctype is the only one that works correctly in IE6 (if you find one -- IE6 is very unpredictable -- you should also post a bugreport).

aconran
15 Jul 2009, 9:20 AM
As Animal and Condor have stated we try to work around all potential issues that may arise with doctypes.

However, the best doctype to use is no doctype at all.

ericprimmer
15 Jul 2009, 11:45 AM
Thanks for the replies.

aconran, does ExtJs have any documentation available on browser compatibility and why it's preferred not to use a doctype?

aconran
15 Jul 2009, 3:37 PM
Our support browser matrix is listed on the Ext JS products page.
http://extjs.com/products/extjs/

The reason why its preferred to not use a doctype is the following... When you place a doctype on a page you are making the browser enforce additional rules. These additional rules can have different implementations across different browsers and therefore can trigger bugs.

When you do not place a doctype on the page the browser will interpret the document in its native mode or quirks mode. This seems to expose the least amount of bugs in particular browsers.

Not too many years ago using a doctype was considered "best practice" and the best way to get pixel perfect layouts in a cross browser environment. As the idea of resetting the browser to scratch via a CSS file has evolved, I believe that the practice of using a doctype has decreased drastically.

Ext uses a variant of YUI's reset.css to reset the browsers css in all browsers to be the same.

behrangsa
3 Apr 2010, 5:31 PM
Our support browser matrix is listed on the Ext JS products page.
http://extjs.com/products/extjs/

The reason why its preferred to not use a doctype is the following... When you place a doctype on a page you are making the browser enforce additional rules. These additional rules can have different implementations across different browsers and therefore can trigger bugs.

When you do not place a doctype on the page the browser will interpret the document in its native mode or quirks mode. This seems to expose the least amount of bugs in particular browsers.

Not too many years ago using a doctype was considered "best practice" and the best way to get pixel perfect layouts in a cross browser environment. As the idea of resetting the browser to scratch via a CSS file has evolved, I believe that the practice of using a doctype has decreased drastically.

Ext uses a variant of YUI's reset.css to reset the browsers css in all browsers to be the same.

In this thread you are recommending to use no doctype in the HTML page at all, but in this tutorial (http://www.extjs.com/learn/Tutorial:Application_Layout_for_Beginners) it is said that we should always use a doctype in our HTML pages. So which one is actually the recommended approach?

To quote from the tutorial:


We will use HTML 4.01 Transitional for the purpose of this tutorial because this doctype is supported very well by all major browsers. Of course, you can use any other document type if you want or need but keep in mind that you should always specify a doctype.

Cheers,
Behi

Animal
3 Apr 2010, 11:49 PM
Since we at my day job recently dropped IE6 from primary support, we have moved into standards mode. Everything seems to work OK so far.

tvanzoelen
5 Apr 2010, 5:13 AM
Well there were some issues with leaving out doc types. Is this solved yet?

http://www.extjs.com/forum/showthread.php?t=71476&page=2

steffenk
5 Apr 2010, 5:22 AM
I always use doctypes, mostly xhtml strict. I've had no problems with ExtJS using this doctype.

CrazyEnigma
5 Apr 2010, 5:27 AM
I think I have mine set to transitional. I had problems with strict.

dead_man
3 May 2010, 8:03 PM
hi guys. i have problem. ExtJS don't work in Google Chrome with DOCTYPE. please help me

Condor
3 May 2010, 10:31 PM
hi guys. i have problem. ExtJS don't work in Google Chrome with DOCTYPE. please help me

Define "don't work".

Which Ext version are you using (remember that Ext pre-2.3 was developed when Chrome didn't exist yet)?

Animal
3 May 2010, 11:43 PM
We've downgraded support of IE6, and discourage the use of IE7. We're trying to move to a standards-based future. We recently switched to

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">

I had to tweak some CSS (particularly for TriggerFields in toolbars on Chrome), but it works fine.

dead_man
4 May 2010, 1:35 AM
oh, sorry... i use last version Ext JS 3.2.0
applying of stylesheet don't work with "doctype"
here is two examples of my login form.
on first screen no doctype. on second screen <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
2030320304

i was added exception, special for Google Chrome on php in the beginning of page:

if (!eregi("chrome", $_SERVER['HTTP_USER_AGENT']))
echo '<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">'."\r\n";
but it is not right...

Animal
4 May 2010, 2:13 AM
Well on the second screen, you're not getting the stylesheet. That looks like just a bug in your HTML. Did you valiate it against that DOCTYPE?

Check Chrome's "Resources" debugger tab.

mschwartz
4 May 2010, 10:28 AM
<!-- turn on quirks mode for IE -->
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

dead_man
4 May 2010, 7:28 PM
Chrome's "Resources" debugger tab reports about 6 standard warnings (Resource interpreted as stylesheet but transferred with MIME
type text/html.)
20320

I can't find errors in my HTML:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; UTF-8"/>
<title>??? ?????</title>

<meta http-equiv="Content-Type" content="text/html; charset=UTF-8"/>
<link rel="stylesheet" type="text/css" href="styles/main.css"/>

<link rel="stylesheet" type="text/css" href="extjs/resources/css/ext-all.css"/>
<script type="text/javascript" src="extjs/adapter/ext/ext-base.js"></script>
<script type="text/javascript" src="extjs/ext-all.js"></script>
<script type="text/javascript" src="extjs/src/locale/ext-lang-ru.js"></script>
<script type="text/javascript"> var userdir='usertypes/login/'; </script>
<script type="text/javascript" src="usertypes/login/login.js"></script>
</head>
<body>
</body>
</html>

In other browsers (Firefox 3.6.3, Opera 10, IE6) all works good

Condor
5 May 2010, 10:48 PM
It definately looks like extjs/resources/css/ext-all.css isn't loaded.

Did you configure Chrome to not display stylesheets or images?

dead_man
5 May 2010, 11:02 PM
2 Condor: no, i did not configure Chrome. I'm just install it and test my program. CSS has been downloaded by Chrome, but not applied. everything ok in Chrome without DOCTYPE.

Condor
5 May 2010, 11:21 PM
Some parts of Ext (htmleditor, history, charts) won't work with strict doctype. You need transitional doctype for that.
Also, for quicktips you need to defined the ext namespace.

This results in:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xmlns:ext="http://www.extjs.com" xml:lang="en" lang="en">
...

Animal
6 May 2010, 12:55 AM
That's only for XHTML right?

Because the toopltips on Buttons here seem to be working, and I'm using



<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">

Condor
6 May 2010, 1:12 AM
You would get a validation error if you use Ext.History, because IFRAME isn't in strict.dtd.

But because it isn't XHTML the browser doesn't complain.

dead_man
6 May 2010, 1:16 AM
Thanks for help, but it is still work incorrect, i tried all yours DOCTYPE variants. Maybe i will recommend to not use Google Chrome in my Compnay.

Animal
6 May 2010, 1:26 AM
I recommend Google Chrome! It's so much faster than all the others. It works well for me with a DOCTYPE.

dead_man
6 May 2010, 2:42 AM
All works! I configure MIME types .js and .css in IIS and reinstall Chrome. Thanks to all!

ecanraf
2 Mar 2011, 12:54 PM
Hi,

I'm interested in this discussion. What about the HTML 5 doctype: <!DOCTYPE html> have you tried it? I'm using it and I don't see any issues so far.

Condor
3 Mar 2011, 12:28 AM
IE6, 7 and 8 don't know HTML5, so this will be detected as an invalid DOCTYPE and treated as no DOCTYPE (which is fine, because Ext is faster in quirks mode).

mschwartz
3 Mar 2011, 5:50 AM
IE6, 7 and 8 don't know HTML5, so this will be detected as an invalid DOCTYPE and treated as no DOCTYPE (which is fine, because Ext is faster in quirks mode).

To be more clear, if there's a comment before the <HTML> tag, IE turns on quirks mode. I guess it does it for invalid DOCTYPE as well.


See:
http://css-class.com/test/css/selectors/ie7hacktargetingopera4.htm

tryanDLS
3 Mar 2011, 8:58 AM
IE6, 7 and 8 don't know HTML5, so this will be detected as an invalid DOCTYPE and treated as no DOCTYPE (which is fine, because Ext is faster in quirks mode).

I thought the HTML5 DOCTYPE triggered standards mode in browsers that didn't understand it??

varunach
14 Mar 2011, 11:54 AM
@Condor, Animal.

Could you have a look at this post:

http://www.sencha.com/forum/showthread.php?125754-Having-problem-with-form.isValid%28%29&p=580314#post580314

I'm having a problem with the rendering of quicktips when I'm checking the validity of a form.
You said in a previous post that:


Also, for quicktips you need to defined the ext namespace.


Even though i'm using the doctype that you specified in the same post, quicktips are getting rendered properly in any browser

Thanks,
Varun

greenteafrap
12 Jul 2011, 9:41 PM
Can anyone take a look at this post and give some suggestions..i'm having a hard time getting extjs 3.3.1 to work correctly.

http://www.sencha.com/forum/showthread.php?140266-Questions-regarding-doctype-and-tabPanel-in-ExtJS-3.x