当前位置:编程学习 > JS >>

[Extjs4.1]Grid生成简单table

代码 :

html:


[html]
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Frameset//EN" "http://www.w3.org/TR/html4/frameset.dtd"> 
<html> 
<head> 
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8"> 
<title>les01</title> 
<link rel="stylesheet" type="text/css" href="../Extjs/resources/css/ext-all.css"> 
<script type="text/javascript" src="../Extjs/bootstrap.js"></script> 
<script type="text/javascript" src="../Extjs/locale/ext-lang-zh_CN.js"></script>   
<script type="text/javascript" src="griddemo1.js"></script>  
<style type="text/css"> 
.button {   
    display: inline-block;   
    zoom: 1; /* zoom and *display = ie7 hack for display:inline-block */   
    *display: inline;   
    vertical-align: baseline;   
    margin: 0 2px;   
    outline: none;   
    cursor: pointer;   
    text-align: center;   
    text-decoration: none;   
    font: 8px/100% Arial, Helvetica, sans-serif;   
    padding: .2em 2em .5em;   
    text-shadow: 0 1px 1px rgba(0,0,0,.3);   
    -webkit-border-radius: .5em;    
    -moz-border-radius: .5em;   
    border-radius: .5em;   
    -webkit-box-shadow: 0 1px 2px rgba(0,0,0,.2);   
    -moz-box-shadow: 0 1px 2px rgba(0,0,0,.2);   
    box-shadow: 0 1px 2px rgba(0,0,0,.2);   
}   
.button:hover {   
    text-decoration: none;  
}   
.button:active {   
    position: relative;   
    top: 1px;   
}   
    
/* green */ 
.green { 
    color: #e8f0de; 
    border: solid 1px #538312; 
    background: #64991e; 
    background: -webkit-gradient(linear, left top, left bottom, from(#7db72f), to(#4e7d0e)); 
    background: -moz-linear-gradient(top,  #7db72f,  #4e7d0e); 
    filter:  progid:DXImageTransform.Microsoft.gradient(startColorstr='#7db72f', endColorstr='#4e7d0e'); 

.green:hover { 
    background: #538018; 
    background: -webkit-gradient(linear, left top, left bottom, from(#6b9d28), to(#436b0c)); 
    background: -moz-linear-gradient(top,  #6b9d28,  #436b0c); 
    filter:  progid:DXImageTransform.Microsoft.gradient(startColorstr='#6b9d28', endColorstr='#436b0c'); 

.green:active { 
    color: #a9c08c; 
    background: -webkit-gradient(linear, left top, left bottom, from(#4e7d0e), to(#7db72f)); 
    background: -moz-linear-gradient(top,  #4e7d0e,  #7db72f); 
    filter:  progid:DXImageTransform.Microsoft.gradient(startColorstr='#4e7d0e', endColorstr='#7db72f'); 

 
</style>  
</head> 
<body> 
<div id="griddemo"> 
 
</div> 
 
</body> 
</html> 

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Frameset//EN" "http://www.w3.org/TR/html4/frameset.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>les01</title>
<link rel="stylesheet" type="text/css" href="../Extjs/resources/css/ext-all.css">
<script type="text/javascript" src="../Extjs/bootstrap.js"></script>
<script type="text/javascript" src="../Extjs/locale/ext-lang-zh_CN.js"></script> 
<script type="text/javascript" src="griddemo1.js"></script>
<style type="text/css">
.button { 
    display: inline-block; 
    zoom: 1; /* zoom and *display = ie7 hack for display:inline-block */ 
    *display: inline; 
    vertical-align: baseline; 
    margin: 0 2px; 
    outline: none; 
    cursor: pointer; 
    text-align: center; 
    text-decoration: none; 
    font: 8px/100% Arial, Helvetica, sans-serif; 
    padding: .2em 2em .5em; 
    text-shadow: 0 1px 1px rgba(0,0,0,.3); 
    -webkit-border-radius: .5em;  
    -moz-border-radius: .5em; 
    border-radius: .5em; 
    -webkit-box-shadow: 0 1px 2px rgba(0,0,0,.2); 
    -moz-box-shadow: 0 1px 2px rgba(0,0,0,.2); 
    box-shadow: 0 1px 2px rgba(0,0,0,.2); 

.button:hover { 
    text-decoration: none;

.button:active { 
    position: relative; 
    top: 1px; 

  
/* green */
.green {
 color: #e8f0de;
 border: solid 1px #538312;
 background: #64991e;
 background: -webkit-gradient(linear, left top, left bottom, from(#7db72f), to(#4e7d0e));
 background: -moz-linear-gradient(top,  #7db72f,  #4e7d0e);
 filter:  progid:DXImageTransform.Microsoft.gradient(startColorstr='#7db72f', endColorstr='#4e7d0e');
}
.green:hover {
 background: #538018;
 background: -webkit-gradient(linear, left top, left bottom, from(#6b9d28), to(#436b0c));
 background: -moz-linear-gradient(top,  #6b9d28,  #436b0c);
 filter:  progid:DXImageTransform.Microsoft.gradient(startColorstr='#6b9d28', endColorstr='#436b0c');
}
.green:active {
 color: #a9c08c;
 background: -webkit-gradient(linear, left top, left bottom, from(#4e7d0e), to(#7db72f));
 background: -moz-linear-gradient(top,  #4e7d0e,  #7db72f);
 filter:  progid:DXImageTransform.Microsoft.gradient(startColorstr='#4e7d0e', endColorstr='#7db72f');
}

</style>
</head>
<body>
<div id="griddemo">

</div>

</body>
</html>
griddemo1.js补充:web前端 , JavaScript ,

CopyRight © 2012 站长网 编程知识问答 www.zzzyk.com All Rights Reserved
部份技术文章来自网络,