Extjs3.2 directstore+gridpanel实现后台分页

zfc1176

已于 2024-03-22 07:52:15 修改

阅读量274

点赞数 4

分类专栏： java&c# JavaScript 文章标签：开发语言 java-ee java javascript

于 2024-03-22 00:23:16 首次发布

本文链接：https://blog.csdn.net/zfc1176/article/details/136924605

版权

java&c# 同时被 2 个专栏收录

2 篇文章 0 订阅

订阅专栏

JavaScript

1 篇文章 0 订阅

订阅专栏

本文详细展示了如何在Java后台使用DirectMethod配合ExtjsGridPanel实现动态数据分页，以及web.xml的配置过程。

摘要由CSDN通过智能技术生成

一、需要用到的第三方包

directjngine.1.3.jar、yuicompressor-2.4.2.jar、commons-fileupload-1.2.1.jar、gson-1.3.jar

(jar包下载地址)包，我就不多说了在网上也能搜到，直接给代码，相信大家一看就明白了。

二、功能实现

1、后台Java类

/**
 * 后台辅助类
 */
package dao;

import java.util.List;

/**
 * @author zfc
 * DirectStore.java
 * 2012-12-14
 */
public class DirectStore {

    private int totalRecords;

    private final List<?> results;

    public DirectStore(final int totalRecord, final List<?> results) {

       super();

       this.totalRecords = totalRecord;

       this.results = results;

    }

    public List<?> getresults() {

       return this.results;

    }

    public int getTotalRecord() {

       return this.totalRecords;

    }

    public void setTotalRecord(final int totalRecord) {

       this.totalRecords = totalRecord;

    }

    @Override
    public String toString() {

       return "{'totalRecords':" + this.totalRecords + ",'results'"

              + this.results + "}";

    }

}

 

/**
 * 后台directMethod
 */
package dao;

import java.sql.Connection;
import java.sql.ResultSet;
import java.sql.ResultSetMetaData;
import java.sql.SQLException;
import java.sql.Statement;
import java.util.ArrayList;
import java.util.Iterator;
import java.util.List;
import java.util.Map;

import com.google.gson.JsonArray;
import com.google.gson.JsonElement;
import com.google.gson.JsonObject;
import com.softwarementors.extjs.djn.config.annotations.DirectMethod;

/**
 * @author zfc Paging4Direct.java 2012-12-13
 */
public class Paging4Direct {
 private Connection conn;
    private Statement s;
    private ResultSet rs;
    private ResultSetMetaData rsm = null;
 

 @DirectMethod
 public DirectStore getDirectTabledatas(int start, int limit) {
  int b = start*1+1;//数据库中的rownum是从1开始的
  int l = limit*1;
  int n = start+l;
  List<Functionitems> list = null;
  DirectStore store = null;
      list = new ArrayList<Functionitems>();
      conn =new  OracleConnection().getConn();
      String sql = " SELECT * FROM (SELECT e.*, ROWNUM rn FROM (SELECT * FROM ut_funcitem) e WHERE ROWNUM <= "+n+") WHERE rn >= "+b;      

      String totalcount = " select count(*)  from ut_funcitem";
     try {
     s = conn.createStatement();
     rs = s.executeQuery(sql);
     while(rs.next()){
      Functionitems fis = new Functionitems();
      fis.setId(rs.getString("id"));
      fis.setParentid(rs.getString("parentid"));
      fis.setFuncitem(rs.getString("funcitem"));
      fis.setFuncdesc(rs.getString("funcdesc"));
      list.add(fis);
     }
     rs= s.executeQuery(totalcount);
     rs.next();
     int totalProperty = rs.getInt(1);
     store = new DirectStore(totalProperty, list);
    } catch (SQLException e) {
     // TODO Auto-generated catch block
     e.printStackTrace();
    }finally{
     this.closeAll();
    }
      System.out.println(store.toString());
       return store;
       
   } 
 public void closeAll(){
  if(rs!=null){
   try {
    rs.close();
   } catch (SQLException e) {
    // TODO Auto-generated catch block
    e.printStackTrace();
   }
  }
  if(s!=null){
   try {
    s.close();
   } catch (SQLException e) {
    // TODO Auto-generated catch block
    e.printStackTrace();
   }
  }
  if(conn!=null){
   try {
    conn.close();
   } catch (SQLException e) {
    // TODO Auto-generated catch block
    e.printStackTrace();
   }
  }
 }
 class Functionitems {
  private int totalRecords; 
  private String funcitem;
  private String parentid;
  private String funcdesc;
  private String id;
  
  public int getTotalRecord() {

         return this.totalRecords;

     }

     public void setTotalRecord(final int totalRecord) {

        this.totalRecords = totalRecord;

     }
  public String getFuncitem() {
   return funcitem;
  }
  
  public void setFuncitem(String funcitem) {
   this.funcitem = funcitem;
  }
  public String getParentid() {
   return parentid;
  }
  public void setParentid(String parentid) {
   this.parentid = parentid;
  }
  public String getFuncdesc() {
   return funcdesc;
  }
  public void setFuncdesc(String funcdesc) {
   this.funcdesc = funcdesc;
  }
  public String getId() {
   return id;
  }
  public void setId(String id) {
   this.id = id;
  }
 }
 }

