`
jameszhao83
  • 浏览: 67519 次
  • 性别: Icon_minigender_1
  • 来自: 西安
社区版块
存档分类
最新评论

struts hibernate extjs 增删改查(初级练习)

阅读更多
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]}]
    });
});
 
分享到:
评论

相关推荐

    ExtJS增删改查

    在"ExtJS增删改查"这个主题中,我们将深入探讨如何利用ExtJS进行CRUD(创建Create、读取Read、更新Update和删除Delete)操作,这是任何数据库驱动的应用程序中的基本功能。 首先,创建(Create)操作通常涉及创建新...

    EXTJS4+STRUTS2+JAVA增删改查

    在这个"EXTJS4+STRUTS2+JAVA增删改查"的例子中,我们将深入探讨这三个技术如何协同工作,实现数据的动态管理。 EXTJS4是一个强大的JavaScript库,主要用于创建桌面级的Web应用程序。它提供了丰富的组件库,如表格、...

    extjs增删改查分页树

    extjs增删改查分页树

    Extjs 增删改查

    ### Extjs 增删改查操作详解 #### 一、引言 在现代Web开发中,Extjs作为一款强大的JavaScript框架,被广泛应用于构建复杂的前端应用。它提供了丰富的组件库,可以方便地实现诸如表格数据展示、增删改查等常见功能。...

    extJs 简单的增删改查

    在“简单的增删改查”这个主题中,我们将探讨如何使用ExtJS实现数据管理的基本操作,包括添加(Add)、删除(Delete)、修改(Update)和查询(Query)。 首先,我们需要了解ExtJS的核心概念,如组件(Components)...

    php_extjs 增删改查

    "php_extjs 增删改查"这个主题聚焦于如何使用这两种技术来实现一个基本的数据管理应用程序,涵盖了前端用户界面的构建以及后端数据处理。 **PHP** 是一种广泛使用的开源脚本语言,尤其适用于Web开发。它允许开发者...

    ExtJS4+Struts2.1的Grid 增删改查

    本文将深入探讨如何使用这两种技术实现Grid的增删改查功能,帮助新手理解ExtJS4与Struts2.1的交互机制。 首先,我们来看ExtJS4中的Grid组件。Grid是ExtJS中用于展示和管理数据的一种视图,它提供了一种灵活且可定制...

    extjs做的增删改查

    在"extjs做的增删改查"项目中,ExtJS负责前端展示和用户交互,而Struts2则负责后端业务逻辑处理和与数据库的交互。以下是关于这个主题的一些详细知识点: 1. **ExtJS组件**: - 表格(Grid):用于显示和编辑数据...

    ExtJs的增删改查功能

    ExtJs 提供了多种组件用于实现增删改查的交互,如`Ext.form.Panel`用于创建表单,`Ext.grid.Panel`用于显示和编辑表格数据,以及`Ext.toolbar.Toolbar`用于添加操作按钮如“新增”、“编辑”、“删除”。...

    EXTJS net 增删改查示例

    在"EXTJS net 增删改查示例"中,我们将探讨如何使用EXTJS与后端网络接口(通常基于.NET框架)进行数据交互,实现常见的CRUD(Create、Read、Update、Delete)操作。这些基本操作是任何数据库驱动的应用程序的核心...

    Extjs增删改查示例

    在这个"Extjs增删改查示例"中,我们将探讨如何使用ExtJS与etmvc(一个基于ExtJS的MVC模式扩展)和MySQL数据库配合,实现Web应用中的基本数据操作。 首先,ExtJS的MVC模式是其架构的核心部分,它将应用程序分为Model...

    Extjs 实现增删改查

    Extjs 实现增删改查,可以与后台代码结合起来,利于实现

    Extjs实现了增删改查(增加了动态树)上次升级版

    这个"Extjs实现了增删改查(增加了动态树)上次升级版"项目,显然是利用ExtJS的功能来实现了一个完整的数据操作功能,包括添加、删除、修改和查询,同时还集成了一项新的特性——动态树视图。 动态树视图是ExtJS中...

    Extjs增删改查项目

    对爱好extjs初学者来说有非常大的帮助

    基于Struts的Ext增删改查应用范例

    **基于Struts的Ext增删改查应用范例详解** 在Web开发中,Struts框架与ExtJS库的结合常用于构建高效的用户界面和后台数据交互。本应用范例是针对初学者的一个宝贵资源,它提供了清晰的注释和全面的功能,使开发者...

    EXTJS(增删改查).net实现

    在.NET环境中,EXTJS常与ASP.NET MVC框架结合,用于开发具有增删改查(CRUD)功能的Web应用程序。本文将深入探讨如何利用EXTJS和.NET MVC三层架构实现这一目标。 首先,EXTJS提供了丰富的组件库,如表格、表单、树...

    ExtJs增删改查实例,献给初学者(佳家记账)

    这个"ExtJs增删改查实例,献给初学者(佳家记账)"的项目是专门为初学者设计的,旨在帮助他们理解如何使用ExtJS进行基本的数据操作,如添加、删除、修改和查询。在Web开发中,这些功能通常被称为CRUD(Create, Read, ...

    Extjs+ssh 增删改查

    ExtJS + SSH 构建Web应用的增删改查功能详解 在Web开发领域,ExtJS和SSH(Spring、Struts、Hibernate)是两种常见的技术框架。ExtJS是一款强大的JavaScript库,用于构建富客户端的用户界面,而SSH则是一个Java企业...

Global site tag (gtag.js) - Google Analytics