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;

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'>

<inherits name='com.google.gwt.user.User'/>

<inherits name='com.google.gwt.user.theme.standard.Standard'/>


<inherits name='com.extjs.gxt.ui.GXT'/>

<entry-point class='org.chen.gxt.client.Paging'/>
<set-property name="user.agent" value="ie8"/>

<source path='client'/>
<source path='shared'/>

<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 的兴趣在网上看了很多文章都是藏着掖着的没一点实际的东东代码都不全还忽悠人，自己会就算了还在那炫耀贴几个图就不发代码鄙视这种人共享才是王道希望我的这篇文章能给大家带来帮助有什么不对的还请见谅谢谢大家看完我的文章

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

gwt-ext_GWT，GWT-Ext（SmartGWT），GXT（Ext GWT）常见任务
gwt-ext 我正在浏览我们的JCG合作伙伴之一UI-Programming博客上的一些旧文章,并注意到有很多简短的文章,介绍了如何使用GWT,GWT-Ext(SmartGWT)和GXT(Ext G ...
GWT，GWT-Ext（SmartGWT），GXT（Ext GWT）常见任务
我在我们的JCG合作伙伴之一UI-Programming博客上浏览了一些旧文章,并注意到有很多简短的文章,介绍了如何使用GWT,GWT-Ext(SmartGWT)和GXT(Ext GWT)执行一些常见 ...
PPT系列福利（PPT教程、模板库、图标库、素材库、图标素材）免费送给大家学习交流
正值1024,给大家赠送我收藏的PPT系列资料:PPT教程.模板库.图标库.素材库.图标素材免费送给大家学习交流 1.PPT教程集: 2.PPT模板库简单列举了几个,太多了我就不一一截图了 3.图标 ...
我的十年总结——送给刚毕业的年轻朋友们（转）
我的十年总结--送给刚毕业的年轻朋友们(转) 随笔 2009-12-11 19:33:02 阅读16 评论0 字号:大中小我的经历并不算光鲜,在同龄人中只能算中上,靠自己的奋斗,在30岁之前解决了很 ...
满满的正能量，送给你！早安，朋友
从甜甜的睡梦中醒来,睡眼惺松,打开窗,阳光柔柔地照进来--沐浴着清晨的阳光,美好的一天又开始了.昨日不管是快乐还是忧伤,不管是平静还是愤怒,都已成为过去,今天是一个崭新的开始. 温暖的早安心语如温柔的 ...
送给那些渐渐远离的朋友(转载)
偶然间想起老朋友,就习惯性的打开空间,然而上面显示:"抱歉,该空间仅对主人指定的人开放"我顿时愣了!随后,却又淡然了. 有些人,总是会慢慢的淡出你的世界,慢慢的在你的记忆里模糊- ...
java mysql jsp分页代码_JAVA/JSP学习系列之六(MySQL翻页例子)
JAVA/JSP学习系列之六(MySQL翻页例子) 更新时间:2006年10月13日 00:00:00 作者: 一.运行前准备下载了mysql的jdbc驱动(一个jar文件)并加载在CLASSP ...
mysql分页是物理分页_学习MySQL：什么是分页
mysql分页是物理分页 In this article, I am going to explain that in MySQL, what is pagination and how we can ...
mongodb中分页显示数据集的学习
这次继续看mongodb中的分页.首先依然是插入数据: 1) db.Blog.insert( { name : "Denis", age : 20, city : "Pr ...

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

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

最新文章

热门文章