extjs 的grid jsp 练习

liyaxi

浏览: 74779 次
性别:
来自: 西安

最近访客更多访客>>

梦想飞扬1

只唐瑞

第三军团

hy928302776

博主相关

博客

微博

相册

留言

关于我

文章分类

社区版块

存档分类

博客分类：

web前端
JavaEE
web

grid.jsp

<%@ page language="java" 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>ggggg</title>

<!-- Ext lib -->
<link rel="stylesheet" type="text/css"
	href="<%=basePath%>script/ext/resources/css/ext-all.css">
<script type="text/javascript"
	src="<%=basePath%>script/ext/adapter/ext/ext-base.js"></script>
<script type="text/javascript" src="<%=basePath%>script/ext/ext-all.js"></script>
<script type="text/javascript"
	src="<%=basePath%>script/ext/locale/ext-lang-zh_CN.js"></script>
<script type="text/javascript">
Ext.onReady(function() {
	
 Ext.BLANK_IMAGE_URL = 'script/ext/resources/images/default/s.gif';
    Ext.QuickTips.init();

//定义grid 选择为 复选框选择
var sm = new Ext.grid.CheckboxSelectionModel();
var cm = new Ext.grid.ColumnModel([//列模型
    new Ext.grid.RowNumberer(),//每一行显示行号
    sm,
    {header:'编号',dataIndex:'id'},
    {header:'名称',dataIndex:'name'},
    {header:'描述',dataIndex:'descn'}
]);
cm.defaultSortable = true;
var ds = new Ext.data.Store({
	baseParams: { limit:10,query:'中' ,name:'ggg'},
    proxy: new Ext.data.HttpProxy({url:'data.jsp'}),
    reader: new Ext.data.JsonReader({
        totalProperty: 'totalProperty',
        root: 'root'
    }, [
        {name: 'id'},
        {name: 'name'},
        {name: 'descn'}
    ])
});
ds.load({params:{start:0,limit:10}});

var grid = new Ext.grid.GridPanel({
    el: 'grid',
    ds: ds,
    cm: cm,
    sm: sm,
    height:300,
    width:500,
    title: 'JSP->JSON',
    tbar:[{
    	  text:'选择',
    	  handler:  getAllSelecteds
    }],
    bbar: new Ext.PagingToolbar({
        pageSize: 10,
        store: ds,
        displayInfo: true,
        displayMsg: '显示第 {0} 条到 {1} 条记录，一共 {2} 条',
        emptyMsg: "没有记录"
    })
});

  grid.render();
  function  getAllSelecteds()
  {
	 grid.getSelectionModel().each( function (rec){
		 alert(rec.get("name"));
		 
	 });
	
  }

});
</script>
</head>
<body>
<div id="grid"></div>
</body>
</html>

data.jsp

<%@ page language="java" pageEncoding="utf-8"%>
<%
	String start = request.getParameter("start");
	String limit = request.getParameter("limit");
	String query = request.getParameter("query");
	String name = request.getParameter("name");
	int intStart = Integer.parseInt(start);
	int intLimit = Integer.parseInt(limit);
	System.out.println(query);
	System.out.println(name);
	out.println("{totalProperty:100,root:[");
	 
	StringBuilder  sb = new StringBuilder();
	for (int i = 0; i < intLimit; i++)
	{
		sb.append("{'id':'"+(intStart+i)+"','name':'name"+(intStart+i)+" ','descn':'descn"+(intStart+i)+"'},");
	}
	sb =sb.deleteCharAt(sb.lastIndexOf(","));

	out.println(sb.toString()+"]}");
%>
运行效果如下图：

查看图片附件

分享到：

Extjs.grid 笔记 | Hessian是一个轻量级的remoting on http工 ...

2012-03-20 00:10
浏览 1408
评论(0)
分类:Web前端
查看更多

发表评论

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

最近访客更多访客>>

博主相关

文章分类

社区版块

存档分类

最新评论

extjs 的grid jsp 练习

评论

发表评论

相关推荐

最近访客 更多访客>>

博主相关

文章分类

社区版块

存档分类

最新评论

extjs 的grid jsp 练习

评论

发表评论

相关推荐

postgres java

jdbctempleate 执行postgres 数据库存储过程返回结果集

spring mvc 支持web应用程序的文件上传功能

servlet下载 csv 文件,中文不乱码

Ext.form.Load

ExtJs Store baseParams设置

Hessian是一个轻量级的remoting on http工具，使用简单的方法提供了RMI（Remote Method Invocation，远程方法调用）

Ext 从数据库读去数据生成列表

java的单例模式的一个例子

用jquery 使网页绝对居中 在 大于等于1024 *768分辨率下

有状态SessionBean 和无状态Sessionbean

GlassFish v2 NetBean6.5 开发ejb3.0 会话Bean

答Servlet下载文件的附件

Servlet jquery 删除 操作2

Servlet jquery ajax 删除 操作1

最近访客更多访客>>

用jquery 使网页绝对居中在大于等于1024 *768分辨率下

Servlet jquery 删除操作2

Servlet jquery ajax 删除操作1