EXT 中的Grid实例

来源：互联网发布：类似it桔子编辑：程序博客网时间：2024/05/18 02:59

为Grid配置了Ext.grid.CheckboxSelectionModel()属性，但达不到想的效果，去查看了源码，也没看出个所以然，请教各位前辈，用什么方法可以实现以下两种效果：

1.点击记录只改变背景色，不改变选择状态。要想选中，只能去点击checkbox
2.点击记录，选中该记录，但不改变其它已选中记录的状态。

源码：

gridJson.js

// ext-grid.2.x

Ext.onReady(function(){


// 定义一个checkBox
var sm = new Ext.grid.CheckboxSelectionModel();
sm.handleMouseDown = Ext.emptyFn;

// 定义一个ColumnModel，表头中有四列
var cm = new Ext.grid.ColumnModel([
            sm,
  {header:'编号',dataIndex:'id'},
  {header:'名称',dataIndex:'name'},
  {header:'描述',dataIndex:'descn'}
]);

/*===================== 判断红男绿女 =====================*/
function myRenderSex(value){
  if (value == 'male'){
   return "<span style='color:red;font-weight:bold;'> 红男 </span><img src='/images//male.png' />";
  }else{
   return "<span style='color:green;font-weight:bold;'> 绿女 </span><img src='/images//fmale.png' />";
  }
}

/*===================== 察看详细 =====================*/
function renderDescn(value, cellmeta, record, rowIndex, columnIndex, store) {
  var str = "<input type='button' value='查看详细信息' onclick='alert(/"" +
   "这个单元格的值是：" + value + "//n" +
   "这个单元格的配置是：{cellId:" + cellmeta.cellId + ",id:" + cellmeta.id + ",css:" + cellmeta.css + "}//n" +
   "这个单元格对应行的record是：" + record + "，一行的数据都在里边//n" +
   "这是第" + rowIndex + "行//n" +
   "这是第" + columnIndex + "列//n" +
   "这个表格对应的Ext.data.Store在这里：" + store + "，随便用吧。" +
   "/")'>";
  return str;
}

/*===================== 二维数组 =====================*/
/* ArrayData:添加数据 */
var data = [
  ['1','name1','descn1'],
  ['2','name2','descn2'],
  ['3','name3','descn3'],
  ['4','name4','descn4'],
  ['5','name5','descn5']
];

/* ArrayReader
* ds要对应两个部分：proxy和reader。proxy告诉我们从哪里获得数据，reader告诉我们如何解析这个数据。
* Ext.data.MemoryProxy，它是专门用来解析js变量的。你可以看到，我们直接把data作为参数传递进去了。
*/
var ds = new Ext.data.Store({
  /*
  proxy: new Ext.data.MemoryProxy(data),
  reader: new Ext.data.ArrayReader({}, [
   {name: 'id',mapping: 0},
   {name: 'sex',mapping: 1},
   {name: 'name',mapping: 2},
   {name: 'descn',mapping: 3}
  ])
  */
  proxy: new Ext.data.HttpProxy({url:'gridJsonData.jsp'}),
  reader: new Ext.data.JsonReader({
   totalProperty: 'totalProperty',
   root: 'root'
   }, [
   {name: 'id'},
   {name: 'name'},
   {name: 'descn'}
  ])
});

/* 装配 */
/*
  注意：Ext.grid.Grid的第一个参数是渲染的id，
  对应在html里应该有一个 <div id="grid"></div>的东西，这样grid才知道要把自己画到哪里。
  创建完grid以后，还要用grid.render()方法，让grid开始渲染，这样才能显示出来。
*/

cm.defaultSortable = true; // 设置列可排序

})

gridJsonData.jsp

   <%
   String start = request.getParameter("start");
   String limit = request.getParameter("limit");
   //String start = "0";
   //String limit = "100";
   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) {
    }
   %>

grid.jsp

<%@ page contentType="text/html; charset=gb2312" language="java" import="java.sql.*" errorPage="" %>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<title>Grid</title>
  
  <script type="text/javascript" src="http://www.cnblogs.com/extPlus/release2/js/ext-base.js"></script>
  <script type="text/javascript" src="http://www.cnblogs.com/extPlus/release2/js/ext-all.js"></script>
  <script type="text/javascript" src="http://www.cnblogs.com/extPlus/release2/js/ext-lang-zh_CN.js"></script>

<link rel="stylesheet" type="text/css" href="http://www.cnblogs.com/extPlus/release2/resources/css/ext-all.css" />
  <link rel="stylesheet" type="text/css" href="http://www.cnblogs.com/extPlus/release2/css/ext-patch.css" />

  
  <script type="text/javascript" src="gridJson.js"></script>

</head>

<body>