`
zhoutiea
  • 浏览: 38144 次
  • 性别: Icon_minigender_1
  • 来自: 沈阳
社区版块
存档分类
最新评论

Extjs分页grid组件

    博客分类:
  • java
阅读更多
今天之闲,写篇关于Extjs中分页技术,之所以对Extjs感兴趣,完全出于对Extjs分页grid面板莱单栏的上一页、下一页界面好看,而且简单。实现分页很简单其实和Extjs动态树状莱单一样,都是用到JSON数据类型存储。
JS代码:
Ext.onReady(function(){

   Ext.lib.Ajax.defaultPostHeader += '; charset=UTF-8';
    var sm = new Ext.grid.CheckboxSelectionModel();
var cm = new Ext.grid.ColumnModel([sm,
  new Ext.grid.RowNumberer(),
  {header:'编号',dataIndex:'id',sortable:true,
   editor:new Ext.grid.GridEditor(new Ext.form.TextField(
   {
    allowBlank:false
   }))},
  {header:'城镇',dataIndex:'price',sortable:true,width:300,
  editor:new Ext.grid.GridEditor(new Ext.form.TextField(
   {
    allowBlank:false
   }))},
  {header:'邮编',dataIndex:'sex',sortable:true,renderer:renderSex}
]);

function renderSex(value)
{
  if(value=='woman')
  {
   return "<span style='color:red'>"+value+"</span>";
  }
  else
  {
   return "<img src='js/drop-yes.gif'/> <span style='color:greed'>"+value+"</span>";
  }
}

var store= new Ext.data.Store({
  proxy:new Ext.data.HttpProxy({url:'ExtjsServlet'}),
  reader:new Ext.data.JsonReader({
    totalProperty:'totalProperty',
    root:'root'
   },[
    {name:'id'},
    {name:'price'},
    {name:'sex'}
   ])
  });
  
var grid =  new Ext.grid.GridPanel({
  renderTo:"right",
  store:store,
  cm:cm,
//  sm:new Ext.grid.RowSelectionModel({singleSelect:true}),
  loadMask:true,
  width:752,
  height:470,
// bbar:new Ext.PagingToolbar({下面工具条
  bbar:new Ext.PagingToolbar({
   pageSize:10,
   store:store,
   displayInfo:true,
   displayMsg:'显示第{0}数据到{1},一共有{2}条',
   emptyMsg:'没有记录'
  
  }),
tbar:[{
         text: '删除',
            iconCls:'user',
            handler : function(){
          //var record = grid.getSelectionModel().getSelected();// 返回值为 Record 类型
            var rows = grid.getSelectionModel().getSelections();// 返回值为 Record 数组
            for( var i=0;i<rows.length;i++){
            
      store.remove(rows);
      
       }
      grid.view.refresh();
//      this.getEl().dom.action='./formservlet?operator=save';
   this.getEl().dom.submit();
            }},{
       text: '添加'},
        
     {
       text: '修改'
      
     },
     {
       text: '查询'
    }]

});


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

Ext.get('remove').on("click",function(){
  var rows = grid.getSelectionModel().getSelections();// 返回值为 Record 数组
  for( var i=0;i<rows.length;i++){
   store.remove(rows);
  }
   grid.view.refresh();
},this);
// grid.render();
});
Servlet代码:
public class ExtjsServlet extends HttpServlet {
/*
int ................
*/
public void doGet(HttpServletRequest request, HttpServletResponse response)
   throws ServletException, IOException {
  response.setContentType("text/html;charset=UTF-8");
  int start  =Integer.parseInt(request.getParameter("start"));
  int pageSize=Integer.parseInt(request.getParameter("limit"));
  System.out.println("分页servlet");
  if(start==0){start=1;}
  String sql = "SELECT TOP "+pageSize+"* FROM county WHERE (id NOT IN ( SELECT TOP "+pageSize*(start-1)+"id FROM county ORDER BY id))ORDER BY id";
  System.out.println(start+" "+pageSize);
  JdbcDB jb=new JdbcDB();
  Connection conn=jb.getConnection();
  StringBuilder s=jb.getResultSet(conn,sql);
  System.out.println(s.toString());
  response.getWriter().write(s.toString());
  jb.close(conn);
}
public void doPost(HttpServletRequest request, HttpServletResponse response)
   throws ServletException, IOException {
       doGet(request, response);
}
public void init() throws ServletException {
  // Put your code here
}
}
java代码:
public class JdbcDB {
/**
  * @param args
  *
  *
  */
public Connection getConnection(){
  Connection conn = null;
  try{
   Class.forName("net.sourceforge.jtds.jdbc.Driver");
   conn = DriverManager.getConnection("jdbc:jtds:sqlserver://localhost:1433/zhoutie","sa","123");
  }catch(Exception e){
   e.printStackTrace();
  }
  return conn;
}
public void close(Connection conn){
  if(conn!=null){
   try{
    conn.close();
   }catch(SQLException e){
    e.printStackTrace();
   }
  }
}

public StringBuilder getResultSet(Connection conn,String sql){
  
  int n=this.getResulsetRow(conn);
  StringBuilder s= new StringBuilder("{totalProperty:"+n+",root:[");
  PreparedStatement pst = null;
  ResultSet rs = null;
  try{
   pst = conn.prepareStatement(sql);  
   rs = pst.executeQuery();
  
   int i = 0;
   while(rs.next())
   {
    i++;
    String a=String.valueOf(rs.getInt("countyid"));
    String c=rs.getString("county");
    String b=String.valueOf(rs.getInt("fatherid"));
//    System.out.println(a);
    s.append("{id:'"+a+"',price:'"+c.trim()+"',sex:'"+b+"'}");
//    System.out.println(rs.getString(2));
    if(i<10)
    {
     s.append(",");
    }
   }
  
  } catch(SQLException e){
   e.printStackTrace();
  }
  s.append("]}");
  return s;
}


public int getResulsetRow(Connection conn){
  int n=0;
  Statement pst = null;
  ResultSet rs = null;
   try{
    pst=conn.createStatement(ResultSet.TYPE_SCROLL_INSENSITIVE,ResultSet.CONCUR_READ_ONLY);
    rs=pst.executeQuery("select count(id) from county");
    rs.next();
    n=rs.getInt(1);
    System.out.println(n);
   }catch(SQLException e){
    e.printStackTrace();
   }
   return n;
   }

public static void main(String[] args) {
  JdbcDB jb=new JdbcDB();
  Connection conn=jb.getConnection();
  String sql = "SELECT TOP "+10+"* FROM county WHERE (id NOT IN ( SELECT TOP "+10*(1-1)+"id FROM county ORDER BY id))ORDER BY id";
  StringBuilder s=jb.getResultSet(conn ,sql);
  System.out.println(s.toString());
  jb.close(conn);
}
}
分享到:
评论

相关推荐

    ExtJS 4.2 Grid组件单元格合并的方法

    ExtJS 4.2 Grid组件本身并没有提供单元格合并功能,需要自己实现这个功能。 目录 1. 原理 2. 多列合并 3. 代码与在线演示 1. 原理 1.1 HTML代码分析 首先创建一个Grid组件,然后查看下的HTML源码。 1.1.1 Grid组件 ...

    ExtJSgrid组件,分页展示全功能

    ExtJS的分页功能,checkboxs,行号,更删改查,鼠标右键的查看和删除。系统搭建在struts2,hibernate3,spring上面。

    深入浅出Extjs4.1.1

    17、ExtJS之Grid组件* w/ o8 _- \. Q! [* R6 s& u0 V 18、ExtJS之ComboBox获取远程数据、网页计算器5 W& ]. W7 ?, V/ Q 19、ExtJS之组件面向对象编程(一) 20、ExtJS之组件面向对象编程(一) 21、项目实战-需求...

    ExtJS4中文教程2 开发笔记 chm

    ExtJS4 Grid组件 Extjs4 TreeGrid Extjs4 TreePanel实例 ExtJs4 动态加载 Extjs4 带复选框的树(Checkbox tree) Extjs4 新的布局方式 Extjs4 锁定表头(Locking Grid)功能 Extjs4.0 MVC实例 Extjs4.0动态填充...

    Extjs4.0学习笔记

    ExtJS4学习笔记(五)---Grid分页 ExtJS4学习笔记(六)---多表头Grid ExtJS4学习笔记(七)---带搜索的Grid(SearchGrid) ExtJS4学习笔记(八)---Grid多选/全选 ExtJS4学习笔记(九)---ExtJS4 EditGrid(可编辑的Grid) ...

    ExtJS(ajax框架) 4.2.1

    ExtJs最开始基于YUI技术,由开发人员 JackSlocum开发,通过参考JavaSwing等机制来组织可视化组件,无论从UI界面上CSS样式的应用,到数据解析上的异常处理,都可算是 一款不可多得的JavaScript客户端技术的精品。 ...

    轻松搞定Extjs_原创

    一、Extjs的组件结构远比我们想象的复杂 46 二、组件分类 47 三、组件的生命周期 48 四、组件渲染方法render 50 五、小结 52 第九章:按钮与日期选择器 53 一、开始组件学习之旅 53 二、被设计得面目全非的按钮 53 ...

    深入浅出ExtJS第2版

    深入浅出ExtJS第2版+源码..1 下载EXT发布包 1 1.2 如何查看EXT自带的API和示例 1 1.3 为什么有些示例必须放在服务器上 才能看到效果 2 1.4 Hello World 2 1.4.1 直接使用下载的发布包 2 1.4.2 在项目中使用EXT...

    精通JS脚本之ExtJS框架.part2.rar

    本书共分17章,分别介绍了JavaScript的对象编程、JavaScript浏览器对象模型和事件机制、ExtJS的核心类库和组件、ExtJS的事件处理方式、设计进度条、设计工具栏和菜单栏、设计面板、设计表格、设计表单、设计数据表、...

    精通JS脚本之ExtJS框架.part1.rar

    本书共分17章,分别介绍了JavaScript的对象编程、JavaScript浏览器对象模型和事件机制、ExtJS的核心类库和组件、ExtJS的事件处理方式、设计进度条、设计工具栏和菜单栏、设计面板、设计表格、设计表单、设计数据表、...

    Ext Js权威指南(.zip.001

    7.5.7 store的分页 / 359 7.5.8 store的排序:ext.util.sorter与ext.util.sortable / 360 7.5.9 store的过滤:ext.util.filter / 363 7.5.10 store的分组:ext.util.grouper / 363 7.5.11 树节点:ext.data....

    EfsFrame(java开发框架) v2.2 源代码.rar

    c)修正分页列表中下面分页条中 分页那里直接输入数字,回车不跳页的问题; d)修改 一个form中同时存在两个datetime的input时,第二个不能选择时分的bug; e)增加 input的 kind与datatype的自动对应关系默认对应...

    EfsFrame(net开发框架) v2.2 源代码.rar

    c)修正分页列表中下面分页条中 分页那里直接输入数字,回车不跳页的问题; d)修改 一个form中同时存在两个datetime的input时,第二个不能选择时分的bug; e)增加 input的 kind与datatype的自动对应关系默认对应...

    EfsFrame(php开发框架) 2.2.rar

    c)修正分页列表中下面分页条中 分页那里直接输入数字,回车不跳页的问题; d)修改 一个form中同时存在两个datetime的input时,第二个不能选择时分的bug; e)增加 input的 kind与datatype的自动对应关系默认对应...

    EfsFrame(php开发框架) v2.2 源代码.rar

    c)修正分页列表中下面分页条中 分页那里直接输入数字,回车不跳页的问题; d)修改 一个form中同时存在两个datetime的input时,第二个不能选择时分的bug; e)增加 input的 kind与datatype的自动对应关系默认对应...

    ExtAspNet_v2.3.2_dll

    +修正IE7下Grid分页速度慢(feedback:youwei, StevenGuan, hazardvn, gavindou, ttjacky)。 -实际上IE7下所以的回发都慢,原因是客户端的Base64编码速度慢,已经使用encodeURIComponent来代替Base64编码。 -俄语...

    ExtAspNet v2.2.1 (2009-4-1) 值得一看

    -Grid中TemplateField生成到页面中控件具有唯一ID,例如Grid1_ct5_Label2,Grid1_ct6_Label2(feedback:geruger)。 +2009-09-27 v2.1.2 -为Tree控件增加GetExpandAllNodesReference和...

Global site tag (gtag.js) - Google Analytics