ext-gwt分页实现送给正在学习gxt的朋友们

ext-gwt 是基于ext 项目发展起来 gwt2.0的基础上发展的，java版的extjs 没有美工的朋友可以尝试学下，鉴于网上这方面的中文资料很匮乏，几乎搜索不到什么很有价值的东西，好像浪曦网上出过几集但是效果不是很理想如果你想深入了解的最好是把官方的例子给看明白了呵呵！不过很难，官方上的例子不是拷贝下来就就可以用的，要像剥皮一样一层层跟它的代码你才能知道是咋回事 很痛苦！本人在华为做过一个沃达丰的项目现在把我的经验分享给大家废话不说干活！看我上图先看项目结构

 

为了让大家更容易上手更容易理解这里我没用什么hibernate+srping整合 就用了大家最熟悉的jdbc+mysql+gwt2.03+ext-gwt 2.21

这些都可以去 www.extjs.com上下载怎么下载就不用我说了吧！

先说下：本文的目的是为了让更多的人认识ext-gwt 。extjs 是很好用，但是对于js不好的人那可不是什么福音 ，如果你java学的不错的，我还是建议你跟着我的文章看下去，体验下不会美工也可以做出很漂亮的界面出来！至于怎么搭建环境网上也有介绍我就不说怎么搭建了！

用谷歌的插件搭建好项目 你也可以用gwt2.0自带的webAppCreator工具创建一个gwt工程

我教大家怎么创建 先把jdk的环境变量配置好然后 在classpath下吧gwt2.03的环境变量配置

怎么配置呢也很简单 跟配置java一样吧gwt2.03的路径写对就可以了 配置好以后就可以敲命令生成gwt工程了 假如你想在D:/project下建立一个叫 Paging的gwt工程.

命令是：-out Paging org.chen.gxt.Paging 前面的Paging 和后面的Paging要一样 org.chen.gxt.Paging 是你建立的包名称ok上图

到了这一步后 你就可以用你最熟悉的 Eclipse工具导入进来 就ok了 用这种方式建立的gwt项目可以整合ssh 里面自带了一个ant脚本文件 我们可以抛弃gwt自带的编译工具用ant脚本编译gwt工程 可以结合tomcat使用很方便的先给你大家看下项目运行的效果图

按照我刚才我贴的图把项目结构建立好

主要就是rpc远程调用

先建立好PageService.java PageServiceAsync.java PageServiceImpl.java文件

前面两个放到client包中后面的实现类放到server包中

 PageServiceke类代码：

/*
 * Ext GWT 2.2.1 - Ext for GWT
 * Copyright(c) 2010-12-30, Ext JS, LLC.
 *
 * @auth 寂寞男人 qq 1551909095
 * http://xiaolou8.com欢迎光临网游单机论坛
 */
package org.chen.gxt.client;

import com.extjs.gxt.ui.client.data.BaseModel;
import com.extjs.gxt.ui.client.data.PagingLoadConfig;
import com.extjs.gxt.ui.client.data.PagingLoadResult;
import com.google.gwt.user.client.rpc.RemoteService;
import com.google.gwt.user.client.rpc.RemoteServiceRelativePath;

@RemoteServiceRelativePath("page")
public interface PageService extends RemoteService{
 PagingLoadResult<BaseModel> getPageList(PagingLoadConfig config);
}

 

这里提下 @RemoteServiceRelativePath("page") 这个的意思是gwt定义的标签标示 必须要写上不然gwt找不到你这个类 这里是page 等下再配置web.xml 的<url-pattern>/paging/page</url-pattern> 后面那个page要和你类中定义的一样

<servlet>
    <servlet-name>greetServlet</servlet-name>
    <servlet-class>org.chen.gxt.server.PageServiceImpl</servlet-class>
  </servlet>
 
  <servlet-mapping>
    <servlet-name>greetServlet</servlet-name>
    <url-pattern>/paging/page</url-pattern>
  </servlet-mapping>

