EXT 中的Grid实例

starbhhc

浏览: 654728 次
性别:
来自: 深圳

最近访客更多访客>>

hyw100200

njdccy

yinjl

Damon_admin

博主相关

博客

微博

相册

留言

关于我

文章分类

社区版块

存档分类

博客分类：

web前端

EXT json JSP CSS SQL

为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 + "file://n/" +
   "这个单元格的配置是：{cellId:" + cellmeta.cellId + ",id:" + cellmeta.id + ",css:" + cellmeta.css + "}\\n" +
   "这个单元格对应行的record是：" + record + "，一行的数据都在里边file://n/" +
   "这是第" + rowIndex + "行file://n/" +
   "这是第" + columnIndex + "列file://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; // 设置列可排序

var grid = new Ext.grid.GridPanel({
el: 'grid',
ds: ds,
cm: cm,
//sm: sm，
// 定义分页
bbar: new Ext.PagingToolbar({
   pageSize: 10,
   store: ds,
   displayInfo: true,
   displayMsg: '显示第 {0} 条到 {1} 条记录，一共 {2} 条',
   emptyMsg: "没有记录"
     }),
sm: sm,
title: "Grid 例子",
height: 300
});

grid.on('rowclick', function(grid,t) {
if(sm.isSelected(t))
   sm.deselectRow(t);
else
   sm.selectRow(t,true);
});

ds.load({params:{start:0, limit:10}});

grid.render();

})

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>

<table width="600" border="0" align="center" cellpadding="0" cellspacing="0">
<tr>
<td >测试</td>
</tr>

<tr>
<td >
<div id="grid"></div>
</td>
</tr>

</table>
</body>
</html>

分享到：

ExtJS2.0与java服务器交互 | ORACLE常用DBA经典语句

2010-07-06 10:54
浏览 1089
评论(0)
分类:Web前端
查看更多

发表评论

您还没有登录,请您登录后再发表评论

最近访客更多访客>>

博主相关

文章分类

社区版块

存档分类

最新评论