zoukankan      html  css  js  c++  java
  • 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) {
     }
    %>

  • 相关阅读:
    js 改变颜色值
    React之使用Context跨组件树传递数据
    App.js实现使用js开发app的应用,此文是中文文档
    转: CSS3 @media 用法总结
    转: 如何用手机访问电脑本地 localhost 网页或者服务器, 以调试web项目
    js 替换字符串中所有匹配的字符
    转:display:flex不兼容Android、Safari低版本的解决方案 【flex布局】
    转:HTML5页面如何在手机端浏览器调用相机、相册功能
    文本相似度度量
    idea中maven中jdk版本的选择(转)
  • 原文地址:https://www.cnblogs.com/zhwl/p/3850152.html
Copyright © 2011-2022 走看看