2：PageServiceAsync.java

 

/*
 * Ext GWT 2.2.1 - Ext for GWT
 * Copyright(c) 2010-12-30, Ext JS, LLC.
 *
 * @auth 寂寞男人 qq 1551909095
 * http://xiaolou8.com欢迎光临网游单机论坛
 */
package org.chen.gxt.client;

import com.extjs.gxt.ui.client.data.BaseModel;
import com.extjs.gxt.ui.client.data.PagingLoadConfig;
import com.extjs.gxt.ui.client.data.PagingLoadResult;
import com.google.gwt.user.client.rpc.AsyncCallback;

public interface PageServiceAsync {

 void getPageList(PagingLoadConfig config,
   AsyncCallback<PagingLoadResult<BaseModel>> callback);

}

 

3：
PageServiceImpl.java

 

这个类很重要分页用

 

/*
 * Ext GWT 2.2.1 - Ext for GWT
 * Copyright(c) 2010-12-30, Ext JS, LLC.
 *
 * @author 寂寞男人 qq 1551909095
 * http://xiaolou8.com欢迎光临网游单机论坛
 */
package org.chen.gxt.server;
import java.util.ArrayList;
import java.util.List;

import org.chen.gxt.client.PageService;
import org.chen.gxt.client.Person;
import org.chen.gxt.dao.PersonDao;

import com.extjs.gxt.ui.client.data.BaseModel;
import com.extjs.gxt.ui.client.data.BasePagingLoadResult;
import com.extjs.gxt.ui.client.data.PagingLoadConfig;
import com.extjs.gxt.ui.client.data.PagingLoadResult;
import com.google.gwt.user.server.rpc.RemoteServiceServlet;

@SuppressWarnings("serial")
public class PageServiceImpl extends RemoteServiceServlet implements PageService{

 public PagingLoadResult<BaseModel> getPageList(PagingLoadConfig config) {
  // TODO Auto-generated method stub
  PersonDao dao=new PersonDao();
  List<Person> list=dao.getPerson();
  List<Person> sublist = new ArrayList<Person>();
  //创建也给List<BaseModel>集合用来装载BaseModel 对象
  List<BaseModel> result=new ArrayList<BaseModel>();
  int start=config.getOffset();//得到当前页
  int limit=list.size();
  //下面的方法是取最数学上的min方法取两个数的最小值然后得到偏移量
  if(config.getLimit()>0){
   limit=Math.min(start+config.getLimit(),limit);
  }
  //根据偏移量从list集合中取出部分数据然后装载到sublist集合中其实就是假分页
  //实际上你可以不这么写你可以利用config.getOffset()得到当前页利用然后作为参数到数据库里分页如mysql的limit分页
  for(int i=config.getOffset();i<limit;i++){
   sublist.add(list.get(i));
  }
  //把结果 转化为模型类BaseModel 类对象
  for(Person p:sublist){
   BaseModel m=new BaseModel();
   m.set("name",p.getName());
   m.set("age",p.getAge());
   result.add(m);
  }
  //保存分页结果
  return new BasePagingLoadResult<BaseModel>(result,config.getOffset(),list.size());
 }

}

4:模型层 PageListGrid.java用来装载数据

 

/*
 * Ext GWT 2.2.1 - Ext for GWT
 * Copyright(c) 2010-12-30, Ext JS, LLC.
 *
 * @auth 寂寞男人 qq 1551909095
 * http://xiaolou8.com欢迎光临网游单机论坛
 */
package org.chen.gxt.client;

