Nelson的部落格: 實作Ext Layout(二)，於Layout上增加Grid

接續Ext Layout(一)功能，於Tab Panel上再增加一個Grid。

開發環境：
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

一、Layout頁面(layout2.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(){

   Ext.BLANK_IMAGE_URL='extjs/resources/images/default/s.gif';

   /* normal store

   var store = new Ext.data.Store({

    url: 'SysMgrJson!getMovies.action',

    reader: new Ext.data.JsonReader({root:'results',totalProperty:'totals'}, [

     'id',

     'coverthumb',

     'title',

     'director',

     {name: 'released', type: 'date', dateFormat: 'Y-m-d'},

     'genre',

     'tagline',

     {name: 'price', type: 'float'},

     {name: 'active'}

    ])

   });

   */

   //Grouping store

   var store = new Ext.data.GroupingStore({

    url: 'SysMgrJson!getMovies.action',

    sortInfo: {

     field: 'genre',

     direction: "ASC"

    },

    groupField: 'genre',

    reader: new Ext.data.JsonReader({root:'results',totalProperty:'totals'}, [

     'id',

     'coverthumb',

     'title',

     'director',

     {name: 'released', type: 'date', dateFormat: 'Y-m-d'},

     'genre',

     'tagline',

     {name: 'price', type: 'float'},

     {name: 'active'}

    ])

   });

      

   var genres = new Ext.data.Store({

    data: [

     [1,"Comedy"],

     [2,"Drama"],

     [3,"Action"],

     [4,"Mystery"]    

    ],

    reader: new Ext.data.ArrayReader({id:'id'}, [

     'id',

     'genre'])

   }); 

        

   //Combining two columns function

   function title_tagline(val, x, store){

    return '<b>'+val+'</b><br>'+store.data.tagline;

   }

   //Generating HTML and graphics

   function cover_image(val){

    return '<img src="images/'+val+'.jpg" width="50%" height="50%">';

   }

   //for edit field of grid

   var title_edit = new Ext.form.TextField();

   var director_edit = new Ext.form.TextField();

   var tagline_edit = new Ext.form.TextField({

    maxLength: 45

   });

   var price_edit = new Ext.form.TextField();

   var coverthumb_edit = new Ext.form.TextField();

   var released_edit = new Ext.form.DateField();

   var genre_edit = new Ext.form.ComboBox({

    typeAhead: true,

    triggerAction: 'all',

    mode: 'local',

    store: genres,

    displayField:'genre',

    valueField: 'genre'

   });

     

   //layout with border   

   var viewport = new Ext.Viewport({

    layout: 'border',

    renderTo: Ext.getBody(),    

    items: [{region: 'north',

      xtype: 'panel',

      html: 'North'},

      {region: 'west',

      xtype: 'panel',

      split: true,

      //open/close panel

      collapsible: true,

      collapseMode: 'mini',

      title: 'Some Info',

      bodyStyle:'padding:5px;',

      width: 200,

      minSize: 200,

      html: 'West'},

      {region: 'center',


      //Adding a tab panel

      xtype: 'tabpanel',

      activeTab: 0,

      items: [{

      title: 'Movie Grid',

      xtype: 'editorgrid',

      //autoExpandColumn: 'title',

      store: store,

      //Defining a Grids column model and want to display column

      columns: [

      {header: "Cover", dataIndex: 'coverthumb',renderer:cover_image},

      {header: "CoverThumb", dataIndex: 'coverthumb',editor:coverthumb_edit},

      //Combining two columns

      {header: "Title", dataIndex: 'title',renderer:title_tagline,editor:title_edit},

      {header: "Director", dataIndex: 'director',editor:director_edit},

      //Client-side sorting

      {header: "Released", dataIndex: 'released',sortable:true,

      renderer: Ext.util.Format.dateRenderer('m/d/Y'),editor:released_edit},

      {header: "Genre", dataIndex: 'genre',editor:genre_edit},    

      {header: "Price",dataIndex: 'price',id:'price',sortable:true,editor:price_edit},

      //setup hidden column

      {header: "Tagline", dataIndex: 'tagline',hidden:true,editor:tagline_edit}

      ],

            bbar: new Ext.PagingToolbar({

                pageSize: 5,

                store: store,

                displayInfo: true,

                displayMsg: '第 {0} 筆 - {1} 筆 of {2} 筆',

                emptyMsg: "沒有資料"

            }),      

      view: new Ext.grid.GroupingView()},

      {title: 'Movie Descriptions',

       html: 'Movie Info'},

      {title: 'Movie Grid2',

       html:'Center2'}]

      },

      {region: 'east',

      xtype: 'panel',

      split: true,

      title: 'genre information form',

      //open/close panel

      collapsible: true,

      width: 200,

      html: 'East'

      },

      {region: 'south',

      xtype: 'panel',

      html: 'South'}]

   });

   //需在gridPanel建立後才可以Load資料

   store.load({params:{start:0, limit:5}});

  });  

 //-->

 </script>

  </head>

  

  <body>

   <table align="center" border="0">

    <tr>

     <td>

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

    <td>

   </tr>

  </table>  

  </body>

</html>


二、測試結果:
1.http://localhost:8080/ExtStudy/Basic/layout2.jsp
Nelson的部落格

2009年12月21日星期一

實作Ext Layout(二)，於Layout上增加Grid

沒有留言:

張貼留言

追蹤者

關於我自己

2009年12月21日 星期一

實作Ext Layout(二)，於Layout上增加Grid

沒有留言:

張貼留言

2009年12月21日星期一
