用Ext做的后台操作(包括,增,删,改,查)和一个异步加载的Ext树(1)

于 2008-07-15 13:36:32 发布
阅读量201 收藏
点赞数
分类专栏： EXT 文章标签： EXT 数据结构 Ajax json PHP
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>


由于工作的需要，就暂时的写到这里吧，以后有时间在一点一点的给大家慢慢写全
zhanglei14616
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值