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. 34.Find First and Last Position of Element in Sorted Array---头条面试题、《剑指offer》38

    题目链接 题目大意:找出一串升序数组中target值的起始下标和结束下标值,如果不存在则返回{-1,-1}. 解法一:用二分查找,找到数组中的target,然后找其左边和右边的target下标值.代码 ...

  2. 关于分布式Session 的几种实现方式

    分布式Session的几种实现方式 1.基于数据库的Session共享 2.基于NFS共享文件系统 3.基于memcached 的session,如何保证 memcached 本身的高可用性? 4. ...

  3. 20行js代码制作网页刮刮乐

    分享一段用canvas和JS制作刮刮乐的代码,JS部分去掉注释不到20行代码效果如下 盖伦.jpg 刮刮乐.gif HTML部分 <body> ![](img/gailun.jpg) &l ...

  4. cordova 从xcode7迁移到xcode8

    环境以开发流程 当前项目使用的cordova环境 cordova 6.1.1 cordova-ios 3.9.2(vs15自动装的不知道在哪能改,所以考虑升级到vs17,能够手动指定) cordova ...

  5. 《深入理解Java虚拟机》笔记--第十二章、Java内存模型与线程

    主要内容:虚拟机如何实现多线程.多线程之间由于共享和竞争数据而导致的一系列问题及解决方案. Java内存模型:     Java内存模型的主要目标是定义程序中各个变量的访问规则,即在虚拟机中将变量存储 ...

  6. python redis-string、list、set操作

    string操作 redis中的string在内存中都是按照一个key对应一个value来存储的 方法: set() 方法 : 写入一条数据 mset() 方法: 写入多条数据 , 可是Key-Val ...

  7. LightOJ - 1010 Knights in Chessboard(规律)

    题目链接:https://vjudge.net/contest/28079#problem/B 题目大意:给你一个nxm的棋盘,问你最多可以放几个骑士让他们互相攻击不到.骑士攻击方式如下图: 解题思路 ...

  8. @PathVariable @RequestParam @RequestBody 的区别

    转载自:@RequestParam @RequestBody @PathVariable 等参数绑定注解详解 简介: handler method 参数绑定常用的注解,我们根据他们处理的Request ...

  9. csu 1769(数学)

    1769: 想打架吗?算我一个!所有人,都过来!(3) Time Limit: 2 Sec  Memory Limit: 128 MBSubmit: 262  Solved: 76[Submit][S ...

  10. day6 os模块

    OS模块 提供对操作系统进行调用的接口     (1)os.getcwd()   获取当前工作目录,即当前python脚本工作的目录路径 >>> os.getcwd()     获取 ...