- 浏览: 640939 次
- 性别:
- 来自: 合肥
文章分类
最新评论
-
nehaoww:
754588141@qq.com,源码可以给一份吗
Struts/JSP可上传、预览服务器端文件(图片、文件、Flash、多媒体)文件组件 -
zzd_md:
把XmlTreeLoader.js 这个文件的路径改一下就好了 ...
ExtJs 实现的后台管理框架 -
llixinrui_strive:
EXT之form.load(转) -
liangzhang0929:
部门管理和用户管理的url怎么显示#,没法打开dept_lis ...
Extjs3.x Struts2 -Json-plugin学习实例 -首页框架代码 05 -
datouren:
您好想问你一下 为什么只显示根节点 其它节点不显示 目前是在一 ...
ExtJs加载本地txt格式的数据
user_list.jsp
<%@ page language="java" import="java.util.*" pageEncoding="gbk"%> <% String path = request.getContextPath(); String basePath = request.getScheme()+"://"+request.getServerName()+":"+request.getServerPort()+path+"/"; %> <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"> <html> <head> <base href="<%=basePath%>"> <title>用户管理</title> <meta http-equiv="pragma" content="no-cache"> <meta http-equiv="cache-control" content="no-cache"> <meta http-equiv="expires" content="0"> <meta http-equiv="keywords" content="keyword1,keyword2,keyword3"> <meta http-equiv="description" content="This is my page"> <link rel="stylesheet" type="text/css" href="extjs/resources/css/ext-all.css"> <script type="text/javascript" src="extjs/ext-base.js"></script> <script type="text/javascript" src="extjs/ext-all.js"></script> <script type="text/javascript" src="extjs/ext-lang-zh_CN.js"></script> <script type="text/javascript" src="extjs/radiogroup.js"></script> <link rel="stylesheet" type="text/css" href="extjs/examples.css" /> <script type="text/javascript" src="extjs/examples.js"></script> <script type="text/javascript" src="user.js"></script> <script type="text/javascript"> </script> </head> <body> <div id="dept"></div> <div id="topic-win" class="x-hidden"> </body> </html>
user.js
var _reader = new Ext.data.JsonReader({ root:"users" },[ {name:"id",type:"int",mapping:"id"}, {name:"name",type:"string",mapping:"name"}, {name:"username",type:"string",mapping:"username"}, {name:"password",type:"string",mapping:"password"}, {name:"sex",type:"boolean",mapping:"sex"}, {name:"phone",type:"string",mapping:"phone"}, {name:"tel",type:"string",mapping:"tel"}, {name:"url",type:"string",mapping:"url"}, {name:"email",type:"string",mapping:"email"}, {name:"deptId",type:"int",mapping:"dept.id"}, {name:"deptName",type:"string",mapping:"dept.name"}, {name:"address",type:"string",mapping:"address"}, {name:"description",type:"string",mapping:"description"} ]); var user_store = new Ext.data.Store({ baseParams:{ start:0, limit:20 }, sortInfo:{ field:"id", dirction:"asc" }, //autoLoad:true, remoteSort:true, proxy:new Ext.data.HttpProxy({ url:"user.action", method:"POST" }), reader:_reader }); var _sm = new Ext.grid.CheckboxSelectionModel(); var user_cm = new Ext.grid.ColumnModel([ new Ext.grid.RowNumberer(), _sm, {header:"ID",width:40,dataIndex:"id",sortable:true,algin:"center"}, {header:"用户名",width:60,dataIndex:"username",sortable:true}, {header:"姓名",width:60,dataIndex:"name",sortable:true}, {header:"性别",width:40,dataIndex:"sex",sortable:true,align:"center", renderer:function(_value){ if(_value){ return '男'; } else { return '女'; } } }, {header:"部门",width:70,dataIndex:"deptName",sortable:true}, {header:"联系电话",width:90,dataIndex:"phone",sortable:true}, {header:"移动电话",width:90,dataIndex:"tel",sortable:true}, {header:"电子邮件",width:110,dataIndex:"email",sortable:true, renderer:function(_value){ return '<a href="mailto:' + _value + '" ext:qtip="' + _value + '">' + Ext.util.Format.ellipsis(_value, 15) + '</a>'; } }, {header:"联系地址",width:120,dataIndex:"address",sortable:true, renderer:function(_value){ return '<span ext:qtip="' + _value + '">' + Ext.util.Format.ellipsis(_value, 12) + '</span>'; } }, {header:"描述",dataIndex:"description",id:"description"} ]); var addOrModify = function(_url, _id){ var deptCombo_store = new Ext.data.Store({ reader:new Ext.data.JsonReader({ root:'depts' }, Ext.data.Record.create([ {name:'id',type:'int',mapping:'id'}, {name:'name',type:'string',mapping:'name'} ])), proxy:new Ext.data.HttpProxy({ url:'dept', method:'POST' }), //autoLoad:true, listeners:{ 'load':function(){ /* if(_id){ var comb = Ext.getCmp('deptCombo'); var _rec = user_grid.getSelectionModel().getSelected(); if(comb){ comb.setValue(_rec.get('deptId')); } } */ } } }); new Ext.Window({ id:'addOrModifyWin', title:'用户信息', width:380, autoHeight:true, //height:250, resizable:false, modal:true, animateTarget:'addUser', closeAction:'close', listeners:{ 'show':function(){ btn_add.disable(); btn_modify.disable(); }, 'close':function(){ btn_add.enable(); btn_modify.enable(); } }, items:[{ xtype:'form', id:'addOrModifyForm', layout:'form', labelWidth:70, labelAlign:'right', labelPad:10, frame:true, border:false, waitMsgTarget:true, bodyStyle:"padding:5px 5px 0", defaultType:'textfield', defaults:{ width:230, msgTarget:'side'//验证信息显示在右边 }, items:[{ xtype:'hidden', name:'user.id', value:0 },{ fieldLabel:'用户名', name:'user.username', allowBlank:false, emptyText:'请输入用户名', },{ inputType:'password', fieldLabel:'用户密码', name:'user.password', allowBlank:false },{ fieldLabel:'姓名', name:'user.name', allowBlank:false, blankText:'姓名不能为空' },{ xtype:'ux-radiogroup', fieldLabel:'性别', id:'sex', name:'user.sex', horizontal:true, radios:[{ name:'sex', boxLabel:'男 ', value:true, checked:true },{ name:'sex', boxLabel:'女', value:false }] },{ xtype:'panel', layout:'column', width:380, items:[{ columnWidth:.76, layout:'form', labelWidth:70, labelAlign:'right', labelPad:10, items:[{ xtype:'combo', id:'deptCombo', fieldLabel:'所属部门', maxHeight:110, anchor: '99%', allowBlank:false, blankText:'必须选择部门', editable:false,//禁止编辑 hideTrigger:false,//隐藏后面的那个下拉图片按钮,这在只读模式下浏览数据有用 loadingText:'正在加载信息……',//加载信息时显示的提示信息 emptyText:'请选择部门', typeAhead:true,//在输入时,是否把第一个匹配项自动选择到文本框中 forceSelection:true,//必须选择一项(强制) hiddenField:'deptId',//隐藏必须的id hiddenName:'dept.id',//hiddenName才是提交至后台的input的name //name只是下拉列表的名称 triggerAction: "all",//单击触发按钮显示全部数据(不根据输入框中的数据进行过滤) store:deptCombo_store, mode:'remote',//remote数据从远程获取;local为本地数据 displayField: 'name',//要显示的字段 valueField: "id"//实际值字段 }] },{ columnWidth:.24, layout:'form', items:[{ xtype:'button', //text:'刷新', iconCls:'icon-btn-refresh', tooltip:'重新获取部门列表', handler:function(){ deptCombo_store.reload(); } }] }] },{ fieldLabel:'联系电话', name:'user.phone', allowBlank:false, emptyText:'请输入联系电话', regex:/^\d{3,4}-?\d{7,9}$/, regexText:'请正确填写您的电话号码,格式如:<br/>010-123456' },{ fieldLabel:'移动电话', name:'user.tel', regex:/^(((1[3-9]{1}[0-9]{1})|(15[0-9]{1}))+\d{8})$/, regexText:'请输入有效的手机号' },{ fieldLabel:'电子邮件', name:'user.email', vtype:'email' },{ fieldLabel:'个人博客', name:'user.url', vtype:'url' },{ xtype:'textarea', fieldLabel:'联系地址', height:40, name:'user.address' },{ xtype:'textarea', fieldLabel:'备注', height:40, name:'user.description' }] }], buttonAlign:'center', minButtonWidth:60, buttons:[{ text:'提交', tooltip:'提交数据', handler:function(){ var _userForm = Ext.getCmp('addOrModifyForm').getForm(); if(_userForm.isValid()){ _userForm.submit({ url:_url, method:'POST', waitTitle:'请稍候', waitMsg:'正在提交数据,请稍候……', success:function(form,action){ Ext.example.msg('提示','数据提交成功……','msg-box-success'); Ext.getCmp('addOrModifyWin').close(); user_grid.getStore().reload(); }, failure:function(form,action){ Ext.example.msg('警告',"原因:" + action.result.msg,'msg-box-error'); } }); } else { Ext.example.msg('警告','数据验证失败,请核对……','msg-box-error'); } } },{ text:'重置', tooltip:'重置表单数据', handler:function(){ Ext.getCmp('addOrModifyForm').getForm().reset(); } },{ text:'取消', handler:function(){ Ext.getCmp('addOrModifyWin').close(); //this.ownerCt.ownerCt.close(); } }] }).show(); if(_id){ var _userForm = Ext.getCmp('addOrModifyForm').getForm(); _userForm.reader = new Ext.data.JsonReader({ root:"user" },[ {name:"user.id",type:"int",mapping:"id"}, {name:"user.name",type:"string",mapping:"name"}, {name:"user.username",type:"string",mapping:"username"}, {name:"user.password",type:"string",mapping:"password"}, {name:"user.sex",type:"boolean",mapping:"sex"}, {name:"user.phone",type:"string",mapping:"phone"}, {name:"user.tel",type:"string",mapping:"tel"}, {name:"user.url",type:"string",mapping:"url"}, {name:"user.email",type:"string",mapping:"email"}, {name:"dept.id",type:"int",mapping:"dept.id"}, //{name:"deptName",type:"string",mapping:"dept.name"}, {name:"user.address",type:"string",mapping:"address"}, {name:"user.description",type:"string",mapping:"description"} ]); _userForm.load({ url:'user!findUserById', waitMsg:'正在截入数据……', params:{'user.id':_id}, success:function(form, action){ Ext.example.msg('提示','数据加载成功……','msg-box-success'); }, failure:function(form,action){ Ext.example.msg("警告","数据加载失败,请核对……","msg-box-error"); Ext.getCmp('addOrModifyWin').close(); } }); } } var btn_add = new Ext.Button({ text:"添加", tooltip:"添加一个新的用户记录", id:"addUser", iconCls:'icon-btn-add', handler:function(){ Ext.example.msg("提示","你点击了添加用户按钮",""); new addOrModify('user!add'); } }); var btn_modify = new Ext.Button({ text:"编辑", tooltip:"编辑用户信息", iconCls:'icon-btn-edit', handler:function(){ var _selectModel = user_grid.getSelectionModel(); if(_selectModel.hasSelection()){ var _rec = _selectModel.getSelected(); new addOrModify('user!modify',_rec.get('id')); } else { Ext.example.msg("警告","编辑前请选择一条记录……","msg-box-error"); } } }); var btn_delete = new Ext.Button({ text:"删除", tooltip:"删除选择的用户记录", iconCls:'icon-btn-delete', handler:function(){ var _selectModel = user_grid.getSelectionModel(); if(_selectModel.hasSelection()){ //var _rec = _selectModel.getSelected(); Ext.Msg.confirm('确认删除','你确定删除所有选择用户的记录吗?',function(_btn){ if(_btn == 'yes'){ var ids = []; var _recs = _selectModel.getSelections(); for(var i = 0; i < _recs.length; i++){ ids[i] = _recs[i].get('id'); } //alert(ids.join(',')); Ext.Ajax.request({ waitMsg:'正在删除数据,请稍候……', url:'user!delete', params:{ids:ids.join(',')}, success:function(action){ Ext.example.msg('提示','数据删除成功……','msg-box-success'); user_grid.getStore().reload(); }, failure:function(action){ Ext.example.msg('提示','数据删除失败,请核对 ……','msg-box-error'); } }); } }); //new addOrModify('user!modify',_rec.get('id')); } else { Ext.example.msg("警告","编辑前请选择一条记录……","msg-box-error"); } } }); var user_grid = new Ext.grid.GridPanel({ id:'userGridPanel', loadMask:{msg:'数据正在加载中,请稍候……'}, region:'center', columnLines:true, cm:user_cm, sm:_sm, trackMouseOver:true, frame:true, autoExpandColumn:"description", tbar:[btn_add,"-",btn_modify,"-",btn_delete], store:user_store, bbar: new Ext.PagingToolbar({ store:user_store, pageSize:20, displayInfo:true, displayMsg:"第 {0} - {1} 条 共 {2} 条", emptyMsg:"没有记录" }) }); Ext.onReady(function(){ Ext.BLANK_IMAGE_URL = "extjs/resources/images/default/s.gif"; Ext.QuickTips.init(); var viewPort = new Ext.Viewport({ layout : 'fit', items : [user_grid] }); user_store.load(); });
评论
12 楼
烟花易冷
2010-12-16
非常感谢楼主,看了你的文章对我帮助很大,谢谢您!
11 楼
wjt276
2010-10-29
看来自己的小东西,以后还是放在家中的被窝中比较好,哈哈哈
10 楼
zhoudan241
2010-10-29
人家说了只是针对入门学习~! 你们为什么还要说楼主咧~! 对你没用,对刚入门的人还是有学习的呀~!
9 楼
kakamimika
2010-10-28
还是jQuery够简洁 ext ui确实很炫
8 楼
depravedangel
2010-10-28
我以前实现过一个ExtJs的CRUD组件,虽然版本比较老,但或许对您会有一些参考意义http://depravedangel.iteye.com/blog/336707
7 楼
elan1986
2010-10-28
站着说话不腰疼
自己做的时候 又是另外一回事了!
谢了 楼主
自己做的时候 又是另外一回事了!
谢了 楼主
6 楼
Leon.Wood
2010-10-28
整合?谈不上整合吧 何况也没看到啥java代码
5 楼
wjt276
2010-10-28
fhx007 写道
没看出有什么不同的,也没什么高明之处
当然没有什么不同,也没有什么新的,因为这是我的学习实例呀,我只是做个笔记,这样我可以把所有的笔记在后台做成PDF后下载。多好呀。哈哈
4 楼
gouflv
2010-10-28
好长..应该写成组件
要是复杂的项目还这么写,单文件能上千行
要是复杂的项目还这么写,单文件能上千行
3 楼
fhx007
2010-10-28
没看出有什么不同的,也没什么高明之处
2 楼
extdev
2010-10-28
题目写的是EXT,不是STRUTS,没见到STRUTS的身影。
看到EXT那长长的JS,晕倒
看到EXT那长长的JS,晕倒
1 楼
nj_first
2010-10-28
这个有点创意啊
发表评论
-
Ext.FormPanel 提交和 Ext.Ajax.request 异步提交函数的区别 - 转
2010-11-09 11:49 1989(1)Ext.FormPanel f.getForm() ... -
Ext formpanel submit 提交与ext.ajax.request提交的区别 - 转
2010-11-09 11:47 6252前置: 后台成功返回字符串:{success:tru ... -
Extjs textfield文件对齐方式
2010-11-07 14:11 8717ExtJs中的textfield文本对齐方式,没有直接的配置, ... -
ExtJS中数据源中的日期格式不组件接受的日期格式不一致时??
2010-11-06 13:14 4424在用ExtJS + struts2-json开发过程上发现日期 ... -
Extjs3.x Struts2 -Json-plugin学习实例 -Dept管理页面 06
2010-10-26 12:28 2043dept_list.jsp <%@ pag ... -
Extjs3.x Struts2 -Json-plugin学习实例 -首页框架代码 05
2010-10-26 12:26 2433代码我就不多说了,不明白,看教程吧。我就贴出来好了。 ... -
Extjs3.x Struts2 -Json-plugin学习实例 -struts.xml配置 04
2010-10-26 12:21 2175struts.xml实际上也非常的简单,代码如下: 但 ... -
Extjs3.x Struts2 -Json-plugin学习实例 -后台数据处理 03
2010-10-26 12:15 2384因为这是只学习项目,所以我没有使用数据库了,直接在Action ... -
Extjs3.x Struts2 -Json-plugin学习实例 01
2010-10-26 12:02 2242我写下这个一是为了自己学习的整理,另一是为了其它入门的网友 ... -
Extjs3.x Struts2 -Json-plugin学习实例-搭建开发环境 02
2010-10-26 12:00 1980这里的项目开发环境与其它普通的开发环境一样,只是配置Strut ...
相关推荐
本Demo采用Struts2.1.8+Spring2.5.6(Annotation注解)+Hiberante3.3.2(Annotation注解)+ExtJS(Struts2-json)
struts2-extjs4.rar extjs4通过json和struts2进行交互的demo
Extjs3.x入门学习指南,还附带一些常用控件属性的详细描述和使用说明
将struts-2.1.6\lib目录下的struts2-codebehind-plugin-2.1.6.jar、struts2-core-2.1.6.jar、struts2-spring-plugin-2.1.6.jar、xwork-2.1.2.jar、ognl-2.6.11.jar、freemarker-2.3.13.jar、commons-fileupload-...
在我的随笔Extjs Tree + JSON + Struts2中我介绍了如何异步加载一个Extjs的树,但是很多网友留言说不能成功操作。现在我自己做了一个所有源代码的包,供大家下载。 有几点事项请大家注意 1、blogjava的文件上载要求...
struts2 学习参考文档,spring 结合学习参考文档,希望对大家都有帮助
使用ExtJs获取后台json格式的数据必须的七个jar包,commons-beanuti-1s-1.7.0.jar,commons-collections-3.1.jar,commons-lang-2.5.jar,commons-logging-1.0.4.jar,ezmorph-1.0.4.jar,json-lib-2.1.jar,...
本系统所用框架 struts2 spring ibatis extjs 数据库采用sqlserver 实现图书基本管理功能,对学习这些框架的人来说是难得的资源,包占空间大大我没放进来,我把包的名称都写下来了,系统没有问题,配置跑不通自己好好...
ExtJS4+Accordion+SERVLET/STRUTS2+JSON+Ext.tree.Panel实例
帮大家整理整理一下 extjs3.x 官方大量示例 以及chm版api
ExtJS+struts2+json登陆实例--源码,适合初学者
ExtJS3.x 中文帮助文档,是 CHM 格式的,方便阅读和查询。本人正在使用,效果不错,共享出来,方便大家。
一个运用Extjs,Struts2, json,iterator技术构建的iterator_jsonDemo2。iterator_jsonDemo1的链接:http://download.csdn.net/detail/cafebar123/8816409 运用了Extjs,Struts2, json,iterator技术, 将数据从...
struts2 json extjs 完整实例 struts2 json extjs 完整实例 完整可用 无错! struts2 json extjs 完整实例 struts2 json extjs 完整实例 完整可用 无错! struts2 json extjs 完整实例 struts2 json extjs 完整...
ExtJs + Struts2 + JSON 程序总结
Nexus是一个强大的Maven仓库管理器,它极大地简化了自己内部仓库的维护和外部仓库的访问。利用Nexus你可以只在一个地方就能够完全控制访问 和部署在你所维护仓库中的每个Artifact。Nexus是一套“开箱即用”的系统不...
ExtJS2.X 版本app 这个版本目前找不到了噢
Struts2(json-plugin) + Spring2 + ExtJS2.2 开源网络硬盘系统
Nexus是一个强大的Maven仓库管理器,它极大地简化了自己内部仓库的维护和外部仓库的访问。利用Nexus你可以只在一个地方就能够完全控制访问 和部署在你所维护仓库中的每个Artifact。Nexus是一套“开箱即用”的系统不...
详细的介绍了EXT2.X各种对象的属性、方法、事件