import java.util.ArrayList;
import java.util.List;
import com.extjs.gxt.ui.client.data.BaseModel;
import com.extjs.gxt.ui.client.data.BasePagingLoader;
import com.extjs.gxt.ui.client.data.PagingLoadConfig;
import com.extjs.gxt.ui.client.data.PagingLoadResult;
import com.extjs.gxt.ui.client.data.PagingLoader;
import com.extjs.gxt.ui.client.data.RpcProxy;
import com.extjs.gxt.ui.client.store.ListStore;
import com.extjs.gxt.ui.client.widget.grid.ColumnConfig;
import com.extjs.gxt.ui.client.widget.grid.ColumnModel;
import com.extjs.gxt.ui.client.widget.grid.Grid;
import com.google.gwt.core.client.GWT;
import com.google.gwt.user.client.rpc.AsyncCallback;

public class PageListGrid extends Grid<BaseModel>{
 public static PageListGrid create(){
  List<ColumnConfig>columnList=new ArrayList<ColumnConfig>();
  columnList.add(new ColumnConfig("name","姓名",100));
  columnList.add(new ColumnConfig("age","年龄",100));
  ColumnModel cm=new ColumnModel(columnList);
  RpcProxy<PagingLoadResult<BaseModel>> proxy = new RpcProxy<PagingLoadResult<BaseModel>>(){

   @Override
   protected void load(Object loadConfig,
     AsyncCallback<PagingLoadResult<BaseModel>> callback) {
    // TODO Auto-generated method stub
    PageServiceAsync service=GWT.create(PageService.class);
    service.getPageList((PagingLoadConfig)loadConfig, callback);
   }};
   final PagingLoader<PagingLoadResult<BaseModel>> loader = new BasePagingLoader<PagingLoadResult<BaseModel>>(
           proxy);
   loader.setRemoteSort(true);
   ListStore<BaseModel> store = new ListStore<BaseModel>(loader);
   return new PageListGrid(store,cm);
 }
 public PageListGrid(ListStore<BaseModel> store,ColumnModel cm){
  super(store,cm);
  this.setLoadMask(true);
  this.setBorders(true);
  this.setAutoExpandColumn("name");
 }
 public void reload(){
  getStore().getLoader().load();
 }
}
5：Bean类 Person类 和我们原来写的没啥区别

/*
 * Ext GWT 2.2.1 - Ext for GWT
 * Copyright(c) 2010-12-30, Ext JS, LLC.
 *
 * @author 寂寞男人 qq 1551909095
 * http://xiaolou8.com欢迎光临网游单机论坛
 */
package org.chen.gxt.client;

public class Person {
 public Person(){}
 private String name;
 private int age;
 public String getName() {
  return name;
 }
 public void setName(String name) {
  this.name = name;
 }
 public int getAge() {
  return age;
 }
 public void setAge(int age) {
  this.age = age;
 }
}
6:gwt.xml配置

<?xml version="1.0" encoding="UTF-8"?>
<module rename-to='paging'>
  <!-- Inherit the core Web Toolkit stuff.                        -->
  <inherits name='com.google.gwt.user.User'/>

  <!-- Inherit the default GWT style sheet.  You can change       -->
  <!-- the theme of your GWT application by uncommenting          -->
  <!-- any one of the following lines.                            -->
  <inherits name='com.google.gwt.user.theme.standard.Standard'/>
  <!-- <inherits name='com.google.gwt.user.theme.chrome.Chrome'/> -->
  <!-- <inherits name='com.google.gwt.user.theme.dark.Dark'/>     -->
  <inherits name='com.extjs.gxt.ui.GXT'/>
  <!-- Other module inherits                                      -->

  <!-- Specify the app entry point class.                         -->
  <entry-point class='org.chen.gxt.client.Paging'/>
  <set-property name="user.agent" value="ie8"/>
  <!-- Specify the paths for translatable code                    -->
  <source path='client'/>
  <source path='shared'/>
  <!-- 下面是我自己配置的包图片包gwt默认是client包如果你用了别的包要在这里配置 -->
  <source path='icons'/>

</module>
7：数据库连接类 :DbConnection .java

/*
 * Ext GWT 2.2.1 - Ext for GWT
 * Copyright(c) 2010-12-30, Ext JS, LLC.
 *
 * @author 寂寞男人 qq 1551909095
 * http://xiaolou8.com欢迎光临网游单机论坛
 */
