本文分享了一个使用ExtJS框架实现的电子书管理系统的部分代码示例，包括电子书列表展示、分页查询、编辑及删除功能等。通过具体代码展示了如何与服务器交互获取数据并进行异步树状结构加载。
关键字: ext
最近刚做了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().;
}
})
}
}
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.;
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.;
},
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>
由于工作的需要，就暂时的写到这里吧，以后有时间在一点一点的给大家慢慢写全
扫一扫
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
