用Ext做的后台操作(包括,增,删,改,查)和一个异步加载的Ext树(1)
http://cam.taoke.alimama.com/event.php?pid=mm_10972871_0_0&eventid=100012
最近刚做了Ext的后台操作，我也是刚接触Ext有好多都是边学边做,所以把部分代码写下来,希望能够方便大家，方便自己...
//导包的地方就不多说了
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>电子书列表</title>
<link rel="stylesheet" type="text/css"
href="/js/ext/resources/css/ext-all.css" />
<link rel="stylesheet" type="text/css"
href="/js/ext/MultiselectItemSelector-3.0/Multiselect.css" />
<script type="text/javascript" src="/js/ext/adapter/ext/ext-base.js"></script>
<script type="text/javascript" src="/js/ext/ext-all-debug.js"></script>
<script type="text/javascript"
src="/js/ext/MultiselectItemSelector-3.0/Multiselect.js"></script>
<script type="text/javascript"
src="/js/ext/app/book/InOutManageWindow.js"></script>
<script type="text/javascript"
src="/js/ext/MultiselectItemSelector-3.0/DDView.js"></script>
<script type="text/javascript"
src="/js/ext/UploadDialog/Ext.ux.UploadDialog.packed.js"></script>
<script type="text/javascript">Ext.BLANK_IMAGE_URL = '/js/ext/app/img/s.gif';
</script>
</head>
<body>
<script type="text/javascript">Ext.BLANK_IMAGE_URL = '/js/ext/app/img/s.gif';
</script>
<script type="text/javascript" src="/js/ext/app/book/createBook.js"></script>
<script type="text/javascript">
//ds是从服务器端拿到的一些JSON的数据
var ds = new Ext.data.Store({
proxy : new Ext.data.HttpProxy({
url : '/AdminBookList/'
}),
reader : new Ext.data.JsonReader({
totalProperty : 'totalProperty',
root : 'bookList',
fields : [{
name : 'bookID'
}, {
name : 'name'
}, {
name : 'author'
}, {
name : 'keyWord'
}, {
name : 'bookTypeIndex'
}, {
name : 'url'
}, {
name : 'bookFile'
},{
name:'description'
}]
})
});
//分页读取的参数
ds.load({
params : {
start : 0,
limit : 20
}
});
//点击列表时会异步的加载一个formPanle
var sm = new Ext.grid.CheckboxSelectionModel({
// var sm = new Ext.grid.RowSelectionModel({
// singleSelect: true,
listeners : {
rowselect : function(sm, row, rec) {
var form = Ext.getCmp("book-form").getForm();
form.loadRecord(rec);
form.findField("multiselect").setValue(rec.get("bookTypeIndex"));
var bookID = rec.get('bookID');
addTree(bookID);
// t=addTree(bookID);
}
}
});
//加载异步树
function addTree(bookID) {
var ss = Ext.getCmp("sectionStructure1");
if (ss) {
ss.destroy();
}
var sectionStructure = new Ext.Panel({
// columnWidth : 0.2,
// xtype:'panel',
title : '结构',
// renderTo:'sectionStructure',
layout : 'fit',
autoHeight : true,
border : false
});
//具体的把一本树展现成树形的结构,可以在枝，叶上做修改
var data = new Ext.tree.TreeLoader({
url : '/tree/?bookID=' + bookID
});
var root = new Ext.tree.AsyncTreeNode({
text : '根',
draggable : false,
rootFlag : true
});
var tree = new Ext.tree.TreePanel({
id : 'sectionStructure1',
renderTo : 'sectionStructure',
width : 1000,
autoScroll : true,
useArrows : true,
animate : true,
containerScroll : true,
rootVisible : false,
root : root,
loader : data
});
tree.on('dblclick', itemManage);
tree.on('contextmenu', outItemTreeContextMenu);
root.expand(true, true);
}
Ext.onReady(function() {
var bd = Ext.getBody();
var cm = new Ext.grid.ColumnModel([sm,
// new Ext.grid.RowNumberer(),
{
header : 'ID',
width: 30,
dataIndex : 'bookID',
sortable : true,
editor : new Ext.form.TextField({
allowBlank : false
})
}, {
header : '书名',
dataIndex : 'name'
}, {
header : '作者',
width: 80,
dataIndex : 'author'
}, {
header : '关键字',
width: 80,
dataIndex : 'keyWord'
}, {
header : '是否有文件',
dataIndex : 'bookFile'
},{
header:'描述',
dataIndex: 'description'
}]);
var multiselect = new Ext.ux.Multiselect({
id : "multiselect",
xtype : "multiselect",
fieldLabel : "类型",
name : "bookTypeID",
dataFields : ["bookTypeID", "name"],
store : dsBookType,
valueField : "bookTypeID",
displayField : "name",
width : 150,
height : 200,
allowBlank : false,
legend : "Multiselect",
tbar : [{
text : "重置",
handler : function() {
form0.getForm().findField("bookTypeID").reset();
}
}]
});
var s_pannel = new Ext.FormPanel({
height : 60,
labelWidth : 80,
renderTo : 'grid',
baseCls : 'x-plain',
defaults : {
width : 150,
height : 20
},
defaultType : 'textfield',
items : [{
fieldLabel : '作者',
id : 'author',
name : 'author'
}, {
fieldLabel : '书名',
id : 'bookName',
name : 'bookName'
}]
});
// create the Grid
ds.on('beforeload', function() {
Ext.apply(this.baseParams, {
author : Ext.get('author').dom.value,
bookName : Ext.get('bookName').dom.value
});
});
var grid = new Ext.grid.EditorGridPanel({
title : '电子书列表',
sm : sm,
width : 600,
height : 600,
fram : true,
el : 'grid',
ds : ds,
cm : cm,
bbar : new Ext.PagingToolbar({
pageSize : 20,
store : ds,
cm : cm,
displayInfo : true,
// displayMsg: '显示第 {0} 条到 {1} 条记录，一共 {2} 条',
displayMsg : '',
emptyMsg : "没有记录"
}),
listeners : {
render : function(g) {
g.getSelectionModel().selectRow(0);
},
delay : 10
// Allow rows to be rendered.
}
});
grid.addListener('rowcontextmenu', rowmenu);
function rowmenu(grid, rowindex, e) {
e.preventDefault();
rightClick.showAt(e.getXY());
}
var rightClick = new Ext.menu.Menu({
id : 'rightClickCont',
items : [{
text : '删除电子书',
handler : delBook
}]
});
function delBook() {
var c = grid.selModel.selections.keys;
if (c.length > 0) {
Ext.MessageBox.confirm('警告', '确认要删除所选记录?', doBook);
} else {
Ext.MessageBox.alert('提示', '最少需要选择一条记录!');
}
}
function doBook(btn) {
if (btn == 'yes') {
var selectedRows = grid.selModel.selections.items;
var jsonData = '';
for (var i = 0; i < selectedRows.length; i++) {
var row = selectedRows[i];
if (i == 0) {
jsonData = jsonData + row.data['bookID'];
} else {
jsonData = jsonData + ',' + row.data['bookID'];
}
}
Ext.MessageBox.show({
msg : '正在请求数据, 请稍侯',
progressText : '正在请求数据',
width : 300,
wait : true,
waitConfig : {
interval : 200
}
});
Ext.Ajax.request({
url : '/deleteBook/',
method : 'POST',
params : {
bookIDs : jsonData
},
callback : function(options, success, response) {
if (success) {
Ext.MessageBox.hide();
Ext.MessageBox.alert("消息", '删除成功');
} else {
Ext.MessageBox.hide();
Ext.MessageBox.alert("失败，请重试", response.responseText);
}
},
failure : function(response, options) {
Ext.MessageBox.hide();
ReturnValue = Ext.MessageBox.alert("警告", "出现异常错误！请联系管理员！");
},
success : function(response, options) {
Ext.MessageBox.hide();
grid.getStore().reload();
}
})
}
}
grid.addListener('rowdblclick', rowcontextmenuFunc);
// grid.render();
var action = new Ext.Action({
text : '新建',
handler : createBookWin
});
var winParent = window.opener;
if (winParent) {
grid.addListener('rowcontextmenu', rightClickFn);
function doChooseBook() {
var selectedRow = grid.getSelectionModel().getSelected();
var winParent = window.opener.document;
var url_add = winParent.getElementById('url_add');
var url_update = winParent.getElementById('url_update');
if (selectedRow) {
var bookID = selectedRow.data['bookID'];
var s = "showBookDetail/?bookID=" + bookID;
if (url_add != null) {
url_add.value = s;
}
if (url_update != null) {
url_update.value = s;
}
}
window.close();
}
var rightClick = new Ext.menu.Menu({
id : 'rightClickCont',
items : [{
text : '选中',
handler : doChooseBook
}]
});
function rightClickFn(grid, rowindex, e) {
e.preventDefault();
rightClick.showAt(e.getXY());
}
}
var gridForm = new Ext.FormPanel({
id : 'book-form',
bbar : [action],
tbar : [s_pannel, {
xtype : "tbseparator"
}, {
text : ' 搜索',
cls : "x-btn-text-icon",
handler : function() {
// 这里是关键，重新载入数据源，并把搜索表单值提交
ds.load({
params : {
start : 0,
limit : 20,
author : Ext.get('author').dom.value,
bookName : Ext.get('bookName').dom.value
}
})
}
}],
frame : true,
labelAlign : 'left',
title : '电子书列表',
bodyStyle : 'padding:5px',
width : 1000,
layout : 'column',
items : [{
columnWidth : 0.5,
layout : 'fit',
items : grid
}, {
columnWidth : 0.3,
xtype : 'fieldset',
labelWidth : 90,
title : '详情',
defaults : {
width : 140
},
defaultType : 'textfield',
autoHeight : true,
bodyStyle : Ext.isIE
? 'padding:0 0 5px 15px;'
: 'padding:10px 15px;',
border : false,
style : {
"margin-left" : "10px",
"margin-right" : Ext.isIE6
? (Ext.isStrict ? "-10px" : "-13px")
: "0"
},
items : [{
fieldLabel : 'ID',
name : 'bookID',
readOnly : true
}, {
fieldLabel : '书名',
name : 'name'
}, {
fieldLabel : '作者',
name : 'author'
},{
fieldLabel : '描述',
name : 'description'
}, multiselect, {
xtype : 'button',
text : '更改',
handler : function() {
gridForm.getForm().submit({
url : '/AdminUpdateBasicBook/',
waitMsg : '保存中，请稍候...',
success : function(response, request) {
ds.reload();
Ext.MessageBox.alert('成功');
},
failure : function() {
Ext.MessageBox.alert('失败');
}
});
}
}
]
}
]
});
var p = new Ext.Panel({
width : 1000,
title : '结构',
renderTo : 'sectionStructure',
layout : 'fit',
autoHeight : true,
border : false
});
gridForm.render('bd');
form0.addButton({
text : '保存',
handler : function() {
form0.getForm().submit({
url : '/AdminCreateBasicBook/',
waitMsg : '保存中，请稍候...',
success : function(response, request) {
Ext.MessageBox.alert('成功');
ds.reload();
},
failure : function() {
Ext.MessageBox.alert('失败');
}
});
}
});
});
</script>
<div id="grid" style="height: 265px;"></div>
<div><span><div id="bd"></div></span></div>
<span><div id="sectionStructure"></div></span>
</body>
</html>
由于工作的需要，就暂时的写到这里吧，以后有时间在一点一点的给大家慢慢写全