Ext:GridPanel 显示数据

// 分页大小
 var pageSize = 20;
 // 字段
 var fields = ["ID", "roleName", "createTime", "isEnable", "descn"];
 // 记录
 var record = new Ext.data.Record.create([{
    name : "ID"
   }, {
    name : "roleName"
   }, {
    name : "createTime"
   }, {
    name : "isEnable"
   }, {
    name : "descn"
   }]);
 // 定义数据源
 var roleStore = new Ext.data.Store({
    // 代理
    proxy : new Ext.data.HttpProxy({
       url : Action.sys.RoleMngAction.DO_GET_ALL,
       method : "POST"
      }),
    // 解析器
    reader : new Ext.data.JsonReader({
       fields : fields,
       root : "data",
       id : "ID",
       totalProperty : "totalCount"
      }, record)
   });
 // 数据加载时分页
 roleStore.load({
    params : {
     start : 0,
     limit : pageSize
    }
   });
 // 切换显示条数下拉框
 var pageSizeCombo = new Ext.form.ComboBox({
    fieldLabel : "标签",
    readOnly : true,
    editable : false,// 禁止编辑
    emptyText : "选择",
    triggerAction : 'all',
    lazyRender : true,
    mode : 'local',
    isEnableKeyEvents : true,
    forceSelection : false,
    typeAhead : true,
    store : new Ext.data.ArrayStore({
       fields : ['size', 'sizeText'],
       data : [[5, '5'], [10, '10'], [20, '20'],
         [30, '30'], [40, '40'], [50, '50'],
         [60, '60'], [70, '70'], [80, '80'],
         [90, '90'], [100, '100']]
      }),
    valueField : 'size',
    displayField : 'sizeText',
    width : 49,
    value : pageSize
   });
 var lastSelectedValue = null;
 pageSizeCombo.on("beforeselect", function(combo, record, index) {
    lastSelectedValue = combo.getValue();
   });
 pageSizeCombo.on("select", function(combo, record, index) {
    if (lastSelectedValue != combo.getValue()) {
     sysRolerGridRefresh();
    }
   });
 // 切换每页显示的条数
 function sysRolerGridRefresh() {
  roleStore.load({
     params : {
      start : 0,
      limit : pageSizeCombo.getValue()
     }
    });
  bottomBar.setPageSize(pageSizeCombo.getValue());
  bottomBar.bindStore(roleStore, true);
 }
 // 分页条
 var bottomBar = new Ext.PagingToolbar({
    store : roleStore,
    pageSize : pageSize,
    displayInfo : true,
    displayMsg : '当前记录 {0} -- {1} 条 共 {2} 条记录',
    emptyMsg : "没有记录可显示",
    prevText : "上一页",
    nextText : "下一页",
    refreshText : "刷新",
    lastText : "最后页",
    firstText : "第一页",
    beforePageText : "当前页",
    afterPageText : "共{0}页",
    items : ["-", "", "", "每页显示", " ", pageSizeCombo, " ", "条"]
   });
 // 右键菜单
 var rightMenu = new Ext.menu.Menu({
    items : [{
       text : '刷新会员组',
       iconCls : 'refreshicon',
       handler : refreshFn
      }]
   });
 var sm = new Ext.grid.CheckboxSelectionModel();

 // 列头
 var cm = new Ext.grid.ColumnModel([sm, {
    header : "编号",
    tooltip : "会员组编号",
    dataIndex : "ID",
    sortable : true
   }, {
    header : "会员组",
    tooltip : "会员组",
    dataIndex : "roleName",
    sortable : true
   }, {
    header : "创建时间",
    tooltip : "创建时间",
    dataIndex : "createTime",
    sortable : true
   }, {
    header : "状态",
    tooltip : "账号状态",
    dataIndex : "isEnable",
    renderer : function(val) {
     if (!val) {
      return "<font color=red style='font-size:12px;'>不可用</font>";
     } else {
      return "<font color=green style='font-size:12px;'>可用</font>";
     }
    },
    sortable : true
   }, {
    header : "描述",
    tooltip : "描述",
    dataIndex : "descn",
    renderer : function(val) {
     if (val == "") {
      return "未描述";
     } else {
      return val;
     }
    },
    sortable : true
   }, {
    header : "操作",
    tooltip : "操作",
    dataIndex : "ID",
    width : 60,
    align : "center",
    renderer : function(value, metaData, record, rowIndex,
      colIndex, store) {
     var contentId = Ext.id();
     var btn = createGridButton.defer(1, this, [contentId]);
     function createGridButton() {
      var opBtn = new Ext.Button({
         text : '编辑',
         iconCls : 'editicon',
         width : 60,
         handler : modifyRole.createCallback(record)
        }).render(sysContainer, contentId);
      return opBtn;

     }
     return ('<div id="' + contentId + '"/>');
    }
   }]);

 // 工具栏
 var toolBar = new Ext.Toolbar(["", "-", "", {
    text : "添加",
    tooltip : "添加会员组",
    iconCls : "addicon",
    handler : addRole
   }, "-", "", {
    text : "删除",
    tooltip : "删除会员组",
    iconCls : "deleteicon",
    handler : delRole
   }, "-", "", {
    text : "刷新",
    tooltip : "刷新会员组",
    iconCls : "refreshicon",
    handler : refreshFn
   }]);

 // 表格
 var RoleGrid = new Ext.grid.GridPanel({
    store : roleStore,
    cm : cm,
    sm : sm,
    frame : false,
    loadMask : true,
    autoScroll : true,
    border : false,
    stripeRows : true,
    loadMask : {
     msg : '正在加载数据，请稍侯……'
    },
    viewConfig : {
     columnsText : "显示/隐藏列",
     sortAscText : "正序排列",
     sortDescText : "倒序排列",
     forceFit : true
    },
    bbar : bottomBar,
    tbar : toolBar,
    listeners : {
     "contextmenu" : function(e) {
      e.stopEvent();
     },
     "rowcontextmenu" : function(grid, rowIndex, e) {
      e.stopEvent();
      rightMenu.showAt(e.getXY());
     }
    }
   });
 GridAdd(node, RoleGrid);

 // 刷新
 function refreshFn() {
  roleStore.reload();
 }

 // 添加会员组
 function addRole() {
  Global.Utils.CheckJS(Global.Statics.Res.users.role.add, function() {
     doAddRole.defer(100, this, [function() {
          roleStore.reload();
         }, function() {
          Global.Statics.Mask.hide();
         }]);
    }, true,"正在打开....请稍后....");
 }

 // 修改会员组
 function modifyRole(record) {
  Global.Utils.CheckJS(Global.Statics.Res.users.role.modify, function() {
     updateRole.defer(100, this, [record,function() {
          roleStore.reload();
         }, function() {
          Global.Statics.Mask.hide();
         }]);
    }, true,"正在打开....请稍后....");
 }

 // 删除会员组
 function delRole() {
  var array = sm.getSelections();
  if (array.length == 0) {
   Ext.Msg.alert("提示", "请先选择一行!");
   return;
  }
  var str = '';
  for (var i = 0; i < array.length; i++) {
   str = str + array[i].get("ID") + ",";
  }
  str = str.substring(0, str.length - 1);
  Ext.Msg.confirm("警告", "您确定要删除吗？", function(btn) {
     if ('yes' == btn) {
      Ext.Ajax.request({
         url : Action.sys.RoleMngAction.DO_DEL,
         waitTitle : '请稍等.....',
         waitMsg : '正在删除中.....',
         success : function()// 删除成功
         {
          Ext.quick.msg("提示", "成功删除了"
              + array.length + "条信息");
          roleStore.reload();
         },
         failure : function() {// 删除失败！
          Ext.Msg.alert('提示', '删除失败！');
         },
         params : {
          "json" : str
         }
        });
     }
    })
 }

 

 

 

 

 

----------------后台代码-------------------

public static String listPage(PageResult pageResult) {
  List<WytRole> list = pageResult.getList();
  JSONObject o = new JSONObject();
  o.put("totalCount", pageResult.getTotalRecord());
  SimpleDateFormat sdf = new SimpleDateFormat("yyyy-MM-dd HH:mm:ss");
  JSONArray data = new JSONArray();
  for (WytRole role : list) {
   JSONObject r = new JSONObject();
   r.put("ID", role.getId());
   r.put("roleName", role.getName());
   r.put("createTime", sdf.format(role.getCreateTime()));
   r.put("isEnable", role.isEnable());
   r.put("descn", role.getDescn());
   data.add(r);
  }
  o.put("data", data);
  return o.toString();
 }