struts hibernate extjs 增删改查（初级练习）

最新推荐文章于 2020-10-12 17:07:01 发布

原创最新推荐文章于 2020-10-12 17:07:01 发布 · 104 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#Struts #Hibernate #EXT #Ajax

ajax相关专栏收录该内容

11 篇文章

订阅专栏

本文介绍了一个使用ExtJS框架实现的用户管理界面案例，包括添加、删除、更新用户的交互功能，并展示了如何通过Ajax与后端进行数据交换。

Ext.onReady(function (){
//	var data=[[1,"james","manager"],[2,"jean","engine"],[3,"flk","worker"],[4,"tom","cat"]];
//***********************************************************************************************************
	function adduser(){
	var win=new Ext.Window({
	width:300,
	height:300,
	title:"用户维护",
	items:{
	xtype:"form",
	layout:"form",
	items:[{xtype:"textfield",fieldLabel:"姓名",name:"userName",anchor:"70%"},
	{xtype:"textfield",fieldLabel:"密码",name:"passWord",anchor:"70%"},
	{xtype:"textfield",fieldLabel:"电话",name:"telphone",anchor:"70%"},
	{xtype:"textfield",fieldLabel:"地址",name:"address",anchor:"70%"},
	{xtype:"textarea",fieldLabel:"附录",name:"context",anchor:"70%"}
	]},
	buttons:[{text:"提交",handler:function(){
	win.getComponent(0).getForm().submit({url:"user!save",success:function(){Ext.Msg.alert("添加成功");win.close();vstore.reload();}});
	}},{text:"重置"},{text:"取消",handler:function(){
	win.close();
	}}]
	});
	win.show();
	}
	//*********************************************删除用户**************************************************************

	function deluser(){
		var record=grid.getSelectionModel().getSelected();
		var vid=record.get("id");
		Ext.Ajax.request({url:"user!del",params:{id:vid},callback:function(){
		Ext.Msg.alert("信息提示","删除成功");
		vstore.reload();
		}});
	}
	//***********************************************************************************************************

	function updateuser(){
	var win=new Ext.Window({
	width:300,
	height:300,
	title:"用户维护",
	items:{
	xtype:"form",
	layout:"form",
	items:[
	{xtype:"hidden",name:"id"},
	{xtype:"textfield",fieldLabel:"姓名",name:"userName",anchor:"70%"},
	{xtype:"textfield",fieldLabel:"密码",name:"passWord",anchor:"70%"},
	{xtype:"textfield",fieldLabel:"电话",name:"telphone",anchor:"70%"},
	{xtype:"textfield",fieldLabel:"地址",name:"address",anchor:"70%"},
	{xtype:"textarea",fieldLabel:"附录",name:"context",anchor:"70%"}
	]},
	buttons:[{text:"提交",handler:function(){
	win.getComponent(0).getForm().submit({url:"user!updata",success:function(){Ext.Msg.alert("添加成功");win.close();vstore.reload();}});
	}},{text:"重置"},{text:"取消",handler:function(){
	win.close();
	}}]
	});
	win.show();
   //获取当前鼠标选择记录
	var record=grid.getSelectionModel().getSelected();
	win.getComponent(0).getForm().loadRecord(record);
	}
	//***********************************************************************************************************

	var vstore=new Ext.data.JsonStore({
	url:"user!findAll",
	root:"users",
	idProperty:"id",
	fields:['id','userName','passWord','telphone','context','address']
	});
	var p1=new Ext.Panel({
	title:"panel1",
	height:100,
	collapsible: true
	});
	var p2=new Ext.Panel({
	title:"panel2",
	height:100,
	collapsible: true
	});
	var p3=new Ext.Panel({
	title:"panel3",
	height:100,
	collapsible: true,
	animCollapse : true
	});
	var grid=new Ext.grid.GridPanel({
		  tbar:[{text:"添加",handler:adduser},"-",{text:"删除",handler:deluser},"-",{text:"修改",handler:updateuser}],
	       store:vstore,
	       autoHeight:true,
	       columns:[{header:"编号",dataIndex:"id"},{header:"姓名",dataIndex:"userName"},{header:"电话",dataIndex:"telphone"},{header:"密码",dataIndex:"passWord"},{header:"备注",dataIndex:"context"},{header:"地址",dataIndex:"address"}]
	});
	vstore.load();
    var vp=new Ext.Viewport({
    layout:"border",
    items:[{region:"north",height:100,titile:"top"},{region:"west",width:200,split: true,collapsible: true,items:[p1,p2,p3]},{region:"center",items:[grid]}]
    });
});