`
hxyt20
  • 浏览: 93176 次
  • 性别: Icon_minigender_2
  • 来自: 湖南
社区版块
存档分类
最新评论

ext2.0学习笔记2

EXTjsonDAOCSSJavaScript 
阅读更多

                                                    用ext2.0实现一个用户的增,删,改,查

1.在上一节中我们介绍了一些ext的基本用法，现在我们用ext来实现对一个用户的增删改查操作

 

   可参考的代码如下：

   jsp代码如下： 

<%@ page language="java" contentType="text/html; charset=UTF-8" import="java.util.*" pageEncoding="UTF-8"%>
<%
	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>My JSP 'userList.jsp' starting page</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/js/ext-base.js"></script>
		<script type="text/javascript" src="extJS/js/ext-all.js"></script>
		<link rel="stylesheet" type="text/css" href="extJS/resources/css/xtheme-purple.css">
		
	</head>
	<body>
		<div id="win">
			<div id="userGrid" style="height: 300px;"></div>
		</div>
		<div id="formWin">
			<div id="form" align="center"></div>
		</div>
		<script type="text/javascript">
		//用户列表
		var renderSex=function(value){
		  if(value=='1'){
		    return "男";
		  }else if(value=='2'){
		    return "女";
		  }else{
		    return "保密";
		  }
		};
		
       //构造列表节面的Grid
       var sm = new Ext.grid.CheckboxSelectionModel();
       var cm = new Ext.grid.ColumnModel([
       sm,
       new Ext.grid.RowNumberer(),
       {header:'编号', dataIndex:'id', sortable:true},
       {header:'姓名', dataIndex:'name'},
       {header:'年龄', dataIndex:'age'},
       {header:'性别', dataIndex:'sex', renderer:renderSex},
       {header:'描述', dataIndex:'descn'}
      ]
      );
       
       var ds = new Ext.data.Store({
        proxy:new Ext.data.HttpProxy({url:'userAction!list.action'}),
        reader:new Ext.data.JsonReader({
          totalProperty:'totalProperty',
          root:'root',
          fields:[
          {name:'id', mapping:'id', type:'string'},
          {name:'name', mapping:'name', type:'string'},
          {name:'age', mapping:'age', type:'int'},
          {name:'sex', mapping:'sex', type:'string'},
          {name:'descn', mapping:'descn', type:'string'}
        ]
        })
      });

      var grid=new Ext.grid.GridPanel({
        el:'userGrid',
        store:ds,
        cm:cm,
        sm:sm,
        bbar:new Ext.PagingToolbar({
          pageSize:10,
          store:ds,
          displayInfo:true,
          displayMsg:"显示第{0}条记录到第{1}条记录，共显示{2}条记录",
          emptyMsg:"没有记录"
        })
      });
      
       grid.render();
       ds.load({params:{start:0,limit:10}});
       
       //用户新增
       function save(){
          var form = createForm();
          var formWin = createFormWin("用户新增", "新增", "userAction!add.action", form);
          formWin.show();
  }
  
  //构造下拉列表
  function createCombo(){
    var sexData=[[1, '男'],[2, '女'], [3, '保密']];
      
          var sexDs = new Ext.data.Store({
              proxy: new Ext.data.MemoryProxy(sexData),
              reader: new Ext.data.ArrayReader({}, [
                      {name: 'id' },
                       {name: 'sex'}
                    ])
		        });
		        
          sexDs.load();
		        
          var sexCmb = new Ext.form.ComboBox({
		        	emptyText:'请选择性别',
					fieldLabel:'性别',
					store:sexDs,
					hiddenName:'user.sex',
					triggerAction:'all',
					displayField:'sex',
					mode:'local',
					editable:false,
		 			allowBlank:false,
					valueField:'id',
					width:210
		 });
	 return sexCmb;     
  }
  
  //构造表单
  function createForm(){
       var sexCmb = createCombo();
       var form = new Ext.form.FormPanel({
            labelAlign:'center',
            labelWidth:50,
            title:'Form',
        	frame:true,
        	width:220,
        	closeAction:'hide',
        	shadow:true,
        	items:[{xtype:'hidden', name:'user.id'},{fieldLabel:'姓名', name:'user.name',xtype:'textfield'},
               	{fieldLabel:'年龄', name:'user.age',xtype:'textfield'},
                 sexCmb,
                 {fieldLabel:'描述', name:'user.descn',xtype:'textarea'}
               	]
      	});
      return form;  
  }
  
  //构造表单窗体
  function createFormWin(title, btnText, url, form){
  	    var fwDiv = Ext.get('formWin');  
    	var formWid = new Ext.Window({
        	el:fwDiv,
        	layout:'fit',
        	title:title,
        	width:500,
        	height:300,
        	items:[form],
        	buttons:[{text:btnText, handler:function(){
          	form.getForm().submit({
            	url:url,
            	method:"POST",
            	success:function(form, action){
              	formWid.close();
              	ds.reload();
            	},
            	failure:function(form, action){
              	Ext.Msg.alert("错误",action.result.errorMsg);
            	}
          	});
        	}}]
   	    });
   	    return formWid;    
  }
  
  //判读是否选择一条记录
  function checkSingleSelect(){
    if(grid.selModel.hasSelection()){
      var records = grid.selModel.getSelections();
      var recordsLen = records.length;
      if(recordsLen>1){
        Ext.Msg.alert("提示", "只能选择一条记录");
        return false;
      }else{
        return true;
      }
    }else{
      Ext.Msg.alert("提示", "请先选择一条记录");
      return false;
    }
    
  }
  
  function load(){
  
  }
  
  //用户修改
  function edit(){
    if(checkSingleSelect()){
      var form = createForm();
      var records = grid.getSelectionModel().getSelected();
      var formWin = createFormWin("用户更新", "修改","userAction!edit.action", form);
      formWin.show();
      form.getForm().setValues({
        'user.id':records.get("id"),
        'user.name':records.get("name"),
        'user.age':records.get("age"),
        'user.sex':records.get("sex"),
        'user.descn':records.get("descn")
      });
    }
    
  }
  
  //用户删除
  function remove(){
   if(checkSingleSelect()){
      var result = Ext.MessageBox.confirm("提示", "你是否确定删除该记录?", function(btn){
      		if(btn=='yes'){
        		var records = grid.getSelectionModel().getSelected();
        		var myCon = new Ext.data.Connection();
        	
        		myCon.request({
          			url:'userAction!delete.action',
          			params:{'deleteIds':records.get("id")},
          			method:'POST',
          			success:function(r, o){
          	    		var a =Ext.decode(r.responseText);
          	    		if(a.success){
          	      		ds.reload();
          	    		}else{
          	      		Ext.Msg.alert("错误",a.errorMsg);
          	    		}
              	
            		},
            		failure:function(o, r){
              			Ext.Msg.alert("错误","删除失败！");
            		}
        		});
      		}   
      }, grid);
         
    }
  }
  
  //构造工具栏
  var toolBar = new Ext.Toolbar({
    buttons:[{text:'新增用户', 
              handler:save
              }, 
             {text:'修改用户',
              handler:edit
             }, 
             {text:'删除用户',
              handler:remove
             }]
  });
  
  //构造窗体
  var win = new Ext.Window({
     el:'win',
     title:'用户列表',
     layout:'fit',
     width:700,
     height:600,
     items:[grid],
     tbar:toolBar
  });
       
  win.show();
    </script>
	</body>
</html>

 

   java代码如下：

   

package com.baoz.extPro.action;

import java.util.List;

import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;

import org.apache.struts2.ServletActionContext;

import com.baoz.extPro.dao.DAO;
import com.baoz.extPro.dao.DAOImpl;
import com.baoz.extPro.entity.User;
import com.baoz.extPro.utils.ActionUtils;
import com.baoz.extPro.utils.JsonUtils;
import com.opensymphony.oscache.util.StringUtil;
import com.opensymphony.xwork2.ActionSupport;

public class UserAction extends ActionSupport {
	private User user;

	private String deleteIds;

	private String s_name;

	private String s_age;
	
	private String link_id;

	public String getDeleteIds() {
		return deleteIds;
	}

	public void setDeleteIds(String deleteIds) {
		this.deleteIds = deleteIds;
	}

	public User getUser() {
		return user;
	}

	public void setUser(User user) {
		this.user = user;
	}

	public String list() throws Exception {
		DAO dao = new DAOImpl();
		StringBuffer hql = new StringBuffer();
		hql.append("from User as u where 1=1 ");
		System.out.println("s_name="+s_name);
		System.out.println("s_age="+s_age);
		if(s_name!=null && !s_name.equals("")){
			hql.append(" and u.name like '%");
			hql.append(s_name);
			hql.append("%'");
		}
		
		if(s_age!=null && !s_age.equals("")){
			hql.append(" and u.age=");
			hql.append(s_age);			
		}
		List list = dao.someList(hql.toString());
		
		HttpServletRequest request = ServletActionContext.getRequest();
		String start = request.getParameter("start");
		String limit = request.getParameter("limit");
		
		System.out.println("limit="+limit);
		Integer index = Integer.parseInt(start);
		Integer pageSize = Integer.parseInt(limit);
		
		System.out.println("index="+start);
		System.out.println("pageSize="+limit);

		StringBuffer json = new StringBuffer();
		json.append("{");
		json.append("totalProperty:").append(list.size()).append(", ");
		json.append("root:[");
		int size = list.size();
		if (pageSize + index <= size) {
			size = pageSize + index;
		}

		for (int i = index; i < size; i++) {
			User user = (User) list.get(i);
			json.append("{id:'").append(user.getId()).append("', name:'")
					.append(user.getName()).append("', age:").append(
							user.getAge()).append(", sex:'").append(
							user.getSex()).append("', descn:'").append(
							user.getDescn()).append("'");
			if (i == size - 1) {
				json.append("}");
			} else {
				json.append("},");
			}
		}
		json.append("]");
		json.append("}");
		HttpServletResponse response = ServletActionContext.getResponse();
		ActionUtils.sendText(response, json.toString());
		return null;
	}

	public String tree() throws Exception {
		StringBuffer json = new StringBuffer();
		json.append("[").append(JsonUtils.json.toString()).append("]");
		HttpServletResponse response = ServletActionContext.getResponse();
		ActionUtils.sendText(response, json.toString());
		return null;
	}

	public String add() {
		System.out.println("user=" + user);
		DAO dao = new DAOImpl();
		HttpServletResponse response = ServletActionContext.getResponse();
		try {
			dao.save(user);
			ActionUtils.sendText(response, "{success:true}");
		} catch (Exception e) {
			e.printStackTrace();
			ActionUtils.sendText(response, "{success:false, errorMsg:'添加"
					+ user.getName() + "失败!'}");
		}

		return null;

	}

	public String edit() {
		DAO dao = new DAOImpl();
		HttpServletResponse response = ServletActionContext.getResponse();
		try {
			dao.update(user);
			ActionUtils.sendText(response, "{success:true}");
		} catch (Exception e) {
			e.printStackTrace();
			ActionUtils.sendText(response, "{success:false, errorMsg:'修改"
					+ user.getName() + "失败!'}");
		}

		return null;
	}

	public String delete() {
		DAO dao = new DAOImpl();
		HttpServletResponse response = ServletActionContext.getResponse();
		try {
			String[] idArray = deleteIds.split(",");
			for (String id : idArray) {
				dao.delete(User.class, id);
			}
			ActionUtils.sendText(response, "{success:true}");
		} catch (Exception e) {
			e.printStackTrace();
			ActionUtils.sendText(response, "{success:false, errorMsg:'删除失败!'}");
		}
		return null;
	}
	
	public String link(){
		System.out.println("link_id="+link_id);
		return null;
	}

	public String getS_age() {
		return s_age;
	}

	public void setS_age(String s_age) {
		this.s_age = s_age;
	}

	public String getS_name() {
		return s_name;
	}

	public void setS_name(String s_name) {
		this.s_name = s_name;
	}

	public String getLink_id() {
		return link_id;
	}

	public void setLink_id(String link_id) {
		this.link_id = link_id;
	}

}

 

  出现的问题：

    在实现这个效果的时候，虽然页面上没有报错，但是在页面上总是不能显示那个装载查询出来的数据

    的GridPanel,后来经过仔细研究，原来是

    <div id="win"><div id="userGrid" style="height: 300px;"></div></div>

    这段代码中div的height没有设置。ext2.0就有这么一个缺陷。如果你不设置它的高度，它是显示不出来的。

  

  

 

   

分享到：
| ext2.0学习入门笔记1
评论
发表评论

您还没有登录,请您登录后再发表评论

相关推荐

    Ext2.0的学习笔记

    ### Ext2.0学习笔记：深入理解Ajax与Ext框架 #### Ajax：实现异步无刷新数据交换的关键技术 Ajax（Asynchronous JavaScript and XML）是一种在无需重新加载整个网页的情况下，能够更新部分网页的技术。它利用了...

    Ext2.0教程与实例 开发与实践笔记

    Ext2.0是Ext JS的一个早期版本，是一个强大的JavaScript库，用于构建富客户端Web应用程序。...通过深入学习和实践这些教程，你可以熟练地运用Ext2.0和JavaFX来构建功能丰富、用户体验优秀的Web和桌面应用程序。

    extJs 2.1学习笔记

    目录 1. ExtJs 结构树 2 2. 对ExtJs的态度 3 3. Ext.form概述 4 4. Ext.TabPanel篇 5 5. Function扩展篇 7 6. Ext.data.Store篇 10 7. Ext.data.JsonReader篇一 12 ...28. extJs 2.0学习笔记(ext.js篇) 77

    Ext 学习总结 pdf版

    - **ExtJs2.0学习笔记(Ext.data序论篇)**：这部分内容是对Ext JS 2.0中`Ext.data`模块的概述，讲解了如何管理和操作数据。 - **ExtJs2.0学习笔记(Ext.Panel终结篇)**：深入探讨了`Ext.Panel`组件的各种特性和用法。...

    extJs+2.1学习笔记.pdf

    14. **extJs 2.0 学习笔记（Ext.data序论篇）** 这部分介绍了Ext.data模块的基础，包括DataModel、Reader和Writer，是理解数据绑定和数据管理的关键。 15. **extJs 2.0 学习笔记（Ext.Panel终结篇）** Panel是...

    ext学习笔记教程和实例

    在"ExtJS2.0开发与实践笔记"系列文档中，你将了解到EXTJS2.0版本的基础知识，包括如何创建基本组件，设置布局，处理事件，以及如何利用EXTJS提供的API进行交互设计。这些笔记将帮助初学者快速入门EXTJS的开发。 ...

    ExtJs学习笔记，共30讲

    13. **extJs 2.0 学习笔记**：这部分内容专注于ExtJs 2.0版本，可能包括新特性、改进和兼容性问题。 通过这些笔记，读者可以逐步掌握ExtJs的基本用法，从构建简单的UI组件到处理复杂的异步数据交互，为开发高质量的...

    EXT_JS实用开发指南_个人整理笔记.docx

    5. **EXT2.0组件体系**：EXT2.0引入了清晰的组件层次结构，组件由`Component`类定义，每个组件有一个特定的`xtype`属性，用于标识组件类型。组件分为基本组件、工具栏组件和表单及元素组件三类，涵盖了大量的常用UI...

    界面框架extjs学习笔记

    EXTJS in Action 是一本专为学习EXTJS编写的书籍，但这里我们主要关注学习笔记中的关键知识点。 首先，EXTJS的目录结构非常重要，因为它包含了所有必要的资源和源码： 1. `adapter`：这部分包含了适配器，用于将...

    ExtJS面板学习笔记(带有运行效果)

    ### ExtJS面板学习笔记 #### 一、基础：弹出框 在ExtJS中，`Ext.MessageBox`提供了创建各种模态对话框的功能，包括提示、确认、输入等。以下是几个基本示例： 1. **简单警告对话框**： ```javascript Ext....

    Extjs参考文档

    《EXT学习笔记.doc》可能是个人或团队在学习EXTJS过程中整理的笔记，包含了他们的实践经验、技巧和问题解决方案，对于学习EXTJS非常有帮助。 《EXT核心API详解.pdf》是对EXTJS核心API的深入解析，适合想要深入研究...

    常见笔记本电脑BIOS设置PPT学习教案.pptx

    4. **Ext2**：主要用于Linux系统，提供更好的性能和可靠性。 分区软件有多种，如Fdisk、Partition Magic（分区大师）和F32，它们可以帮助用户轻松创建、调整和格式化分区。 总之，了解和掌握BIOS设置及硬盘分区是...

    常见笔记本电脑BIOS设置PPT课件.pptx

    7.5.2 **分区格式**：常见的分区格式有FAT16、FAT32、NTFS和Ext2。FAT16是较老的格式，支持的最大分区大小有限。FAT32是后来的改进版，支持更大的分区，广泛应用于多种操作系统。NTFS是Windows NT系列操作系统的默认...

Magicbox
Global site tag (gtag.js) - Google Analytics