日期:2014-05-16  浏览次数:20388 次

extjs 的grid jsp 练习

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>文思创新西安分公司</title>

<link href="pages/favicon.ico" rel="SHORTCUT ICON" />
<!-- 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 (in