`

Ext+Struct2 纯OO实现相互交互

    博客分类:
  • Ext
阅读更多
折腾了两天 终于弄明白了是这样一回事

js 代码为

/********创建FormPanel*******/
ProductFormPanel = Ext.extend(Ext.form.FormPanel,{
	constructor:function(){
		ProductFormPanel.superclass.constructor.call(this,
			{
				labelWidth:60,
				defaultType:'textfield',
				defaults:{anchor:'90%'},
				baseCls:'x-plain',
				items:[
					{fieldLabel:'名称',name:'p.pname'},
					{fieldLabel:'数量',name:'p.pnum'},
					{
						fieldLabel:'类别',
						hiddenName:'p.ptype',
						xtype:'combo',
						mode:'local',
						displayField:'type',
						readOnly:true,
						triggerAction:'all',
						value:'洗件',
						store:new Ext.data.SimpleStore({
							fields:['type'],
							data:[['洗件'],['固件']]
						})
					},
					{
						fieldLabel:'生产日期',
						xtype:'datefield',
						format:'Y-m-d G:i:s',
						name:'p.pdate'
					},
					{
						fieldLabel:'是否合格',
						hiddenName:'p.pcheck',
						xtype:'combo',
						mode:'local',
						displayField:'check',
						readOnly:true,
						triggerAction:'all',
						value:'合格',
						store:new Ext.data.SimpleStore({
							fields:['check'],
							data:[['合格'],['不合格']]
						})
					}
				]
			})
	},
    submit:function(){},  
	reset:function(){
		this.getForm().reset();
	},
	getValue:function(){
		if(this.getForm().isValid()){
			return new Ext.data.Record(this.getForm().getValues());
		}else{
			throw Error('表单未能通过!');
		}
	},
	setValue:function(_r){
		this.getForm().loadRecord(_r);
	}
});
/*******创建Windows*********/
ProductWindows = Ext.extend(Ext.Window,{
	form: new ProductFormPanel(),
	constructor:function(){
		this.form = new ProductFormPanel();
		 ProductWindows.superclass.constructor.call(this,
			{
				plain:true,
				width:300,
				modal:true,
				items:this.form,
				closeAction:'hide',
				buttons:[
				{
					text:'确定',
					handler:this.onSubmitClick,
					scope:this
				},
				{
					text:'取消',
					handler:this.onCancelClick,
					scope:this
				}]
			}
		 );
		 this.addEvents('submit');
	},
	close:function(){
		this.form.reset();
		this.hide();
	},
	onCancelClick:function(){
		this.close();
	},
	onSubmitClick:function(){
		try{
			 //调用表单提交服务器的方法  触发事件 
			this.fireEvent('submit',this,this.form.getValue());
		}catch(_err){
			return;
		}
	}
});
/*******创建InsertWin*******/
InsertProductWin = Ext.extend(ProductWindows,{
	title:'添加产品'
});
/*******创建UpdateWin*******/
UpdateProductWin = Ext.extend(ProductWindows,{
	load:function(_r){this.form.setValue(_r);},
	title:'修改产品'
});
/*******创建GridPanel*******/
var data = [
	{pname:'GH-2323零件',ptype:'固件',pnum:18,pdate:'2009-7-11 00:00:00',pcheck:'合格'},
	{pname:'8846零件',ptype:'洗件',pnum:20,pdate:'2009-8-20',pcheck:'不合格'}];
var store = new Ext.data.JsonStore({
	data:data,
	url:'data/data.jsp',
	autoLoad:true,
	fields:['pname','ptype','pnum','pdate','pcheck']
});
var cb = new Ext.grid.CheckboxSelectionModel();
var cm = new Ext.grid.ColumnModel([
new Ext.grid.RowNumberer(),
cb,
{dataIndex:'pname',header:'名称',sortable:true},
{dataIndex:'ptype',header:'类别',sortable:true},
{dataIndex:'pnum',header:'数量',sortable:true},
{dataIndex:'pdate',header:'生产日期',sortable:true},
{dataIndex:'pcheck',header:'是否合格',sortable:true}
]);
ProductGridPanel = Ext.extend(Ext.grid.GridPanel,{
	insertwin:new InsertProductWin(),
	updatewin:new UpdateProductWin(),
	constructor:function(){
		ProductGridPanel.superclass.constructor.call(this,{
			cm:cm,
			region:'center',
			height:500,
			width:'auto',
			store:store,
			border:false,
			stripeRows:true,
			sm:cb,
			title:'测试',
			tbar:[
				{
					text:'添加记录',
					handler:function(){this.insertwin.show();},
					scope:this
				},
				'-',
				{
					text:'修改记录',
					handler:function(){
								try{
									this.updatewin.show();
									this.updatewin.load(this.getSelected());
								}catch(_err){
									msg('系统提示', _err.message);
									this.updatewin.hide();
								}
							},
					scope:this
				},
				'-',
				{
					text:'删除记录',
					handler:function(){
						Ext.MessageBox.confirm('系统提示','您确定要删除所选的信息吗!',this.removePerson,this);
					},
					scope:this
				}]
		}),
		this.insertwin.on('submit',this.onInsertWinSubmit,this);
		this.updatewin.on('submit',this.onUpdateWinSubmit,this);
		this.addEvents('rowselect');
	},
	getSelecteds:function(){
		var _sm = this.getSelectionModel();
//		var a = _sm.getSelections();
//		for (var index = 0; index < a.length; index++) {
//			alert(Ext.util.JSON.encode(a[index].data)+index);
//		}
		return _sm.getSelections();
	},
	getSelected:function(){
			var _sm = this.getSelectionModel();
			var a = _sm.getSelected();
			if(_sm.getCount()==0)
			{
				throw Error('请选择一条记录!');
			}else if(_sm.getCount()>1){
				throw Error('只能选择一条记录!');
			}
			return _sm.getSelected();
	},
	onRowSelect:function(_sel,_index,_r){
			this.fireEvent('rowselect',_r);
	},
	removePerson:function(btn){
			if(btn=='yes'){
				this.remove();
			}
	},
	remove:function(){
		var a = this.getSelecteds();
								for(var i = 0;i<a.length;i++){
									this.getStore().remove(a[i]);	
								}
	},
	insert:function(_r){
		/*创建MyRecord 该记录集不能new 只能实现create方法是Store的一条记录 mapping 只是创建了一个模板可以省略*/
		var MyRecord = Ext.data.Record.create([
    		{name: 'pname', mapping: 'pname'},
    		{name: 'ptype', mapping: 'ptype'},
    		{name: 'pnum', mapping: 'pnum'},
    		{name: 'pdate', mapping: 'pdate'},
    		{name: 'pcheck', mapping: 'pcheck'}
		]);
		/*给记录集MyRecord创建一条真实记录 是Store的一记录*/
		var newrecord = new MyRecord({
   			 pname: _r.get('p.pname'),
    		 ptype: _r.get('p.ptype'),
             pnum: _r.get('p.pnum'),
             pdate: _r.get('p.pdate'),
             pcheck: _r.get('p.pcheck')
     	});
     	//向store里添加一条记录
		this.getStore().add(newrecord);
	},
	update:function(_r){
			var st = this.getSelected();
			var data = st.data;
			for(var i in data){
				st.set(i,_r.get(i));
			}
			sr.commit();
	},
	onUpdateWinSubmit:function(_win,_r){
			
			this.update(_r);
	},
	onInsertWinSubmit:function(_win,_r){
		var me = this;
		_win.form.getForm().submit({  
            url:'Productaction_saveUser.action',
            method:'POST',
            success:function(form,action){
             	me.insert(_r);
				_win.form.getForm().reset();
				Ext.MessageBox.confirm('系统提示','添加成功,是否继续!',function(btn){
					if(btn=='no'){
						_win.hide();
					}
				},this);
              },
              failure:function(form,action){msg('系统提示','添加失败请重试!');}
            });  
    }
});


Ext.onReady(function(){
	var grid = new ProductGridPanel();
	var view = new Ext.Viewport({
		renderTo:Ext.getBody(),
		items:[grid]
	});
});

java代码为
package com.ysu.action;

import com.ysu.core.BaseAction;
import com.ysu.entity.ProductEntity;

public class ProductAction extends BaseAction {
	private ProductEntity p;


	public ProductEntity getP() {
		return p;
	}

	public void setP(ProductEntity p) {
		this.p = p;
	}

	public String saveUser() {
//		userId = (Integer) userService.saveUser(user);
//		if (userId != null) {
//			success = true;
//		}
		System.out.println("sssss"+super.getRequest().getParameter("p.pname")+"sssssssss");
//		System.out.println("sssss"+pname+"sssssssss");
		System.out.println("sssss-"+p.getPtype()+"---"+p.getPname()+p.getPdate()+p.getPnum()+p.getPcheck()+"-sssssssss");
		System.out.println("这一行输出s-"+p.getPname()+p+"-");
		super.outJsonString("{success:true,msg:'成功加载'}"); 
		return null;
	}
}

structs xml 配置
<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE struts PUBLIC
    "-//Apache Software Foundation//DTD Struts Configuration 2.0//EN"
    "http://struts.apache.org/dtds/struts-2.0.dtd">
<struts>
	<package name="back" extends="struts-default" namespace="/">
		<global-results>
			<result name="done">result.jsp</result>
		</global-results>
		<action name="*action_*" class="com.ysu.action.{1}Action" method="{2}"></action>
	</package>

</struts>

javabean代码为
package com.ysu.entity;
import java.io.Serializable;
public class ProductEntity implements Serializable {
	private String pname;
	private String pnum;
	private String pcheck;
	private String pdate;
	private String ptype;
	//省略 get和 set 方法
}

data.jsp的数据为
<%@ page language="java" import="java.util.*" pageEncoding="UTF-8"%>
[
{pname:'GH-2323零件',ptype:'固件',pnum:18,pdate:'2009-7-11 00:00:00',pcheck:'合格'},
{pname:'8846零件',ptype:'洗件',pnum:20,pdate:'2009-8-20',pcheck:'不合格'}
]

分享到:
评论

相关推荐

    Ext+struts+ibatis 完整项目

    【标题】"Ext+struts+ibatis 完整项目" 涉及的技术栈是Web开发中的经典组合,主要用于构建高效、可扩展的企业级应用。这个项目虽然规模不大,但包含了实现一个完整Web应用程序所需的关键组件和流程,是学习和理解这...

    ext+struts2的学生信息管理系统

    总结来说,EXT+STRUTS2结合了前端的强大交互性和后端的稳定处理能力,为构建学生信息管理系统提供了高效且灵活的解决方案。理解并掌握这种技术栈,对于提升企业级应用的开发效率和用户体验具有重要意义。

    ext+struts2

    总的来说,"EXT+Struts2"的组合为开发高效、安全的Web应用提供了强大支持,特别是涉及到复杂的前端交互和后端业务处理时。通过深入理解这两个技术的结合,开发者可以构建出更加健壮的应用系统。

    Ext+struts学生管理系统

    【标题】"Ext+struts学生管理系统"是一个基于前端Ext框架和后端Struts框架的教育信息化管理系统。这个系统主要用于管理学生信息,实现数据的增删改查等基本功能,同时也可能包括成绩管理、课程安排等多种实用功能。...

    Ext+Struts2的学生成绩管理系统

    总之,"Ext+Struts2的学生成绩管理系统"是两种技术的完美结合,既实现了富客户端的交互体验,又保证了后端的稳定和高效。对于学习者来说,这个项目不仅提供了实践平台,也是深入理解这两种技术的绝佳案例。

    Ext+struts2+spring+hibernate做的一个CRUD实例

    用EXT+struts2+spring+hibernate做的一个增删改查实例,主要用到了EXTjs里面的部分组件,用JSON与服务端交互,实现一个增删改查的功能!本地MYsql数据库,sql文件在根目录下面,建好库既可以运行!当然,还是需要在...

    ext+struts2整合实现登陆

    将EXT和Struts2整合,可以实现前后端分离的开发模式,使得页面展示更加动态,用户体验更佳。下面我们将详细讨论整合过程中的关键知识点: 1. **EXTJS页面构建**: - 创建EXTJS的HTML页面,引入EXTJS库及相关CSS...

    GWT+EXT+STRUTS2+Eclipse完整范例.rar

    标题 "GWT+EXT+STRUTS2+Eclipse完整范例.rar" 提示我们这是一个包含一个集成开发环境Eclipse的项目,该项目集成了Google Web Toolkit (GWT), EXT JS 和Struts2框架。描述 "整合 GWT EXT STRUTS2 Eclipse 范例" 明确...

    一个基于Ext+Struts2+spring实现的级联分页示例程序源码例子

    "一个基于Ext+Struts2+Spring实现的级联分页示例程序源码例子"是一个很好的学习资源,它揭示了如何利用这三大框架来构建高效、灵活的Web应用。下面将详细解析这个项目的知识点。 首先,Ext是一个强大的JavaScript库...

    EXT+STRUTS2 经典例子

    在这个“EXT+STRUTS2 经典例子”中,我们将探讨如何将两者结合,通过 JSON 方式进行通信,实现高效的数据交互。 首先,EXT(Ext JS)是一个强大的客户端 JavaScript 库,它提供了大量的 UI 组件,如表格、面板、...

    ext+struts+spring小例子

    这个“ext+struts+spring小例子”是一个整合这三个技术的示例项目,用于实现一个图书管理应用。下面将详细阐述这三个框架的核心概念及其在项目中的作用。 EXT JS 是一个强大的JavaScript库,主要用于构建富客户端...

    Ext+struts2项目

    在这个"Ext+struts2项目"中,我们可以看到这两个技术的集成应用。 首先,Struts2是Apache软件基金会的一个开源MVC框架,它基于Model-View-Controller(模型-视图-控制器)架构模式,为Java EE平台提供了强大的控制...

    一个ext+spring+hibernate+struts2做的系统

    标题中的“一个ext+spring+hibernate+struts2做的系统”指的是一个基于四大开源框架构建的企业级Java Web应用程序。这些框架分别是EXT JS(一个用于构建富客户端界面的JavaScript库)、Spring(一个全面的Java企业...

    ext+struts2的集成实例

    本实例主要关注"ext+struts2"的集成,这是一种常见的Java Web开发组合,其中ext是一个强大的JavaScript库,用于构建富客户端应用,而Struts2是基于MVC设计模式的Java Web框架,负责后端业务逻辑处理和页面展示的组织...

    ext+struts1.2图书管理系统

    解压后,开发者可以研究其目录结构,理解 EXT 和 Struts1.2 如何协同工作,查看具体的 Action 类如何处理请求,以及 JSP 页面如何与 EXT 组件交互。此外,还可以学习到如何配置 Struts 的配置文件(struts-config.xml...

    Ext + struts2 + mysql

    一个Ext3 + struts2 + mysql的程序,主要功能是做了一个员工考勤系统,程序采用ext + action + dao的分层结构。代码大概有3000行,功能包括基本的增删改查、头像上传、分页、拦截器等功能,还用ext做了部分前台,有...

    ext + struts2 例子

    4. 文件上传:EXT也提供了文件上传组件,通常与后端服务(如Struts2的FileUpload拦截器)配合使用,实现用户友好的文件上传功能。在EXT中,可以自定义上传按钮样式,同时处理上传进度和错误反馈。 5. Struts2:...

    EXT+Struts1+spring2+hibernate3学籍管理系统

    EXT+Struts1+Spring2+Hibernate3学籍管理系统是一个基于Java技术的Web应用程序,用于管理教育机构的学籍信息。这个系统的核心是利用一系列成熟的框架和技术,为数据存储、业务逻辑处理和用户界面交互提供了高效且...

    Ext+Struts1.2整合

    在IT行业中,"Ext+Struts1.2整合"是一个常见的Web开发技术组合,涉及到两个主要的开源框架:ExtJS(一个JavaScript库)和Struts1.2(一个Java服务器端MVC框架)。这两个框架的整合是为了解决前端用户界面的丰富性和...

    ext+struts2+spring+hibernate 树型菜单

    "ext+Struts2+Spring+Hibernate 树型菜单"是一个典型的Java Web开发框架组合,用于创建具有树状结构的用户界面,通常用于数据的层级展示,比如部门结构、文件目录等。下面将详细解释这些技术和如何协同工作。 **...

Global site tag (gtag.js) - Google Analytics