package org.chen.gxt.dao;

import java.sql.Connection;
import java.sql.DriverManager;
import java.sql.PreparedStatement;
import java.sql.ResultSet;
import java.sql.SQLException;
import java.sql.Statement;

public class DbConnection {
 private final static String DBDRIVER="org.gjt.mm.mysql.Driver";
 private static final String DBURL="jdbc:mysql://localhost:3306/person?useUnicode=true&characterEncoding=utf-8";
 private static final String USERNAME="root";
 private static final String PASSWORD="root";
 private static Connection con=null;
 public static Connection getConn(){
  try{
   Class.forName(DBDRIVER);
   con=DriverManager.getConnection(DBURL,USERNAME,PASSWORD);
  }catch(Exception e){
   
  }
  return con;
 }
 
 /**
  * 释放资源
  * @param conn 数据库连接
  * @param pstmt
  * @param pst
  * @param rs
  */
 public static void closeAll(Connection conn ,PreparedStatement pstmt,Statement pst,ResultSet rs){
  if(rs!=null){
   try{rs.close();}catch(SQLException e){e.printStackTrace();}
  }
  if(pstmt!=null){
   try{pstmt.close();}catch(SQLException e){e.printStackTrace();}
  }
  if(pst!=null){
   try{pst.close();}catch(SQLException e){e.printStackTrace();}
  }
  if(conn!=null){
   try{conn.close();}catch(SQLException e){e.printStackTrace();}
  }
 }
}
8: 数据层：PersonDao.java

 

/*
 * Ext GWT 2.2.1 - Ext for GWT
 * Copyright(c) 2010-12-30, Ext JS, LLC.
 *
 * @author 寂寞男人 qq 1551909095
 * http://xiaolou8.com欢迎光临网游单机论坛
 */
package org.chen.gxt.dao;

import java.sql.Connection;
import java.sql.PreparedStatement;
import java.sql.ResultSet;
import java.sql.SQLException;
import java.util.ArrayList;
import java.util.List;

import org.chen.gxt.client.Person;

import org.chen.gxt.dao.DbConnection;

public class PersonDao {
 public List<Person> getPerson(){
  Connection con=DbConnection.getConn();
  String sql="select * from person";
  List<Person> list=new ArrayList<Person>();
  Person p=null;
  try {
   PreparedStatement pstmt=con.prepareStatement(sql);
   ResultSet rs=pstmt.executeQuery();
   while(rs.next()){
    p=new Person();
    p.setName(rs.getString(2));
    p.setAge(rs.getInt(3));
    list.add(p);
   }
  } catch (SQLException e) {
   // TODO Auto-generated catch block
   e.printStackTrace();
  }
  return list;
 }
}
9:icons包下的文件可以去 gxt-2.2.1 目录下的：

D:/gxt-2.2.1/samples/resources/src/com/extjs/gxt/samples/resources/client/icons 下复制我是解压在

D盘的根据你自己的需要而定吧!

注意把icons包下的文件一起复制到 你项目中 icons包下 并且要在gwt.xml下配置路径 不会的看我刚才上面的贴的gwt.xml配置上面写很清楚了 好了以上配置完毕就可以编译你的工程了 如果你人品很很细心的话我想应该不会错的！我这个教程应该很清楚了如果你还不会 我也无语了还是好好学习下java在来搞吧！呵呵！··第一次写教程有什么不懂得欢迎加我好友！我qq是 1551909095。高手就不用看了 本文适合新手学习为了提高他们对gxt 的兴趣 在网上看了很多文章都是藏着掖着的没一点实际的东东代码都不全还忽悠人，自己会就算了还在那炫耀贴几个图 就不发代码鄙视这种人 共享才是王道 希望我的这篇文章能给大家带来帮助有什么不对的还请见谅谢谢大家看完我的文章