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

最新推荐文章于 2024-04-23 11:04:30 发布

转载最新推荐文章于 2024-04-23 11:04:30 发布 · 354 阅读

文章标签：

本文介绍如何使用ExtJS创建一个包含动态加载数据的网格面板，并实现分页、自适应列宽等功能。通过示例代码展示了如何配置ColumnModel、Store及GridPanel组件。

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