题目:用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 οnlοad="list();">
<div id="grid-example"></div>
<!--
<input type="button" value="打开窗口fffffff" οnclick="openWin()">
-->
</body>
</html>
第一次做ext的小示例哦。 开心啦。