<%@ Page Language="C#" AutoEventWireup="true" CodeFile="bookIndex.aspx.cs" Inherits="book_bookIndex" %>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<link rel="stylesheet" type="text/css" href="../ext-3.2.1/resources/css/ext-all.css" />
<script type="text/javascript" src="../ext-3.2.1/adapter/ext/ext-base-debug.js"></script>
<script type="text/javascript" src="../ext-3.2.1/ext-all-debug.js"></script>
<script language="javascript">
Ext.onReady(function(){
//主面板的创建
new Ext.Viewport({
layout:'border',
items:[{
title:'简单书籍管理',
collapsible:true,
html:'<br><center><font size=6>简单书籍管理</font></center>',
region:'north',//指定子面板所在的区域为north
height:100
},{
title:'功能菜单',
items:menu,//???????
split:true,//分割线允许拖 动
id:'menu1',//add by me
collapsible:true,
region:'west',//指定子面板所在的区域为west
width:150
},{
title:'系统说明',
contentEl:'aboutDiv',
collapsible:true,
id:'mainContent',//主面板id
region:'center'//指定子面板所在的区域为center
}]
});
//菜单栏
var root=new Ext.tree.TreeNode();//创建根节点
var node1=new Ext.tree.TreeNode({//创建书籍类型维护节点
text:'书籍类型维护',//设置节点标题
url:'bookex.ashx?action=showBookTypeList'//设置节点对应的url地址
});
var node2=new Ext.tree.TreeNode({
text:'书籍维护',//设置节点标题
url:'bookex.ashx?action=showBookList'//设置节点对应的url地址
});
root.appendChild(node1);//将节点加入到根节点中
root.appendChild(node2);
var menu=new Ext.tree.TreePanel({//创建树面板
border:false,//不显示边框
root:root,//加载根节点
applyTo:'menu1',//add by me
rootVisible:false,//不显示根节点
listeners:{
click:function(node,e){//树节点单击事件
mainPanel.load({//调用主面板的load方法加载指定页面， load( Object/String/Function config ) : Ext.Panel
url:node.attributes.url,//获取当前节点对应的url地址
callback:function(){//加载成功后回调函数
mainPanel.setTitle(node.text);//setTitle(String title, String iconCls )设置面板的标题文本，你也可以在这里指定面板的图片（透过CSS样式类）。
},
scripts:true//执行加载页面中的脚本
})
}
}
});
var mainPanel=Ext.getCmp('mainContent');//页面初始化后获取主面板的引用 getCmp 返回Ext.Component
//书籍维护界面
var bookStore=new Ext.data.Store({//Store类封装了一个客户端的Record对象的缓存， 为诸如GridPanel、ComboBox和DataView等的小部件提供了数据的入口。
autoLoad:true,//自动加载
reader:new Ext.data.JsonReader({
root: 'Data' ,
totalProperty:'Count'
},
Ext.data.Record.create([//定义记录格式
{name:'brief',mapping:'brief'},
{name:'price',mapping:'price'},
{name:'title',mapping:'title'},
{name:'author',mapping:'author'},
{name:'book_name',mapping: 'book_name'},
{name:'id',mapping:'id'} //mappping:由json取值时的字段顺
])
),
proxy:new Ext.data.HttpProxy({
url:'bookex.ashx?action=getBookList'
})
});
//创建工具栏组件
var toolbar=new Ext.Toolbar([
{text:'新增书籍',iconCls:'add',handler:showAddBook},
{text:'修改书籍',iconCls:'option',handler:showModifyBook},
{text:'删除书籍',iconCls:'remove',handler:showDeleteBook}
]);
//创建grid表格组件
var cb=new Ext.grid.CheckboxSelectionModel();//创建选择模式对象 通过checkbox选择或反选时触发选区轮换的一个制定选区模型。
var bookGrid=new Ext.grid.GridPanel({
applyTo:'grid-div',//设置表格显示的位置
height:400,
layout:'fit',
frame:true,//渲染表格面板
tbar:toolbar,//设置顶端工具栏
store:bookStore,//设置表格对应数据集
stripeRows:true,//True表示为显示行的分隔符（默认为true）。
autoScroll:true,//当数据超过表格高度时，自动显示出滚动条
viewConfig:{//viewConfig 任何Ext.grid.GridView可用的配置选项都可在这里指定。若view已指定则此项无效。
autoFill:true//自动充满表格
},
sm:cb,//设置表格的选择模式？？？
columns:[//自动创建列模型（ColumnModel）的数组
new Ext.grid.RowNumberer({//创建表格行号
header:'行号',
width:40
}),
cb,//在表中显示复选框
{header:'简介',width:80,dataIndex:'brief',sortable:true},
{header:'价格',width:80,dataIndex:'price',sortable:true},
{header:'类型',width:80,dataIndex:'title',sortable:true},
{header:'作者',width:80,dataIndex:'author',sortable:true},
{header:'书籍名称',width:80,dataIndex:'book_name',sortable:true},
{header:'书籍编号',width:80,dataIndex:'id',sortable:true}
]
});
//书籍新增界面
Ext.QuickTips.init();//所有基于标签的提示将开始启用
Ext.form.Field.prototype.msgTarget='side';//统一指定错误的提示方式
var bookForm=new Ext.FormPanel({
labelSeparator:':',
frame:true,
border:false,
items:[
{
xtype:'textfield',//文本区
width:200,
allowBlank:false,
blankText:'书籍名称不能为空',
name:'book_name',
fieldLabel:'书籍名称'
},
{
xtype:'textfield',//文本区
width:200,
allowBlank:false,
blankText:'书籍作者不能为空',
name:'author',
fieldLabel:'作者'
},
{
name:'title',//是设定了这个title值在增加记录和编辑记录时才有title的具体内容显示
xtype:'combo',
id:'com',
fieldLabel:'类型',
allowBlank:true,
emptyText:'不限制',
hiddenName:'type_id',
mode:'local',
displayField:'title',//显示值
valueField:'type_id',//value值
triggerAction:'all',
editable:false,
store:new Ext.data.Store({
autoLoad:true,
reader:new Ext.data.JsonReader({
root: 'Data',
totalProperty:'Count'
},
Ext.data.Record.create([//定义记录格式
{name:'detail',mapping:'detail'},
{name:'title',mapping:'title'},
{name:'type_id',mapping:'type_id'}
])
),
proxy:new Ext.data.HttpProxy({
url:'bookex.ashx?action=showBookTypeList'//
})
})
},
{
xtype:'textfield',//文本区
width:200,
name:'price',
fieldLabel:'金额'
},
{
xtype:'textarea',//多行文本区
width:200,
name:'brief',
fieldLabel:'简介'
}
,
{
xtype:'hidden',//隐藏字段，这里用于给后台传当前表单的id
name:'id'
}
],
buttons:[
{
text:'关闭',
handler:function(){
win.hide();//隐藏弹出窗口
}
},{
text:'提交',
handler: submitForm//提交表单数据 ,下面一个函数名
}
]
});
var win=new Ext.Window({//建弹出窗口
layout:'fit',
width:380,
closeAction:'hide',//hide这样使得window可通过show 的方法再显示
height:280,
resizable:false,
shadow:true,
modal:true,//模态窗口
closable:true,
bodyStyle:'padding:5 5 5 5',
animcollapse:true,
items:[bookForm]//将上面定义的bookform表单面板加入到窗口中
});
//显示新建书籍窗口
function showAddBook(){
bookForm.form.reset();//重置表单
bookForm.isAdd=true;// 设置isAdd附加属性为真
win.setTitle('新增书籍信息');
win.show();
}
//显示修改书籍窗口
function showModifyBook(){
var bookList=getBookIdList();// 函数在下方，从网上下
var num=bookList.length;
if(num>1){
Ext.MessageBox.alert('提示','每次只能修改一条信息');
}else if(num==1){
bookForm.form.reset();
bookForm.isAdd=false;
win.setTitle('修改书籍信息');
win.show();
var id=bookList[0];
loadForm(id);//函数在下方 这里的id也是后台需获取的一个参数，所以在update时要加参数id
}
}
//提交表单数据
function submitForm(){
//判断当前执行的提交操作，isAdd为true表示执行书籍新增操作
//false表示执行函数修改操作
if(bookForm.isAdd){
//新增书籍信息
bookForm.form.submit({
clientValidation:true,//客户端验证
waitMsg:'正在提交表单数据',//提示信息
waitTitle:'提示',//标题
url:'bookex.ashx?action=addBook' ,
method:'POST',
success:function(form,action){//加载成功的处理函数
win.hide();
updateBookList(action.result.id);//updateBookLits为下面的一个函数
Ext.Msg.alert('提示','新增书籍成功');
},
failure:function(form,action){//加载失败的处理函数
Ext.Msg.alert('提示','新增书籍失败');
}
});
}else{
//修改书籍信息
bookForm.form.submit({
clientValidation:true,
waitMsg:'正在提交表单数据,请稍候',
waitTitle:'提示',
url:'bookex.ashx?action=modifyBook' ,//??提交表单信息
method:'POST',
success:function(form,action){//加载成功的处理函数
win.hide();
updateBookList(action.result.id);//?函数在下面
Ext.Msg.alert('提示','修改书籍成功');
},
failure:function(form,action){//加载失败的处理函数
Ext.Msg.alert('提示','修改书籍失败');
}
})
}
}
//明细数据修改后，同步更新书籍列表信息
function updateBookList(id){
var fields=getFormFieldsObj(id);//getFormFieldsObj函数下面有定义
var index=bookStore.find('id',fields.id);//
if(index!=-1)//编辑书籍
{
var item=bookStore.getAt(index);
for(var fieldName in fields){
item.set(fieldName,fields[fieldName]);
}
bookStore.commitChanges();//commitChagnes()提交全部有变化的Record集。
}
else{
var rec=new Ext.data.Record(fields);//Ext.data.Record(fields)//参数对象数组，提供了每一个Record实例所需的字段属性定义
bookStore.add(rec);//添加书籍记录
}
}
//取得表单数据，该函数的作用是遍历表单中的所有字段，将字段中的数据封装到一个对象中，然后将该对象返回
function getFormFieldsObj(id){
var fields=bookForm.items;//取得表单中全部字段 items所有表单内元素的集合
var obj={};//创建不包含任何数据的空对象
for (var i=0;i<fields.length;i++){//循环遍历表单字段
var item=fields.itemAt(i);//获取第i个字段
var value=item.getValue();//取得字段值
if (item.getXType()=='combo'){//判断是否为组合框
var index=item.store.find('type_id',value);//find( Function fn, Object scope, String property, String/RegExp value, Number startIndex, Boolean anyMatch, Boolean caseSensitive ) : Number 由外部函数进行该Store缓存记录的筛选。Store里面的每个记录都经过这个函数内部使用。如果函数返回true的话，就引入（included）到匹配的结果集中。这里可以参看API中jsonStore，
//本例中的id是所传入Record的id 本例中的value( String/RegExp )既可以是字段开头的字符串，也可以是针对该字段的正则表达式,这里是字段开头的字符串
//返回值匹配的索引或-1
if(index!=-1){
var selItem=item.store.getAt(index);
//getAt( Number index ) : Ext.data.Record 根据指定的索引找到Record。返回值Ext.data.Record 返回匹配索引的Record，如果未找到则返回undefined
}
value=selItem.get('title');//get( String name ) : Object 根据字段返回值。
}
obj[item.name]= value;
}
if(Ext.isEmpty(obj['id'])){
obj['id']=id;//判断id字段是否为空
}
return obj;
}
//改造书籍修改界面
function loadForm(id){
bookForm.form.load({//调用表单的加载方法 //另一种加载表单的方法form.getForm().load({ url : ""})
waitMsg:'正在加载数据请稍候',//提示信息
waitTitle:'提示',
url:'bookex.ashx?action=getBookById',//请求的url地址 获取修改的那条字段
params:{id:id},
method:'POST',//之前为GET
success:function(form,action){
//Ext.Msg.alert('','数据加载成功');
},
failure:function(form,action){
Ext.Msg.alert('','数据加载失败');
}
});
}
//改造书籍删除代码
function showDeleteBook(){//显示删除书籍对话框
var bookList=getBookIdList();//
var num=bookList.length;
if(num==0)
{
return;
}
Ext.Msg.confirm('','您确定要删除所选书籍吗？',function(btnId){
if(btnId=='yes'){
deleteBooks(bookList);//deleteBooks下面
}
})
}
function deleteBooks(bookList){//删除书籍
var bookIds=bookList.join('-');//将包含书籍id的数组连接为'-'分隔的字符串
var msgTip=Ext.MessageBox.show({//显示正常删除的信息提示框
title:'提示',
width:250,
msg:'正在删除书籍请稍候'
});
Ext.Ajax.request({
url:'bookex.ashx?action=deleteBooks',
params:{bookIds:bookIds},//设置请求参数，包含书籍id的字符串将作为参数传递
method:'POST',
success:function(response,options){//请求成功后的回调函数
msgTip.hide();//隐藏信息提示框
var result=Ext.util.JSON.decode(response.responseText);//解码响应字符串为JSON对象
if(result.success)
{
//服务器端数据成功删除成功后，同步删除客户端列表中的数据
for (var i=0;i<bookList.length;i++){
var index=bookStore.find('id',bookList[i]);
if(index!=-1){
var rec=bookStore.getAt(index);
bookStore.remove(rec);//从Store中移除一Record对象，并触发remove移除事件，返回值为void
}
}
Ext.Msg.alert('','删除书籍成功');
}
else{
Ext.Msg.alert('','删除书籍失败');
}
},
failure:function(response,options){//请求失败时的回调函数
msgTip.hide();
Ext.Msg.alert('','删除书籍失败');
}
});
}
function getBookIdList(){//选择当前操作的行
var recs=bookGrid.getSelectionModel().getSelections();//getSelectionModel()返回grid的SelectionModel。
//recs 获取选中行的所有记录
var list=[];
if(recs.length==0){
Ext.Msg.alert('','请选择要进行操作的书籍');
}
else{
for(var i=0;i<recs.length;i++)
{
var rec=recs[i];
list.push(rec.get('id'))
}
}
return list;//返回当前选择行的id
};
});
</script>
<head runat="server">
<title>无标题页</title>
</head>
<body>
<div id="aboutDiv">
i am aboutDiv
<div id="grid-div">
</div>
</div>
</body>
</html>