HTML：
2 <html xmlns="http://www.w3.org/1999/xhtml">
3
4 <head>
5 <meta content="text/html; charset=utf-8" http-equiv="Content-Type" />
6 <title>jquery拼音转汉字搜索</title>
7 <script language="jscript" type="text/jscript">
8 function upcase(src){
9 sVal=new String(src.value)
10 src.value=sVal.toUpperCase()
11 }
12 </script>
13
14
15
16 <script language="javascript" type="text/javascript">
17 function showjianpan(sid)
18 {
19 whichEl = eval("jianpan" + sid);
20 if (whichEl.style.display == "none")
21 {
22 eval("jianpan" + sid + ".style.display=\"\";");
23 }
24 else
25 {
26 eval("jianpan" + sid + ".style.display=\"none\";");
27 }
28 }
29 </script>
30 <style type="text/css">
31 <!--
32
33 .STYLE2 {color: #FF0000;}
34 .style1 { font-family: "宋体";
35 font-weight: bold;
36 }
37 .style8 {color: #FFFFFF;}
38 .style9 {
前段学了小胖的GTGrid，很方便实用。最近在学习Extjs.
做了个CRUD的Demo,包括Extjs版和GTGrid版，做的比较
粗糙，希望对大家有一些帮助。
部分源码:<%@ page language="java" pageEncoding="GBK"%>
<%@taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c"%>
<c:set var="ctx" value="${pageContext.request.contextPath}"/>
<html>
<head>
<title>用户管理首页</title>
<link rel="stylesheet" type="text/css" href=/blog_article/"js/ext-2.2/resources/css/ext-all.css" />
<script type="text/javascript" src=/blog_article/"js/ext-2.2/adapter/ext/ext-base.js"></script>_br/index.html>
<script type="text/javascript" src=/blog_article/"js/ext-2.2/ext-all.js"></script>_br/index.html>
<style type="text/css">
.x-panel-body p {
margin:5px;
}
.x-column-layout-ct .x-panel {
margin-bottom:5px;
}
.x-column-layout-ct .x-panel-dd-spacer {
margin-bottom:5px;
}
.settings {
background-image:url(/blog_article/js/ext-2_2/shared/icons/fam/folder_wrench.png) !important;
}
.nav {
background-image:url(/blog_article/js/ext-2_2/shared/icons/fam/folder_go.png) !important;
}
.icon-grid {
background-image: url(/blog_article/js/ext-2_2/shared/icons/fam/grid.png) !important;
}
#button-grid .x-panel-body {
border: 1px solid #99bbe8;
border-top: 0 none;
}
.add {
background-image: url(/blog_article/js/ext-2_2/shared/icons/fam/add.gif) !important;
}
.option {
background-image: url(/blog_article/js/ext-2_2/shared/icons/fam/plugin.gif) !important
;
}
.remove {
background-image: url(/blog_article/js/ext-2_2/shared/icons/fam/delete.gif) !important
;
}
.save {
background-image: url(/blog_article/js/ext-2_2/shared/icons/save.gif) !important;
}
</style>
<script>
<!--
Ext.onReady(function()
{
/**Grid相关**/
Ext.QuickTips.init();
Ext.form.Field.prototype.msgTarget='side';
var newFormWin; //form窗口容器
var form1; //添加用户的form
var form2;; //修改用户的form
//侧边栏状态的记录
Ext.state.SessionProvider = Ext.extend(Ext.state.CookieProvider, {
readCookies : function(){
if(this.state){
for(var k in this.state){
if(typeof this.state[k] == 'string'){
this.state[k] = this.decodeValue(this.state[k]);
}
}
}
return Ext.apply(this.state || {}, Ext.state.SessionProvider.superclass.readCookies.call(this));
}
});
var xg = Ext.grid;
var jsonReader = new Ext.data.JsonReader( {
root : 'list', //返回的数据集合
totalProperty : 'totalCount', //总记录数
successProperty : '@success' //成功标记
}, [ {
name : 'id', //grid中的dataIndex
mapping : 'id', //返回的数据中的字段名
type : 'int' //类型，默认为string类型
}, {
name : 'username',
mapping : 'username'
}, {
name : 'age',
mapping : 'age',
type : 'int'
},
{
name : 'ramark',
mapping : 'remark'
}]);
// Store
var ds = new Ext.data.Store( {
proxy : new Ext.data.HttpProxy( {
url : '${ctx}/UserServlet?method=getAll'
}),
reader : jsonReader
});
ds.setDefaultSort('id', 'asc');
/**
***CRUD Grid
****/
//自定义的checkbox列选择
var sm = new xg.CheckboxSelectionModel({
listeners: //添加监听器
{
//行选择事件
rowselect : function (sm, rowIndex, keep, rec) //行选中事件
{
//得到ext组件用Ext.getCmp('id')
var btn = Ext.getCmp('tbar1');
//选择数量大于2，禁用修改按钮
if(sm.getCount() != 1)
{
btn.disable();
}
语法：
position : static | absolute | fixed | relative
参数：
static : 无特殊定位，对象遵循HTML定位默认规则
absolute : 绝对定位。将对象从文档流中拖出，使用left，right，top，bottom等属性进行绝对定位。而其层叠通过z-index属性定义。此时对象不具有边距，但仍有补白和边框。相对于position属性非static值的最近父级元素进行偏移，如果父级都是static（文档流），则相对整个文档进行偏移。偏移后，原来的空间会被其他元素挤占
relative : 相对定位。对象不能想绝对定位一样层叠，但可依据left，right，top，bottom等属性在正常文档流中相对原先对象的位置进行偏移。原先的位置会被其他元素挤占。
fixed : IE5.5及NS6尚不支持此属性 。可以使元素在屏幕上保持固定，下拉滚动条，位置也不改变
知识点说明：
(1)文档流是文档中可显示对象在排列时所占用的位置，浏览器解析html时，会按从上到下的顺序，把元素放到相应位置。如div，p占用文档流，他们本身是块级元素（块级元素无论width是否占满网页宽度，都会占用一行），在文档流则从上到下分行显示div和p。
示例1：
<div style="width:300px;height:100px;border:1px solid red">我是div标签</div>
<p style="width:300px;height:100px;border:1px solid red">我是p标签</p>
而如果想让div位置脱离文档流偏移，让解析时，把div脱离文档流，相对左上角原点向右偏移400px，把p放到文档流中，占用div本来的位置，则可以用绝对定位。
示例2：
<div style="width:300px;height:100px;border:1px solid red;position:absolute;left:400px">我是div标签</div>
<p style="width:300px;height:100px;border:1px solid red">我是p标签</p>
这时候我们可以看出，绝对定位后，div偏离了文档流，不再是从上到下显示，而是把div偏移，p标签占用本来的文档流位置。
(2)偏移参照对象:
absolute绝对定位的偏移参照物是最近的position非static的父标签。
示例3：
<div style="width:900px;height:100px;border:1px solid black;position:absolute;left:100px">我是大div，我根据body向右偏移100px，小div要根据我的左上角原点偏移
<div style="width:300px;height:100px;border:1px solid red;position:absolute;left:400px">我是div标签</div>