var cm = new Ext.grid.ColumnModel([{
      header : '编号',
      dataIndex : 'id'
     }, {
      header : '名称',
      dataIndex : 'name'
     }, {
      header : '描述',
      dataIndex : 'descn'
     }]);
   var store = new Ext.data.Store({
      proxy : new Ext.data.HttpProxy({
         url : 'data.jsp'
        }),
      reader : new Ext.data.JsonReader({
         totalProperty : 'totalProperty',
         root : 'root'
        }, [{
           name : 'id'
          }, {
           name : 'name'
          }, {
           name : 'descn'
          }])

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

var grid = new Ext.grid.GridPanel({
      renderTo : Ext.getBody(),
      ds : store,
      cm : cm,
      autoHeight : true, //这样grid才能全部显示行,不用滚动
      viewConfig : {
       forceFit : true //让grid的列自动填满grid的整个宽度,不用一列一列的设定宽度。
      },
      bbar : new Ext.PagingToolbar({
         pageSize : 20,
         store : store,
         displayInfo : true,
         displayMsg : '显示第 {0} 条到 {1} 条记录,一共 {2} 条',
         emptyMsg : "没有记录"
        })
     });

还有一个属性,设置表格中某一列的宽度自适应,填充grid剩余的宽度。

cm中要设置id:

var cm = new Ext.grid.ColumnModel([{
      header : '编号',
      dataIndex : 'id'
     }, {
      header : '名称',
      dataIndex : 'name'
     }, {
      id : 'description',
      header : '描述',
      dataIndex : 'descn'
     }]);

然后在grid的初始配置中加上:
autoExpandColumn : 'description',  //先在cm中给列加上id,然后设置grid要自动适应的列的id

jsp代码:

<%
 String start = request.getParameter("start");
 String limit = request.getParameter("limit");
 try {
  int index = Integer.parseInt(start);
  int pageSize = Integer.parseInt(limit);
  String json = "{totalProperty:100,root:[";
  for (int i = index; i < pageSize + index; i++) {
   json += "{id:" + i + ",name:'name" + i + "',descn:'descn"
   + i + "'}";
   if (i != pageSize + index - 1) {
    json += ",";
   }
  }
  json += "]}";
  response.getWriter().write(json);
 } catch (Exception ex) {
 }
%>

ext:grid分页,列宽度自动填满grid宽度的更多相关文章

  1. [WP8] ListBox的Item宽度自动填满

    [WP8] ListBox的Item宽度自动填满 范例下载 范例程序代码:点此下载 问题情景 开发WP8应用程序的时候,常常会需要使用ListBox作为容器来呈现各种数据集合.但是在ListBox呈现 ...

  2. css布局------左边宽度不定,右边宽度自动填满剩余空间

    HTML <div class="container"> <div class="left"></div> <div ...

  3. li 水平排列并自动填满 ul

    找了li 如何水平排列并自动填满 ul,同时 li 宽度平均?资料,里面有提到"请用js动态计算保证兼容性", 因为我想实现的是,水平滚动条,ul的上级div是固定的宽度1000p ...

  4. 两个DIV,左DIV宽度固定,右DIV自动填满剩余空间

    <style type="text/css"> #main{ width:98%; } #sidebar{ float:left; width:200px; backg ...

  5. -webkit-box 高度自动填满

    <style> .box{ display: -webkit-box; -webkit-box-orient: vertical; height: 200px; background: # ...

  6. 手机H5,用Jquery使图片自动填满两栏式排版

    遇上这样的排版,手机的解象度都不同,假如只用CSS3根本就做不出这样的排版:因此要用Jquery. 1. HTML <div class="postImgCenterCrop" ...

  7. datagridview随窗体的大小而变,表格填满控件

    在C#winform布局的时候,我们拖一个datagridview到窗体上面,将datagridview调整为适合窗体的大小,但是我们运行之后,点击最大化按钮的时候,却发现datagridview的大 ...

  8. Ext4.1 Grid 分页查询

    转载:http://blog.csdn.net/zyujie/article/details/16362747 最近用Ext4.1自己做了做项目的练习:把一些知识点,在这里记录下来了! 上面一个for ...

  9. LigerUi中为Grid表加上序号,并调整适当宽度!(实例)

    LigerUi中为Grid表加上序号,并调整适当宽度!(实例) dataAction: 'server', pageSize: 20, toolbar: {},           url: 'ndl ...

随机推荐

  1. hdu 2475 BOX (splay)

    版权声明:本文为博主原创文章,未经博主允许不得转载. hdu 2475 Splay树是一种神奇的东西... 题意: 有一些箱子,要么放在地上,要么放在某个箱子里面 . 现在有两种操作: (1) MOV ...

  2. openjudge-NOI 2.6-2985 数字组合

    题目链接:http://noi.openjudge.cn/ch0206/2985/ 题解: 跟背包问题有点相似,暂且算背包型DP吧,虽然是一道递推题…… fj表示和为j时的结果,得: 即为j减去每一个 ...

  3. c++环境配置 Eclipse+mingw-get-setup

    1,到官网下载eclipse  和  mingw-get-setup 2,先安装eclipse,然后等着... 3,再安装mingw-get-setup, 等待...安装完成后打开,选择basic s ...

  4. python中的pydoc

    在终端上输入pydoc会显示以下信息 pydoc - the Python documentation tool pydoc <name> ... Show text documentat ...

  5. Linux软件管理器(如何使用软件管理器来管理软件)2---安装及管理Linux应用程序

    安装及管理Linux应用程序 Linux应用程序的组成1.普通的可执行程序文件,一般保存在/usr/bin目录中,普通用户即可执行.2.服务器程序.管理程序文件,一般保存在/usr/sbin目录中,需 ...

  6. CentOS系统yum源配置修改、yum安装软件包源码包出错解决办法apt.sw.be couldn't connect to host

    yum安装包时报错: Could not retrieve mirrorlist http://mirrorlist.repoforge.org/el6/mirrors-rpmforge error  ...

  7. MongoDB权威指南--笔记

    mongodb并不具备一些在关系型数据库中很普遍的功能,如连接和复杂的多行事务. 集合-->文档-->id id在文档所属的集合中是唯一的. db.help()查看数据库级别的帮助,db. ...

  8. kubeadm高可用master节点部署文档

    kubeadm的标准部署里,etcd和master都是单节点的. 但上生产,至少得高可用. etcd的高可用,用kubeadm微微扩散一下就可以. 但master却官方没有提及. 于是搜索了几篇文档, ...

  9. beego离线安装及运行

    官网: https://beego.me/ 由于公司上不了网,啥都得下载到本地来弄. go的安装不多说了,GOPATH要设置好的. 先离线下载好https://github.com/astaxie/b ...

  10. scrapy 学习笔记1

    最近一段时间开始研究爬虫,后续陆续更新学习笔记 爬虫,说白了就是获取一个网页的html页面,然后从里面获取你想要的东西,复杂一点的还有: 反爬技术(人家网页不让你爬,爬虫对服务器负载很大) 爬虫框架( ...