在这篇文章里介绍了如何将grid扩展行，通常在很多的新闻网站，你只能够看见标题信息，或者看到的将内容信息截取的，无论哪样，你都无法一目了然的浏览详细内容，除非你打开新的页面。这里向大家介绍了Ext自带扩展grid行所实现的惊人的效果。实现功能就是在行的前面定义了一个加号，当点这个加号时就会在紧接当前行的下方显示你定义的任何信息，特别是详细信息。效果非常精美绝伦。
先看看效果图吧
上面是grid列表显示的结果，注意看每行前面的小加号图标，这个小图标就是查看详细内容的按钮，点这个加号小图标就会出现如下所示的效果图
是不是非常酷的效果
下面把具体的客户端的实现代码张贴出来,后台代码和本系列的前几篇是一样的,唯一不同地方是将原来的表增加一个Message字段,用于存放详细内容.所以这里就不再将后台张贴出来了.
<%@ Page Language="C#" AutoEventWireup="true" CodeFile="gridRowExpander.aspx.cs" Inherits="gridRowExpander" %>
<!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 runat="server">
<title>显示详细内容</title>
<link rel="Stylesheet" type="text/css" href="ExtJS/resources/css/ext-all.css" />
<link rel="Stylesheet" type="text/css" href="ExtJS/resources/css/xtheme-green.css" />
<script type="text/javascript" src="ExtJS/adapter/ext/ext-base.js"></script>
<script type="text/javascript" src="ExtJS/ext-all.js"></script>
<script type="text/javascript" src="ExtJS/ext-lang-zh_CN.js"></script>
<style type="text/css">
.panel_icon { background-image:url(images/first.gif)}
.center_icon { background-image:url(images/house.png)}
</style>
</head>
<body>
<form id="form1" runat="server">
<div>
<script type="text/javascript">
function ready()
{
//添加下面这句，有助于当鼠标放在Ext自带的图标上时能够显示提示的功能
Ext.QuickTips.init();
var url = "jsonGrid3.aspx?Param=select";
// 扩展行 使得在每一行的第一列都有一个加号 点加号就可以得到详细信息
var expander = new Ext.grid.RowExpander
({
tpl : new Ext.Template
(
'<div style="text-align:center;background-image:url(images/22.jpg);"><br/>',
'<p><b>英文标题:</b> <span style="color:red;">{TypeEName}</span></p><br>',
'<p><b>中文标题:</b> <span style="color:green;">{TypeCName}</span></p><br>',
'<p><b>详细内容:</b><br> <span style="color:blue;text-align:center;">{Message}</span></p>',
'</div><br/>'
)
[1] [2] [3] [4] [5] 下一页
[
开发实例]
[图文]ExtJS Menu嵌套Combo时,下拉菜单被遮盖的bug的解 (myext整理，07-10)
问题很简单, 在Menu里面加入一个Combo后,下拉菜单被遮住了... 示意图: 示例代码: Js代码 function testSplitButton(){ var combo =&n……
[
开发实例]
内嵌Json的绑定GridPanel方法 (http://e…，09-20)
在本站的ExtJs的官方实例中有关于json数据的绑定方法。该方法可以远程读取json文件中的内容，十分方便。这里向大家介绍另一种方法 内嵌Json的绑定GridPanel方法。演示(demo)地址在文章最后.效果图如下：源代码包括：0005_json_include.html0005_json_i……
[
开发实例]
直接在页面上显示日期控件的方法(2) (http://e…，09-20)
官方的例子有介绍如何将DateField添加到FormPanel中。但有很多时候我们就只是想用漂亮的ExtJs的日期控件，而不想用它的FormPanel.下面例子可以轻松帮你实现。此方法相比方法一增加了简单初始化日期功能。演示(demo)地址在文章最后.效果图如下:源代码包括 0001_render……
[
开发实例]
第五篇,经典布局 (myext整理，04-05)
先看看布局的效果 借用靓女的靓照就可以让窗体显得更加漂亮了,秘诀!下面再看看源代码吧.<form id=form1 runat=server><img id=leftImg src=../Images/0.jpg width=150 height=150 alt= /&g……
[
开发实例]
ExtJS 扩展TimeField,设置时间区域 (佚名，08-06)
需求是能动态设置TimeField的最大值和最小值: 首先观察源码,没有发现相关的接口. Js代码 // private initComponent : function(){ &nbs……