2、前台Extjs代码

<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>c</title>
<link rel="stylesheet" type="text/css" href="ext-3.2.1/resources/css/ext-all.css" />
<script type="text/javascript" src="ext-3.2.1/adapter/ext/ext-base.js"></script>
<script type="text/javascript" src="ext-3.2.1/ext-all-debug.js"></script>
<script type="text/javascript" src="ext-3.2.1/src/locale/ext-lang-zh_CN.js"></script>
<!-- <script type="text/javascript" src="progresspagingtbar.js"></script>
 -->
<!--以上为DirectJNgine的基础JS文件.-->
<script type="text/javascript" src="direct/directApi.js"></script>

<script type="text/javascript">
Ext.onReady(function(){
     
 Ext.xuyi.REMOTING_API.enableBuffer = 0; 
 Ext.Direct.addProvider(Ext.xuyi.REMOTING_API);
 
 //分页显示2从后台java类获取数据
 var sm = new Ext.grid.CheckboxSelectionModel();
 var cm = new Ext.grid.ColumnModel([
       new Ext.grid.RowNumberer(),
       sm,                               
    {header:'编号',dataIndex:'id'},
    {header:'功能名称',dataIndex:'funcitem'},
    {header:'父编号',dataIndex:'parentid'},
    {header:'功能描述',dataIndex:'funcdesc'}
    ]);
    
  var store = new Ext.data.DirectStore({
            //autoLoad:true,
      paramsAsHash:true,
      root : 'results',
         totalProperty : 'totalRecords',
      directFn:  Paging4Direct.getDirectTabledatas,
      baseParames:{
       'start':0,
       'limit':10
       },
          paramOrder: ['start','limit'], 
      fields:[
       {name:'id'},
       {name:'funcitem'},
       {name:'parentid'},
       {name:'funcdesc'}
      ]
  });

 var grid = new Ext.grid.GridPanel({
     autoHeight:true,
     renderTo:'grid',
     store:store,
     cm:cm,
     sm:sm,
     bbar: new Ext.PagingToolbar({
         pageSize:20,
         store:store,
         displayInfo:true,
         displayMsg:'显示第{0}条到{1}条记录，一个{2}条',
         emptyMsg:'没有记录！'
     }) 
 });
 store.load({params:{start:0,limit:20}});
 
  //删除表格中的第二行，并刷新显示
  Ext.get('remove').on('click',function(){//Ext.get();方法的参数是html表单中对应的id属性
   store.remove(store.getAt(1));
   grid.view.refresh();//用于刷新显示行号
  });
});
</script>
</head>
<body>
 <div id="grid"></div>
 <input type="button" id="remove" value="删除第二行">
</body>
</html>

3、web.xml的配置如下

<?xml version="1.0" encoding="UTF-8"?>
<web-app xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xmlns="http://java.sun.com/xml/ns/javaee" xmlns:web="http://java.sun.com/xml/ns/javaee/web-app_2_5.xsd" xsi:schemaLocation="http://java.sun.com/xml/ns/javaeehttp://java.sun.com/xml/ns/javaee/web-app_2_5.xsd" id="WebApp_ID" version="2.5">
  <display-name>test</display-name>
  <welcome-file-list>
    <welcome-file>test.html</welcome-file>
    <welcome-file>index.htm</welcome-file>
    <welcome-file>downloadFile.jsp</welcome-file>
    <welcome-file>default.html</welcome-file>
    <welcome-file>default.htm</welcome-file>
    <welcome-file>default.jsp</welcome-file>
  </welcome-file-list>
  <servlet>
    <servlet-name>DjnServlet</servlet-name>
    <servlet-class>com.softwarementors.extjs.djn.servlet.DirectJNgineServlet</servlet-class>
    <init-param>
      <param-name>debug</param-name>
      <param-value>true</param-value>
    </init-param>
    <init-param>
      <param-name>minify</param-name>
      <param-value>true</param-value>
    </init-param>
    <init-param>
      <param-name>providersUrl</param-name>
      <param-value>djn/directprovider</param-value>
    </init-param>
    <init-param>
      <param-name>apis</param-name>
      <param-value>
    mynamespace
      </param-value>
    </init-param>
    <init-param>
      <param-name>mynamespace.apiFile</param-name>
      <param-value>direct/directApi.js</param-value>
    </init-param>
    <init-param>
      <param-name>mynamespace.apiNamespace</param-name>
      <param-value>Ext.xuyi</param-value>
    </init-param>
    <init-param>
      <param-name>mynamespace.classes</param-name>
      <param-value>
             dao.Paging4Direct
      </param-value>
    </init-param>
    <load-on-startup>1</load-on-startup>
  </servlet>
  <servlet-mapping>
    <servlet-name>DjnServlet</servlet-name>
    <url-pattern>/djn/directprovider/*</url-pattern>
  </servlet-mapping>
</web-app>