题目：用Ext做一个列表。列表里边只显示名称、性别、年龄
列表上有一个参看详细信息的按钮，点击以后，弹出一个Ext窗口，显示用户的详细信息
用户信息（名称，性别，年龄，联系电话，籍贯，身份证号，毕业学校，工作日期，备注）
静态数据实现：
<%@ page language="java" import="java.util.*" pageEncoding="utf-8"%>
<%
String path = request.getContextPath();
String basePath = request.getScheme()+"://"+request.getServerName()+":"+request.getServerPort()+path+"/";
%>
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<base href="<%=basePath%>">
<title>My first Extjs window</title>
<meta http-equiv="pragma" content="no-cache">
<meta http-equiv="cache-control" content="no-cache">
<meta http-equiv="expires" content="0">
<meta http-equiv="keywords" content="keyword1,keyword2,keyword3">
<meta http-equiv="description" content="This is my page">
<link rel="stylesheet" href="js/ext3.4/resources/css/ext-all.css" type="text/css"></link><!-- 包引用-->
<!-- <!--
<script type="text/javascript">
function list(){
// sample static data for the store
var myData = [//数据组合
['小王','男','12','13325100212','山东省','372925198905123112','高唐县中学2','2014-08-12','xiaowangbz'],
['小三','女','22','13325100213','山东省','372925198905123113','高唐县中学3','2014-08-13','xiaosanbz'],
['赵五','男','24','13325100215','山东省','372925198905123114','高唐县中学4','2014-08-14','zhaowubz'],
['王六','女','25','13325100216','山东省','372925198905123115','高唐县中学5','2014-08-15','wangliubz'],
['外八','男','26','13325100218','山东省','372925198905123116','高唐县中学6','2014-08-16','waibabz']
];
// create the data store
var store = new Ext.data.ArrayStore({//数据对应的字段
fields: [
{name: 'xm'},
{name: 'xb'},
{name: 'nl'},
{name: 'lxdh'},
{name: 'jg'},
{name: 'sfzh'},
{name: 'byxx'},
{name: 'gzrq'},
{name: 'bz'}
]
});
// manually load local data
store.loadData(myData);
// create the Grid
var grid = new Ext.grid.GridPanel({//因为要求只是显示3个字段，所以剩余字段没有列出来。但是弹出的详细信息是可以取值的，个人认为可能是前两步骤对应好的原因。个人理解。
store: store,
columns: [
{
id :'xm',
header : '姓名',
width : 160,
sortable : true,
dataIndex: 'xm'
},
{
header : '性别',
width : 75,
sortable : true,
renderer : 'xb',
dataIndex: 'xb'
},
{
header : '年龄',
width : 75,
sortable : true,
renderer : 'nl',
dataIndex: 'nl'
},
{
xtype: 'actioncolumn',
width: 80,
items: [{
icon : 'images/arrow_075.gif', // Use a URL in the icon config
tooltip: 'Sell stock',
handler: function(grid, rowIndex, colIndex) {//点击详细信息，弹出对话框
var rec = store.getAt(rowIndex);
var name="hello"
var win;
win=new Ext.Window({//ext窗口，html把显示的值对应好就行。
title:"用户详细信息",
height:300,
width:300,
maximizable:true,
html:'<table><tr><td>名称：<input type="text" disabled="true" size="12" value='+ rec.get('xm')+' /></td></tr><tr><td>性别：<input type="text" disabled="true" size="12" value='+ rec.get('xb')+' /></td></tr><tr><td>年龄：<input type="text" disabled="true" size="12" value='+ rec.get('nl')+' /> </td></tr><tr><td>联系电话：<input type="text" disabled="true" size="12" value='+ rec.get('lxdh')+' /> </td></tr><tr><td>籍贯：<input type="text" disabled="true" size="12" value='+ rec.get('jg')+' /></td></tr><tr><td>身份证号：<input type="text" disabled="true" size="12" value='+ rec.get('sfzh')+' /></td></tr><tr><td>毕业学校：<input type="text" disabled="true" size="12" value='+ rec.get('byxx')+' /></td></tr><tr><td>工作日期：<input type="text" disabled="true" size="12" value='+ rec.get('gzrq')+' /> </td></tr><tr><td>备注：<input type="text" disabled="true" size="12" value='+ rec.get('bz')+' /> </td></tr></table>'
});
win.show();//渲染显示
}
}, {
getClass: function(v, meta, rec) { // Or return a class from a function
if (rec.get('change') < 0) {
this.items[1].tooltip = 'Do not buy!';
return 'alert-col';
} else {
this.items[1].tooltip = 'Buy stock';
return 'buy-col';
}
},
handler: function(grid, rowIndex, colIndex) {
var rec = store.getAt(rowIndex);
alert("Buy " + rec.get('company'));
}
}]
}
],
stripeRows: true,
autoExpandColumn: 'xm',
height: 350,
width: 600,
title: 'Ext列表',
stateful: true,
stateId: 'grid'
});
// render the grid to the specified div in the page
grid.render('grid-example');//渲染显示grid ，grid-example是div的id，注意，这是绑定在div上才能在页面上显示
}
</script>
</head>
<body onload="list();">
<div id="grid-example"></div>
<!--
<input type="button" value="打开窗口fffffff" onclick="openWin()">
-->
</body>
</html>
第一次做ext的小示例哦。 开心啦。