最近學(xué)習(xí)extjs，用extjs + struts2 + mysql5.0做了個(gè)CRUD及分頁(yè)的實(shí)例，代碼如下：
創(chuàng)建表代碼如下：
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格式數(shù)據(jù)傳輸
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格式數(shù)據(jù)傳輸
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"]
)
}
);
//數(shù)據(jù)添加
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: "請(qǐng)輸入名稱", name: "name", id: "name"},
{fieldLabel: "請(qǐng)輸入價(jià)格", name: "price", id: "price"},
{fieldLabel: "請(qǐng)輸入產(chǎn)地", name: "address", id: "address"},
{fieldLabel: "請(qǐng)輸入網(wǎng)址", 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("提示", "請(qǐng)輸入名稱！");
name.highlight();
name.focus();
return false;
}
if(price.dom.value == ""){
Ext.MessageBox.alert("提示", "請(qǐng)輸入價(jià)格！");
price.highlight();
price.focus();
return false;
}
if(address.dom.value == ""){
Ext.MessageBox.alert("提示", "請(qǐng)輸入產(chǎn)地！");
address.highlight();
address.focus();
return false;
}
if(url.dom.value == ""){
Ext.MessageBox.alert("提示", "請(qǐng)輸入網(wǎng)址！");
url.highlight();
url.focus();
return false;
}
Ext.MessageBox.wait("正在處理中，請(qǐng)稍候...","提示");
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: "數(shù)據(jù)添加",
width: 310,
height: 190,
items: [addData],
resizable:false,
modal: true,
maximizable: true
}
);
addData.show();
addDatas.show();
}
var colModel = new Ext.grid.ColumnModel(
[
{header: "編號(hào)", width: 60, sortable: true, dataIndex: "id"},
{header: "名稱", width: 120, sortable: true, dataIndex: "name"},
{header: "價(jià)格(萬(wàn))", width:120, sortable: true, dataIndex: "price"},
{header: "產(chǎn)地", width: 120, sortable: true, dataIndex: "address"},
{header: "網(wǎng)址", 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: "沒(méi)有記錄"
})
}
);
function delData(){
//數(shù)據(jù)刪除
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("提示", "是否要?jiǎng)h除所選的數(shù)據(jù)？", function(button, text){
if(button == "yes"){
Ext.MessageBox.wait("正在處理中，請(qǐng)稍候...","提示");
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("提示", "請(qǐng)選擇要?jiǎng)h除的數(shù)據(jù)！");
}
}
function editData(){
//數(shù)據(jù)編輯
var selectedRow = grid.getSelectionModel().getSelections();
var len = selectedRow.length;
if(len > 0){
if(len > 1){
Ext.Msg.alert("提示", "請(qǐng)選擇一行數(shù)據(jù)進(jìn)行編輯！");
}else{
var editData = new Ext.form.FormPanel(
{
width: 300,
labelAlign: "right",
bodyStyle: 'padding:5px 5px 0',
height:160,
defaultType: "textfield",
animCollapse: true,
items: [
{fieldLabel: "請(qǐng)輸入名稱", name: "name", id: "name", value: selectedRow[0].get("name")},
{fieldLabel: "請(qǐng)輸入價(jià)格", name: "price", id: "price", value: selectedRow[0].get("price")},
{fieldLabel: "請(qǐng)輸入產(chǎn)地", name: "address", id: "address", value: selectedRow[0].get("address")},
{fieldLabel: "請(qǐng)輸入網(wǎng)址", 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("提示", "請(qǐng)輸入名稱！");
name.highlight();
name.focus();
return false;
}
if(price.dom.value == ""){
Ext.MessageBox.alert("提示", "請(qǐng)輸入價(jià)格！");
price.highlight();
price.focus();
return false;
}
if(address.dom.value == ""){
Ext.MessageBox.alert("提示", "請(qǐng)輸入產(chǎn)地！");
address.highlight();
address.focus();
return false;
}
if(url.dom.value == ""){
Ext.MessageBox.alert("提示", "請(qǐng)輸入網(wǎng)址！");
url.highlight();
url.focus();
return false;
}
Ext.MessageBox.wait("正在處理中，請(qǐng)稍候...","提示");
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: "數(shù)據(jù)編輯",
width: 310,
height: 190,
items: [editData],
resizable:false,
modal: true,
maximizable: true
}
);
editData.show();
editDatas.show();
}
}else{
Ext.Msg.alert("提示", "請(qǐng)選擇要編輯的數(shù)據(jù)！");
}
}
grid.render('grid-example');
grid.getSelectionModel().selectFirstRow();
ds.load({params: {start: 0, limit: 2}});
});
后臺(tái)action的代碼就不貼出來(lái)了，有興趣的朋友可以自己研究下！