Ext JS - Learning Center

Manual:Ext CSS Overview

From Learn About the Ext JavaScript Library

Jump to: navigation, search
Summary: Ext CSS Overview
Author: Ext community
Published: Unkown
Ext Version: 1.1
Languages: en.png English kr.png Korean

Resetting styles

Ext includes CSS for resetting the browser's default styles regarding padding, border, margins etc. Since not all browsers apply the same default margins and paddings etc. to the document elements, it makes web development much simpler to start with a normalized stylesheet and then build up styles explicitly as needed. This concept was borrowed from the YUI reset.css file.

Resetting default styles

The base reset styles looks like the following.

Example: 

html, body, div, dl, dt, dd, ul, ol, li, h1, h2, h3, h4, h5, h6,
pre, form, fieldset, input, p, blockquote, th, td {
  margin:0;
  padding:0;
}

See CSS files for the full list of modifications.

If you need all paragraphs to have a different margin then you'll have to define it in a CSS of your own which should be loaded after the base reset above. Just include your own CSS file with the following: 

p {
  margin:5px;
}

Example 2: If you had the following simple HTML and needed it to match Internet Explorer's defaults: 

<body leftmargin="0" topmargin="0" marginwidth="0" marginheight="0">
 
<div id="tree-div" style="overflow:auto; height:300px;width:250px;border:1px solid #c3daf9;"></div>
 
<h1>IE CSS Example</h1>
 
<table border="0" cellpadding="5" cellspacing="1" bgcolor="#333333">
  <tr>
    <td bgcolor="#FFFFFF">row1, col1</td>
    <td bgcolor="#FFFFFF">row1, col2</td>
    <td bgcolor="#FFFFFF">row1, col3</td>
  </tr>
  <tr>
    <td bgcolor="#FFFFFF">cell spacing is 1</td>
    <td bgcolor="#FFFFFF">cellpadding is 5</td>
    <td bgcolor="#FFFFFF">border is 0</td>
  </tr>
</table>
<p>paragraph1 <strong>ipsem <em>plorim</em> </strong></p>
<p>paragraph2</p>
<ul>
  <li>list item 1</li>
  <li>list item 2 </li>
  <li>list item 3 </li>
</ul>
<p>paragraph3</p>
</body>

You would insert this CSS after ext-all.css: 

h1 {
	font-size:31px;
	padding-top:0px;
	padding-bottom:18px;
	}
td {
	padding:5px;
	}
p {
	margin-top:19px;
	margin-bottom:13px;
	}
ul {
	margin-top:19px;
	margin-left:39px;
	margin-bottom:13px;
	list-style-type: disc; 
	list-style-image: none; 
	list-style-position: outside;
	}
strong {
	font-weight:bold;
	}
em {
	font-style: italic;
	}

Note that the table presents a special problem. What if there was another table with a different cell padding? One solution might be to run Ext.query to find all the cellpadding tags and replace them with style="padding:XXpx; " But there is another problem, Ext depends on the base reset so you will break things if you globally try to undo the base reset. For instance, if you add the circular disc back into UL, you'll find Ext trees will all have discs! The thing to do is make a special class that you can apply where you need it using CSS descendant selectors as follows: 

.ieDefault h1 {
	font-size:31px;
	padding-top:0px;
	padding-bottom:18px;
	}
.ieDefault td {
	padding:5px;
	}
.ieDefault p {
	margin-top:19px;
	margin-bottom:13px;
	}
.ieDefault ul {
	margin-top:19px;
	margin-left:39px;
	margin-bottom:13px;
	list-style-type: disc; 
	list-style-image: none; 
	list-style-position: outside;
	}
.ieDefault strong {
	font-weight:bold;
	}
.ieDefault em {
	font-style: italic;
	}

Then apply this to the area you need to "protect" from base reset. 

<body leftmargin="0" topmargin="0" marginwidth="0" marginheight="0">
 
<div id="tree-div" style="overflow:auto; height:300px;width:250px;border:1px solid #c3daf9;"></div>
<!-- ========== PROTECT FROM BASE RESET ========== -->
<div class="ieDefault">
<h1>IE CSS Example</h1>
 
<table border="0" cellpadding="5" cellspacing="1" bgcolor="#333333">
  <tr>
    <td bgcolor="#FFFFFF">row1, col1</td>
    <td bgcolor="#FFFFFF">row1, col2</td>
    <td bgcolor="#FFFFFF">row1, col3</td>
  </tr>
  <tr>
    <td bgcolor="#FFFFFF">cell spacing is 1</td>
    <td bgcolor="#FFFFFF">cellpadding is 5</td>
    <td bgcolor="#FFFFFF">border is 0</td>
  </tr>
</table>
<p>paragraph1 <strong>ipsem <em>plorim</em> </strong> </p>
<p>paragraph2</p>
<ul>
  <li>list item 1</li>
  <li>list item 2 </li>
  <li>list item 3 </li>
</ul>
<p>paragraph3</p>
</div>
</body>

Even using this method you will still find some issue. Why is the "plorim" not bold? Here is from the reset.css 

address,caption,cite,code,dfn,em,strong,th,var{fon t-style:normal;font-weight:normal;}

the em comes with a font-weight:"normal" resetting the surrounding strong tag! There seems no way to drop the font-weight from em. You could surround the area with an iframe but that is a less than ideal solution.

Read more: EXT THREADS

YUI

WHY RESET?

Retrieved from "http://www.extjs.com/learn/Manual:Ext_CSS_Overview"
  • This page was last modified on 17 January 2009, at 13:21.
  • This page has been accessed 21,016 times.