ext ajax和grid 简单实践
<%@ page language="java" contentType="text/html; charset=GB18030"
pageEncoding="GB18030"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<link rel="stylesheet" type="text/css" href="<%=request.getContextPath() %>/js/resources/css/ext-all.css" />
<script type="text/javascript" src="<%=request.getContextPath() %>/js/adapter/ext/ext-base.js"></script>
<script type="text/javascript" src="<%=request.getContextPath() %>/js/ext-all.js"></script>
<script type="text/javascript" src="<%=request.getContextPath() %>/js/json.js"></script>
<meta http-equiv="Content-Type" content="text/html; charset=GB18030">
<title>Insert title here</title>
<script type="text/javascript">
Ext.onReady(function(){
var my={};
my.name="yk";
my.age="23";
Ext.Ajax.request({
url:"http://localhost:8080/test/ajaxServlet",
params:JSON.stringify(my),
success:function(response){
test(response);
}
});
function test(response)
{
var text=response.responseText;
alert(text);
var data=Ext.util.JSON.decode(text);
alert(data.name);
}
var data=[
{id:0,name:"yk",age:"22"},
{id:1,name:"yk1",age:"23"},
{id:2,age:"24",name:"yk2"},
{name:"yk3",age:"25"},
{id:4,name:"yk4",age:"26"},
{id:5,name:"yk5",age:"27"}
];
var data1=[
[1,"yk",23],[2,26],[3,"yk3",28]
];
var recordType=new Ext.data.Record.create([{name:"id",mapping:"id"},{name:"name",mapping:"name"},{name:"age",mapping:"age"}]);
var jsonType={id:"id"};
var reader=new Ext.data.JsonReader(jsonType,recordType);
//var store=new Ext.data.SimpleStore({data:data1,fields:["id","name","age"]});
var store=new Ext.data.JsonStore({data:data,fields:["id","name","age"]});
var cms=[
{header:"id",dataIndex:"id",width:40},
{header:"name",dataIndex:"name",width:50},
{header:"age",dataIndex:"age",width:110}
];
var grid=new Ext.grid.GridPanel({
store:store,
columns:cms,
title:"测试数据表格",
height:200,
width:200,
});
grid.render("grid");
})
</script>
</head>
<body>
<div id="grid"></div>
</body>
</html>
pageEncoding="GB18030"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<link rel="stylesheet" type="text/css" href="<%=request.getContextPath() %>/js/resources/css/ext-all.css" />
<script type="text/javascript" src="<%=request.getContextPath() %>/js/adapter/ext/ext-base.js"></script>
<script type="text/javascript" src="<%=request.getContextPath() %>/js/ext-all.js"></script>
<script type="text/javascript" src="<%=request.getContextPath() %>/js/json.js"></script>
<meta http-equiv="Content-Type" content="text/html; charset=GB18030">
<title>Insert title here</title>
<script type="text/javascript">
Ext.onReady(function(){
var my={};
my.name="yk";
my.age="23";
Ext.Ajax.request({
url:"http://localhost:8080/test/ajaxServlet",
params:JSON.stringify(my),
success:function(response){
test(response);
}
});
function test(response)
{
var text=response.responseText;
alert(text);
var data=Ext.util.JSON.decode(text);
alert(data.name);
}
var data=[
{id:0,name:"yk",age:"22"},
{id:1,name:"yk1",age:"23"},
{id:2,age:"24",name:"yk2"},
{name:"yk3",age:"25"},
{id:4,name:"yk4",age:"26"},
{id:5,name:"yk5",age:"27"}
];
var data1=[
[1,"yk",23],[2,26],[3,"yk3",28]
];
var recordType=new Ext.data.Record.create([{name:"id",mapping:"id"},{name:"name",mapping:"name"},{name:"age",mapping:"age"}]);
var jsonType={id:"id"};
var reader=new Ext.data.JsonReader(jsonType,recordType);
//var store=new Ext.data.SimpleStore({data:data1,fields:["id","name","age"]});
var store=new Ext.data.JsonStore({data:data,fields:["id","name","age"]});
var cms=[
{header:"id",dataIndex:"id",width:40},
{header:"name",dataIndex:"name",width:50},
{header:"age",dataIndex:"age",width:110}
];
var grid=new Ext.grid.GridPanel({
store:store,
columns:cms,
title:"测试数据表格",
height:200,
width:200,
});
grid.render("grid");
})
</script>
</head>
<body>
<div id="grid"></div>
</body>
</html>