无论是界面之美，还是功能之强，ext的表格控件都高居榜首。
单选行，多选行，高亮显示选中的行，推拽改变列宽度，按列排序，这些基本功能咱们就不提了。
自动生成行号，支持checkbox全选，动态选择显示哪些列，支持本地以及远程分页，可以对单元格按照自己的想法进行渲染，这些也算可以想到的功能。
再加上可编辑grid，添加新行，删除一或多行，提示脏数据，推拽改变grid大小，grid之间推拽一或多行，甚至可以在tree和grid之间进行拖拽，啊，这些功能实在太神奇了。更令人惊叹的是，这些功能竟然都在ext表格控件里实现了。
呵呵~不过ext也不是万能的，与fins的ecside比较，ext不能锁定列（土豆说1.x里支持锁定列，但是2.0里没有了，因为影响效率。），也没有默认的统计功能，也不支持excel，pdf等导出数据。另外fins说，通过测试ecside的效率明显优于ext呢。:)
光说不练不是我们的传统，让我们基于examples里的例子，来自己搞一个grid看看效果，同时也可以知道一个grid到底需要配置些什么东西。
html例子是lingo-sample/1.1.1目录下的02-01.html，把这个目录copy到ext-1.x的example目录下，就可以直接打开观看效果。
首先，Ext.grid.Grid已经不见了，咱们需要用Ext.grid.GridPanel。需要传递的参数也有少许区别。
vargrid=newExt.grid.GridPanel({el:'grid',ds:ds,cm:cm});看到了吗？负责指定渲染位置的id放到了{}里边，对应的名字是el。似乎ext2里对这些参数进行了统一，比以前更整齐了。
因为其他地方都一样，我就不多说了，html例子在是lingo-sample/2.0目录下的02-01.html。
从截图上看，少了斑马条，下边多了一条线，应该只是css有所不同吧。
默认情况下，两个版本的grid都可以拖拽列，也可以改变列的宽度。不知道怎么禁用这两个功能呢。
最大的不同应该是1.x里默认支持的右键效果，在2.0里不见了。
按shift和ctrl多选行的功能倒是都有。区别是，全选后，1.x必须按住ctrl才能取消，直接单击其中一个行，不会取消全选功能，而2.0里只需要任意点击一行，就取消全选，只选中刚才点击的那行。
哦，哦，那颜色不要也算是区别吧。
其实很简单，需要小小改动一下列模型。
varcm=newExt.grid.ColumnModel([{header:'编号',dataIndex:'id',sortable:true},{header:'名称',dataIndex:'name'},{header:'描述',dataIndex:'descn'}]);如果你英语还可以，或者懂得查字典的话（软件翻译也算），那么你就会知道，多出来的这个sortable属性应该是可以排序的意思。现在咱们试一下改动后的效果。
看到了没有？编号的标题上有个小小的箭头，表格里的数据也是按照编号做的逆序排列，如此简单，我们就实现了按列排序。
很有趣的是，2.0加上sortable以后，1.x那种右键功能也跑回来了，不过它用的不是右键，而是下拉菜单似的实现方式。
什么？你问为什么其他两列无法排序？！嗯，好像是因为你还没有给另两列添加sortable属性。
怎么加？！按编号那样加就行了。
还是不会？！-_-。
varcm=newExt.grid.ColumnModel([{header:'编号',dataIndex:'id',sortable:true},{header:'名称',dataIndex:'name',sortable:true},{header:'描述',dataIndex:'descn',sortable:true}]);这样所有列都可以排序了。什么？怎么取消排序？！-_-。
嘿，希望你跟我一样，不愿意只能在grid里看到文字，至少不是单调的，毫无特色的文字。有些人就问了，如果我想改变一下单元格里显示内容，应该怎么办呢？
非常不幸的是，ext的作者，伟大的jack早已经想到了，说真的，你没想到的，他都想到了，不只想到了，他还做出来了。
唉，这就是区别啊。为啥你就不能动手做些东西呢？就知道向别人要这要那，唉。
首先，我宣布，偶们的数据要扩充啦，每个人要加上一个性别字段。
你可以试试不改其他的部分，显示的结果是不会改变的，因为原始数据要经过ds的处理才能被grid使用，那么下一步我们就开始修改ds，把性别加进去。
vards=newExt.data.Store({proxy:newExt.data.MemoryProxy(data),reader:newExt.data.ArrayReader({},[{name:'id'},{name:'sex'},{name:'name'},{name:'descn'}])});添加了一行{name:'sex'}，把数组的第二列映射为性别。现在grid可以感觉到sex了，嘿嘿。
不过grid还显示不了性别这列，因为咱们还没改cm。
varcm=newExt.grid.ColumnModel([{header:'编号',dataIndex:'id'},{header:'性别',dataIndex:'sex'},{header:'名称',dataIndex:'name'},{header:'描述',dataIndex:'descn'}]);到现在其实都没什么新东西，但是你不觉得光看平板字，很难分出哪个是GG哪个是MM吗？听说过红男绿女没？要是男的都加上红色，女的都变成绿色，那不是清楚多了。就像下面一样。
怎么样？是不是效果大不同了。你不会认为很难吧，嗯，确实，如果你对html和css完全搞不明白的话，劝你还是先去学学吧，对自己有信心的往下看。
varcm=newExt.grid.ColumnModel([{header:'编号',dataIndex:'id'},{header:'性别',dataIndex:'sex',renderer:function(value){if(value=='male'){return"
functionrenderSex(value){if(value=='male'){return"
renderer会传递个参数进去，咱们grid里看到的，是这个函数的返回值，怎么样，神奇吧？
同志们，你们也应该看到了，返回html就可以，是html啊，html里有的东西，你返回什么就显示什么，颜色，链接，图片，按钮，只要你愿意，整个网页都可以返回回去。还有什么做不到的？哦，你不会html，那没辙，回去学吧。
咱们先来个图片。
functionrenderSex(value){if(value=='male'){return"
functionrenderDescn(value,cellmeta,record,rowIndex,columnIndex,store){varstr="
有个同学就问啦：EXTrender的参数，是如何得到的呢。因为你讲的那些都是EXT自己内部的。它是如何把这些参数传递给render的呢？
这个问题其实比较简单，只是你们想复杂了。既然是函数，就肯定有调用它的地方，你找到GridView.js在里边搜索一下renderer，就会看到调用render的地方，这些参数都是在这里传进去的。
好，看看效果吧。
剩下的，就是发挥各位聪明才智的时候了，舞台已经搭好，看你如何表演了。
html例子，1.x版本在lingo-sample/1.1.1目录下的02-02.html，2.0的版本在lingo-sample/2.0目录下的02-02.html。
实际上行号和多选checkbox都是renderer的延伸，当然多选checkbox更酷一点儿，两者经常一起使用，所以让我们放在一起讨论好了。
只需要在cm中加上一行，这一行不会与ds中的任何数据对应，这也告诉我们可以凭空制作列，哈哈。
在之前的例子上改啦。
varcm=newExt.grid.ColumnModel([{header:'NO.',renderer:function(value,cellmeta,record,rowIndex){returnrowIndex+1;}},{header:'编号',dataIndex:'id'},{header:'性别',dataIndex:'sex'},{header:'名称',dataIndex:'name'},{header:'描述',dataIndex:'descn'}]);如吾等所愿，不指定dataIndex，而是直接根据renderer返回rowIndex+1，因为它是从0开始的，所以加个一。截图如下。
1.x的例子在lingo-sample/1.1.1/02-03.html
很遗憾的是，2.0里有自己的默认实现了，咱们不能展现自己的手工技艺了，还是乖乖使用jack提供的东东吧。
于是，在2.0里cm就变成了这幅模样。
varcm=newExt.grid.ColumnModel([newExt.grid.RowNumberer(),{header:'编号',dataIndex:'id'},{header:'性别',dataIndex:'sex'},{header:'名称',dataIndex:'name'},{header:'描述',dataIndex:'descn'}]);你绝对会同意我的意见，Jack'sworkisamazing.实在是太神奇了。看看截图就知道。
2.0的例子在lingo-sample/2.0/02-03.html
因为2.0里有checkboxSelectionModel，这样完全可以证实用别人的轮子，比自己造轮子要方便。而且咱们造的轮子完全没有jack圆。不信的话，看下面1.x里的实现。
我们一直在修改cm，这次我们也要对它动刀了，不过SelectionModel既sm也要处理一下，这是为了改变单选和多选行的方式，以前这些可以靠shift或ctrl实现，而现在这些都要与checkbox关联上了。
啦啦啦，先看图片，后看代码。
先看看具体多了什么
varsm=newExt.grid.CheckboxSelectionModel();神奇的是这个sm身兼两职，使用的时候既要放到cm里，也要放到grid中。代码如下。
varcm=newExt.grid.ColumnModel([newExt.grid.RowNumberer(),sm,{header:'编号',dataIndex:'id'},{header:'性别',dataIndex:'sex'},{header:'名称',dataIndex:'name'},{header:'描述',dataIndex:'descn'}]);vargrid=newExt.grid.GridPanel({el:'grid',ds:ds,cm:cm,sm:sm});然后你就可以得到效果啦，代码在lingo-sample/2.0/02-04.html。
理论上只需要给cm再加一列，像自动编号那样，不对应数据，只显示checkbox就可以了。难点就是checkbox与某一行被选择的时候要对应上，用checkbox选择上，sm里也要让这一行被选中，反之亦然。嗯，估计会比较复杂呢。
先放上显示checkbox的代码和截图：
如果你有一千条信息，一次都输出到grid里，然后让客户用下拉条一点儿一点儿去找吧。我们这里可是要做一个分页效果了，不用滚动屏幕，或者滚动一下就可以看到本页显示的数据，如果想看其他的只需要翻页就可以了。同志们，加强客户体验呀。
实际上，grid控件挺耗性能的，据土豆讲一个页面上放3个grid就可以感觉到响应变慢，以前看过介绍，grid里显示数据过多，听说是上千条，也会明显变慢。
所以说分页是必不可少滴，而且jack提供了方便集成分页工具条的方式，不用一下实在是太浪费了。
两步走，让grid集成分页。
从图片可以清晰的看到，在grid下边多出来一行东东，包括了前一页，后一页，第一页，最后一页，刷新，以及提示信息。而我们不过写了如下几行代码而已，神奇呀。
vargridFoot=grid.getView().getFooterPanel(true);varpaging=newExt.PagingToolbar(gridFoot,ds,{pageSize:10,displayInfo:true,displayMsg:'显示第{0}条到{1}条记录，一共{2}条',emptyMsg:'没有记录'});首先使用grid.getView().getFootPanel(true)，获得grid下边那一条，嘿嘿，人家grid就设计的这么好，脚底下专门留了地方让你放东西。我们老实不客气，把Ext.PagingToolbar放到上边，就可以显示分页工具条了。
这分页工具条可不是个摆设，你按了前一页，后一页，整个grid都要有反应才对，要不咱们费劲弄这个么东西过来干嘛呀？所以，我们在构造PagingToolbar的时候，不但告诉它，在gridFoot上显示，还告诉它，进行分页跳转的时候，要对ds也进行操作。这个ds就是grid用来获取和显示数据的，它一变整个grid都发生变化，嘿嘿~这就算共享数据模型了。厉害呀。
知道了分页的玄机，让我们揉揉眼睛，好好看看里边的参数。
最好要注意的是，这段代码必须放在grid.render()之后，估计是因为动态生成grid的dom后，才能获得对应的footPanel。
现在给出例子，1.x的例子在lingo-sample/1.1.1/02-05.html。
其实，在下，一直，对于：必须先渲染grid才能获得footPanel这事非常愤恨，你想啊，本来分页也应该属于初始化的一部分，现在却要先初始化grid，配置完毕，渲染，回过头来再从grid里把footPanel拿出来，再咕哝分页的配置。真，真，真郁闷呀。
所以2.0里的方式，简直大快民心。
vargrid=newExt.grid.GridPanel({el:'grid',ds:ds,cm:cm,bbar:newExt.PagingToolbar({pageSize:10,store:ds,displayInfo:true,displayMsg:'显示第{0}条到{1}条记录，一共{2}条',emptyMsg:"没有记录"})});ds.load();嘿嘿，加一个bbar的参数就可以了，bbar就是bottombar啦，底端工具条。
不过还是要注意一点，与1.x中不同的是，如果配置了分页工具条，ds.load()就必须在构造grid以后才能执行，否则分页工具条会不起作用。看来分页工具条会把自己和ds做一些关联，来完成与grid共享数据模型的。
对了，还有一点不同，1.x中分页条不会随着浏览器的大小改变，自动放缩，这点在2.0中也解决了。
2.0的例子在lingo-sample/2.0/02-05.html。
grid会每次都显示ds中所有的数据，咱们没法利用静态数据好好演示分页，于是，必须写后台脚本，让ext与后台进行数据交互才能看到真实的分页效果。
咱们尽量在原来的基础上修改啊，把注意力集中在关键部位，一次性突破。
我不会其他语言，后台就用jsp写啦。有个好消息是只要返回的数据格式一样，ext才不管后台是什么写的呢。也就是这样，不管你以后用什么实现后台，前台的ext代码都一样。
<%Stringstart=request.getParameter("start");Stringlimit=request.getParameter("limit");try{intindex=Integer.parseInt(start);intpageSize=Integer.parseInt(limit);Stringjson="{totalProperty:100,root:[";for(inti=index;i
结果经过了一番折腾，我们的jsp已经确定可以返回我们所需要的数据了。现在我们可以忘掉后台是用什么语言写的了，直接切入ext代码，看看它是怎么样才能跑去后台获得这些数据呢？
因为引入了json作为数据传输格式，这次我们要对ext代码进行一次大换血了，请做好思想准备。
最后，我们就可以使用分页条上那些按钮试试分页了。呵呵~就这么简单。
1.x的例子在lingo-sample/1.1.1/02-06.html，jsp文件在lingo-sample/1.1.1/grid.jsp，下面是它的截图：
有趣的是，1.x中，不需要为div指定高度，它自己就知道如何显示，不晓得为什么2.0里不这样做呢。
2.0的例子在lingo-sample/2.0/02-06.html，jsp文件在lingo-sample/2.0/grid.jsp，下面是它的截图：
我的意思是，grid除了FootPanel以外，还有HeaderPanel，意思就是头顶上的面板。我们把分页条放在上面也不会有任何问题。1.x中的代码仅仅是将getFooterPanel改成getHeaderPanel，这样分页条就跑到上头去了。
2.0就更简单了，只需要改一个字母，b->t，呵呵~，让原来的bbar（bottombar）变成tbar（topbar）就可以让我们的工具条登天了。
呃，当然你可以让上下都加上分页条，反正它们最后都是共享一个ds，功能不会有任何问题哈。吼吼。