• ext:grid分页,列宽度自动填满grid宽度


     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) {
     }
    %>

  • 相关阅读:
    Java [Leetcode 190]Reverse Bits
    Java [Leetcode 88]CMerge Sorted Array
    Java [Leetcode 160]Intersection of Two Linked Lists
    Java [Leetcode 111]Minimum Depth of Binary Tree
    Java [Leetcode 225]Implement Stack using Queues
    D365 FO 视图Computed字段
    D365 FO最佳实践BP(五)-Display 方法缓存
    D365 FO最佳实践BP(四)-EDT未迁移
    How to change comment
    How to force to Fullscreen Form
  • 原文地址:https://www.cnblogs.com/zhwl/p/3850152.html
Copyright © 2020-2023  润新知