最近学习extjs，用extjs + struts2 + mysql5.0做了个CRUD及分页的实例，代码如下：
创建表代码如下：
CREATE TABLE car_info (
id int(11) AUTO_INCREMENT NOT NULL,
name varchar(50) NULL,
price varchar(25) NULL,
address varchar(50) NULL,
url varchar(50) NULL,
PRIMARY KEY(id)
)
GO
ExtStart.jsp 代码
<%@ page language="java" contentType="text/html; charset=UTF-8"
pageEncoding="UTF-8"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<title>Introduction to Ext: Starter Page</title>
<!-- Include YUI utilities and Ext: -->
<script type="text/javascript" src="extjs/adapter/yui/yui-utilities.js"></script>
<script type="text/javascript" src="extjs/adapter/yui/ext-yui-adapter.js"></script>
<script type="text/javascript" src="extjs/ext-all-debug.js"></script>
<script type="text/javascript" src="ExtStart.js"></script>
<!-- Include Ext stylesheets here: -->
<link rel="stylesheet" type="text/css" href="extjs/resources/css/ext-all.css">
<link rel="stylesheet" type="text/css" href="extjs/resources/css/ytheme-vista.css">
<link rel="stylesheet" type="text/css" href="ExtStart.css">
</head>
<body>
<h1>Introduction to Ext: Starter Page</h1>
<div id="grid-example" ></div>
</body>
</html>
ExtStart.js代码
Ext.onReady(function() {
function showUrl(value)
{
return "<a href=\""+value+"\" target=\"_blank\">" + value + "</a>";
}
/*
//xml格式数据传输
var ds = new Ext.data.Store(
{
proxy: new Ext.data.HttpProxy({url: "http://localhost:8080/myapp/carInfoList.action"}),
reader:new Ext.data.XmlReader(
{record:"row"},
["id","name","price","address","url"]
)
}
);
*/
//Json格式数据传输
var ds = new Ext.data.Store(
{
proxy : new Ext.data.HttpProxy({url:'http://localhost:8080/myapp/carInfoList.action',method:'post'}),
reader: new Ext.data.JsonReader({
root: "result" ,
totalProperty: "count"},
["id","name","price","address","url"]
)
}
);
//数据添加
function addData(){
var addData = new Ext.form.FormPanel(
{
width: 300,
labelAlign: "right",
bodyStyle: 'padding:5px 5px 0',
height:160,
defaultType: "textfield",
animCollapse: true,
items: [
{fieldLabel: "请输入名称", name: "name", id: "name"},
{fieldLabel: "请输入价格", name: "price", id: "price"},
{fieldLabel: "请输入产地", name: "address", id: "address"},
{fieldLabel: "请输入网址", name: "url", id: "url"}
],
buttons: [
{text: "提交", handler: function(){
var name = Ext.get("name");
var price = Ext.get("price");
var address = Ext.get("address");
var url = Ext.get("url");
if(name.dom.value == ""){
Ext.MessageBox.alert("提示", "请输入名称！");
name.highlight();
name.focus();
return false;
}
if(price.dom.value == ""){
Ext.MessageBox.alert("提示", "请输入价格！");
price.highlight();
price.focus();
return false;
}
if(address.dom.value == ""){
Ext.MessageBox.alert("提示", "请输入产地！");
address.highlight();
address.focus();
return false;
}
if(url.dom.value == ""){
Ext.MessageBox.alert("提示", "请输入网址！");
url.highlight();
url.focus();
return false;
}
Ext.MessageBox.wait("正在处理中，请稍候...","提示");
Ext.Ajax.request({
url: "carInfoSave.action",
success: function(response, options){
var responseArray = Ext.util.JSON.decode(response.responseText);
if(responseArray.success == true){
Ext.MessageBox.hide();
Ext.Msg.alert("提示", "信息保存成功！");
addDatas.close();
ds.load();
}else{
Ext.MessageBox.hide();
Ext.Msg.alert("提示", "信息保存失败！");
addDatas.close();
}
},
failure: function(){
Ext.MessageBox.hide();
Ext.Msg.alert("提示", "信息保存失败！");
addDatas.close();
},
params: {name: name.dom.value, price:
price.dom.value, address: address.dom.value, url: url.dom.value}
});
}},
{text: "重填", handler: function(){
Ext.get("name").dom.value = "";
Ext.get("price").dom.value = "";
Ext.get("address").dom.value = "";
Ext.get("url").dom.value = "";
}}
]
}
);
var addDatas = new Ext.Window(
{
title: "数据添加",
width: 310,
height: 190,
items: [addData],
resizable:false,
modal: true,
maximizable: true
}
);
addData.show();
addDatas.show();
}
var colModel = new Ext.grid.ColumnModel(
[
{header: "编号", width: 60, sortable: true, dataIndex: "id"},
{header: "名称", width: 120, sortable: true, dataIndex: "name"},
{header: "价格(万)", width:120, sortable: true, dataIndex: "price"},
{header: "产地", width: 120, sortable: true, dataIndex: "address"},
{header: "网址", width: 200, sortable: true, renderer: showUrl, dataIndex: "url"}
]
);
var grid = new Ext.grid.GridPanel(
{
id: "grid",
title: "grid-example",
store: ds,
height: 300,
cm: colModel,
selModel: new Ext.grid.RowSelectionModel(),
tbar:[{text: "添加", handler:function(){addData();}},
{text: "编辑", handler: function(){editData();}},
{text: "删除", handler: function(){delData();}},
{text: "刷新", handler: function(){
ds.removeAll();
ds.reload();
}}],
bbar: new Ext.PagingToolbar({
pageSize: 2,
store: ds,
displayInfo: true,
displayMsg: "显示第{0}条到第{1}条记录，一共{2}条",
emptyMsg: "没有记录"
})
}
);
function delData(){
//数据删除
var selectedRow = grid.getSelectionModel().getSelections();
var len = selectedRow.length;
if(len > 0){
var jsonStr = "{";
for(var i=0;i<len;i++){
if(i > 0){
jsonStr += ", id" + i + ":" + selectedRow[i].get("id");
}else{
jsonStr += "id" + i + ":" + selectedRow[i].get("id");
}
}
jsonStr += "}";
Ext.MessageBox.confirm("提示", "是否要删除所选的数据？", function(button, text){
if(button == "yes"){
Ext.MessageBox.wait("正在处理中，请稍候...","提示");
Ext.Ajax.request({
url: "carInfoDel.action",
success: function(response, options){
var responseArray = Ext.util.JSON.decode(response.responseText);
if(responseArray.success == true){
Ext.MessageBox.hide();
Ext.Msg.alert("提示", "信息删除成功！");
ds.load();
}else{
Ext.MessageBox.hide();
Ext.Msg.alert("提示", "信息删除失败！");
}
},
failure: function(){
Ext.MessageBox.hide();
Ext.Msg.alert("提示", "信息删除失败！");
},
params: {json: jsonStr, jsonLen: len}
});
}
});
}else{
Ext.Msg.alert("提示", "请选择要删除的数据！");
}
}
function editData(){
//数据编辑
var selectedRow = grid.getSelectionModel().getSelections();
var len = selectedRow.length;
if(len > 0){
if(len > 1){
Ext.Msg.alert("提示", "请选择一行数据进行编辑！");
}else{
var editData = new Ext.form.FormPanel(
{
width: 300,
labelAlign: "right",
bodyStyle: 'padding:5px 5px 0',
height:160,
defaultType: "textfield",
animCollapse: true,
items: [
{fieldLabel: "请输入名称", name: "name", id: "name", value: selectedRow[0].get("name")},
{fieldLabel: "请输入价格", name: "price", id: "price", value: selectedRow[0].get("price")},
{fieldLabel: "请输入产地", name: "address", id: "address", value: selectedRow[0].get("address")},
{fieldLabel: "请输入网址", name: "url", id: "url", value: selectedRow[0].get("url")}
],
buttons: [
{text: "提交", handler: function(){
var name = Ext.get("name");
var price = Ext.get("price");
var address = Ext.get("address");
var url = Ext.get("url");
if(name.dom.value == ""){
Ext.MessageBox.alert("提示", "请输入名称！");
name.highlight();
name.focus();
return false;
}
if(price.dom.value == ""){
Ext.MessageBox.alert("提示", "请输入价格！");
price.highlight();
price.focus();
return false;
}
if(address.dom.value == ""){
Ext.MessageBox.alert("提示", "请输入产地！");
address.highlight();
address.focus();
return false;
}
if(url.dom.value == ""){
Ext.MessageBox.alert("提示", "请输入网址！");
url.highlight();
url.focus();
return false;
}
Ext.MessageBox.wait("正在处理中，请稍候...","提示");
Ext.Ajax.request({
url: "carInfoSave.action",
success: function(response, options){
var responseArray = Ext.util.JSON.decode(response.responseText);
if(responseArray.success == true){
Ext.MessageBox.hide();
Ext.Msg.alert("提示", "信息保存成功！");
editDatas.close();
ds.load();
}else{
Ext.MessageBox.hide();
Ext.Msg.alert("提示", "信息保存失败！");
editDatas.close();
}
},
failure: function(){
Ext.MessageBox.hide();
Ext.Msg.alert("提示", "信息保存失败！");
editDatas.close();
},
params: {id:
selectedRow[0].get("id"), name: name.dom.value, price: price.dom.value,
address: address.dom.value, url: url.dom.value}
});
}},
{text: "重填", handler: function(){
Ext.get("name").dom.value = "";
Ext.get("price").dom.value = "";
Ext.get("address").dom.value = "";
Ext.get("url").dom.value = "";
}}
]
}
);
var editDatas = new Ext.Window(
{
title: "数据编辑",
width: 310,
height: 190,
items: [editData],
resizable:false,
modal: true,
maximizable: true
}
);
editData.show();
editDatas.show();
}
}else{
Ext.Msg.alert("提示", "请选择要编辑的数据！");
}
}
grid.render('grid-example');
grid.getSelectionModel().selectFirstRow();
ds.load({params: {start: 0, limit: 2}});
});
后台action的代码就不贴出来了，有兴趣的朋友可以自己研究下！