Pagination in EXT-JS and JAVA

6:01 PM 1 Comment

Pagination can be done in ExtJs using Java, either using struts/jsp/springmvc or any j2ee based integration
Java

/*Intialize the request params with query from the client side (ExtJs grid)*/

                JSONObject jObject = new JSONObject(); 

  HttpSession session = request.getSession(true);

  Connection conn = null;

  PreparedStatement pStmt = null;

  ResultSet rs = null; 

  HashMap<string, object=""> responseMap = new HashMap<string,object>(); 

  Integer start = Integer.parseInt(request.getParameter("start"));

  Integer limit = Integer.parseInt(request.getParameter("limit"));

  String prepareColumn = request.getParameter("prepareColumns");

                String SQLQuery =(String) session.getAttribute("REP_PAGE_QUERY");

/*Query retrival part from the Database Part */

StringBuffer paginatedresult = new StringBuffer();

   paginatedresult.append("select * from ( select x.* ,systimestamp "+"ESC_rotime"+" , rownum "+"ESC_actual_rid"+"  from ( ");

   paginatedresult.append(SQLQuery);

   paginatedresult.append(") x where rownum < ")

   .append(endRowNum).append(" ) where  "+" ESC_actual_rid")

   .append(" >= ").append(startRowNum);

   conn = ConnectionManager.getConnection();

      int totalCount = getTotalCount(SQLQuery,conn);

  

   List<!--?--> results = null;

   pStmt = conn.prepareStatement(paginatedresult.toString());

   rs = pStmt.executeQuery();

   RowSetDynaClass rowSetDynaClass = new RowSetDynaClass(rs,false);

   results = rowSetDynaClass.getRows();

/*Iterate and Send it back to Client ExtJs Grid */

Collection< Map<string,string>> listResults = new ArrayList< Map<string,string>>();

for(Object result:results){

   BasicDynaBean bean = (BasicDynaBean)result;   

   Map<string,string> eachRow =  new HashMap<string, string="">();

   for(DynaProperty property :rowSetDynaClass.getDynaProperties() ){

    eachRow.put(property.getName().replace(" ", "_"), bean.get(property.getName() )!=null?bean.get(property.getName() ).toString():null);

   }

   listResults.add(eachRow);

  }

Map dataMart = new HashMap();

  dataMart.put("totalCount", totalCount);

  dataMart.put("results", listResults);

  if(columnModelArray==null){

   responseMap.putAll(dataMart);

  }else{

   responseMap.put("colModel",columnModelArray);

   responseMap.put("results",dataMart);

  }

  jObject.put("results", responseMap);

  JSONResponseWriterUtils.writeJSON(jObject,"results", response);

    rs.close();

</string,></string,string></string,string></string,string></string,object></string,>

Now we will move to Ext-Js Pagination Grid

var store =  new Ext.data.JsonStore({

         root: 'results',

         totalProperty: 'totalCount',

         remoteSort: true,

         fields:fields, 

         baseParams:{repId:'tenpId'},

         proxy: proxy //can be a memory proxy

  });

//pass the column model + store as above (if needed add memoryproxy for get the metadata + config (if needed))

ReportGrid =function(colModel,store,config){

var cfg = {

   columns:colModel,

         title:'Report',

         store: store,

         trackMouseOver:false,

         disableSelection:true,

         loadMask: true,

        // height:300,

         autoWidth:true,

         flex:1,

         bbar: new Ext.PagingToolbar({

             pageSize: 10,

             store: store,

             displayInfo: true,

             displayMsg: 'Displaying topics {0} - {1} of {2}',

             emptyMsg: "No topics to display"

         })

        };

 Ext.apply(cfg,config);

ReportGrid.superclass.constructor.call(this,cfg );

}

Ext.extend(ReportGrid, Ext.grid.GridPanel, {

});