2009年12月16日 星期三

實作Ext grid，其資料來源為靜態之JSON檔案


開發環境：
IDE:MyEclipse6.6GA
Web Server:Tomcat 6.0.20
Database:MySql 5.1.36
MVC:Struts2.1.8
FrameWork:Spring2.0,Hibernate3.2
Client UI:Ext2.3.0

一、建立grid頁面(grid.jsp):
<%@ page language="java" 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 'combox.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="styles.css">

 -->

 <link rel="stylesheet" type="text/css" href="extjs/resources/css/ext-all.css">

 <link rel="stylesheet" type="text/css" href="css/onReady.css">

 <script type="text/javascript" src="extjs/adapter/ext/ext-base.js"></script>

 <script type="text/javascript" src="extjs/ext-all.js"></script>

 <script type="text/javascript" src="extjs/ext-lang-zh_TW.js"></script> 

 <script type="text/javascript">

 <!--

  Ext.onReady(function(){

  var proxy=new Ext.data.HttpProxy({url:'survey.html'});

  //Jsonreader

  var reader=new Ext.data.JsonReader({},

    [

     {name: 'appeId', mapping: 'appeId'},

     {name: 'survId'},

     {name: 'location'}, 

     {name: 'surveyDate'},

     {name: 'surveyTime'},

     {name: 'inputUserId'}           

    ]

  );

  //Store   

  var store=new Ext.data.Store({

    proxy:proxy,

    reader:reader

    });

  //load

  store.load();

     // create the grid

     var grid = new Ext.grid.GridPanel({

         store: store,

         columns: [

             {header: "appeId", width: 60, dataIndex: 'appeId', sortable: true},

             {header: "survId", width: 60, dataIndex: 'survId', sortable: true},

             {header: "location", width: 60, dataIndex: 'location', sortable: true},

             {header: "surveyDate", width: 100, dataIndex: 'surveyDate', sortable: true},

             {header: "surveyTime", width: 100, dataIndex: 'surveyTime', sortable: true},

             {header: "inputUserId", width:80, dataIndex: 'inputUserId', sortable: true}

         ],

         renderTo:'example-grid',

         width:540,

         height:200

     });

 

 });



 //-->

 </script>

  </head>

  

  <body>

  <div id="example-grid"></div>

  </body>

</html>


二、準備JSON檔案(survey.html)於Server Side：
[{"appeId":"1","survId":"1","location":"","surveyDate":"2008-03-14","surveyTime":"12:19:47","inputUserId":"1","inputTime":"2008-03-14 12:21:51","modifyTime":"0000-00-00 00:00:00"},{"appeId":"2","survId":"32","location":"","surveyDate":"2008-03-14","surveyTime":"22:43:09","inputUserId":"32","inputTime":"2008-03-14 22:43:37","modifyTime":"0000-00-00 00:00:00"},{"appeId":"3","survId":"32","location":"","surveyDate":"2008-03-15","surveyTime":"07:59:33","inputUserId":"32","inputTime":"2008-03-15 08:00:44","modifyTime":"0000-00-00 00:00:00"},{"appeId":"4","survId":"1","location":"","surveyDate":"2008-03-15","surveyTime":"10:45:42","inputUserId":"1","inputTime":"2008-03-15 10:46:04","modifyTime":"0000-00-00 00:00:00"},{"appeId":"5","survId":"32","location":"","surveyDate":"2008-03-16","surveyTime":"08:04:49","inputUserId":"32","inputTime":"2008-03-16 08:05:26","modifyTime":"0000-00-00 00:00:00"},{"appeId":"6","survId":"32","location":"","surveyDate":"2008-03-20","surveyTime":"20:19:01","inputUserId":"32","inputTime":"2008-03-20 20:19:32","modifyTime":"0000-00-00 00:00:00"}]


三、測試結果:
1.http://localhost:8080/ExtStudy/Basic/grid.jsp


看到此畫面，恭喜您整合開發環境設定成功！
張貼者： 於
標籤： ,

沒有留言:

張貼留言

訂閱： 張貼留言 (Atom)