打印

ExtJS 序言二

ExtJS 序言二

2.1. 功能丰富,无人能出其右



无论是界面之美,还是功能之强,ext的表格控件都高居榜首。
单选行,多选行,高亮显示选中的行,推拽改变列宽度,按列排序,这些基本功能咱们就不提了。
自动生成行号,支持checkbox全选,动态选择显示哪些列,支持本地以及远程分页,可以对单元格按照自己的想法进行渲染,这些也算可以想到的功能。
再加上可编辑grid,添加新行,删除一或多行,提示脏数据,推拽改变grid大小,grid之间推拽一或多行,甚至可以在tree和grid之间进行拖拽,啊,这些功能实在太神奇了。更令人惊叹的是,这些功能竟然都在ext表格控件里实现了。
呵呵~不过ext也不是万能的,与fins的ecside比较,ext不能锁定列(土豆说1.x里支持锁定列,但是2.0里没有了,因为影响效率。),也没有默认的统计功能,也不支持excel,pdf等导出数据。另外fins说,通过测试ecside的效率明显优于ext呢。

2.2. 让我们搞一个grid出来耍耍吧。



光说不练不是我们的传统,让我们基于examples里的例子,来自己搞一个grid看看效果,同时也可以知道一个grid到底需要配置些什么东西。
  • 首先我们知道表格肯定是二维的,横着叫行,竖着叫列。跟设计数据库,新建表一样,我们要先设置这个表有几列,每列叫啥名字,啥类型,咋显示,这个表格的骨架也就出来了。
    ext里,这个列的定义,叫做ColumnModel,简称cm的就是它,它作为整个表格的列模型,是要首先建立起来的。
    这里我们建立一个三列的表格,第一列叫编号(code),第二列叫名称(name),第三列叫描述(descn)。
    var cm = new Ext.grid.ColumnModel([    {header:'编号',dataIndex:'id'},    {header:'名称',dataIndex:'name'},    {header:'描述',dataIndex:'descn'}    ]);看到了吧?非常简单的定义了三列,每列的header表示这列的名称,dataIndex是跟后面的东西对应的,咱们暂且不提。现在只要知道有了三列就可以了。
  • 有了表格的骨架,现在我们要向里边添加数据了。这个数据当然也是二维了,为了简便,我们学习examples里的array-grid.js里的方式,把数据直接写到js里。
    var data = [    ['1','name1','descn1'],    ['2','name2','descn2'],    ['3','name3','descn3'],    ['4','name4','descn4'],    ['5','name5','descn5']    ];很显然,我们这里定义了一个二维数据, (什么?你不知道这是二维数组?快改行吧,这里不是你该待的地方。)
    这个有五条记录的二维数组,显示到grid里就应该是五行,每行三列,正好对应这id,name,descn,在我们的脑子里应该可以想像出grid显示的结果了,为了让想像变成显示,我们还需要对原始数据做一下转化。
  • 因为咱们希望grid不只能支持array,还可以支持json,支持xml,甚至支持咱们自己定义的数据格式,ext为咱们提供了一个桥梁,Ext.data.Store,通过它我们可以把任何格式的数据转化成grid可以使用的形式,这样就不需要为每种数据格式写一个grid的实现了。现在咱们就来看看这个Ext.data.Store是如何转换array的。
    var ds = new Ext.data.Store({    proxy: new Ext.data.MemoryProxy(data),    reader: new Ext.data.ArrayReader({}, [    {name: 'id'},    {name: 'name'},    {name: 'descn'}    ])    });    ds.load();ds要对应两个部分:proxy和reader。proxy告诉我们从哪里获得数据,reader告诉我们如何解析这个数据。
    现在我们用的是Ext.data.MemoryProxy,它是专门用来解析js变量的。你可以看到,我们直接把data作为参数传递进去了。
    Ext.data.ArrayReader专门用来解析数组,并且告诉我们它会按照定义的规范进行解析,每行读取三个数据,第一个叫id,第二个叫name,第三个descn。是不是有些眼熟,翻到前面cm定义的地方,哦,原来跟dataIndex是对应的。这样cm就知道哪列应该显示那条数据了。唉,你要是能看明白这一点,那你实在是太聪明了。
    记得要执行一次ds.load(),对数据进行初始化。
    有兄弟可能要问了,要是我第一列数据不是id而是name,第二列数据不是name而是id咋办?嗯,嗯,这个使用就用mapping来解决。改改变成这样:
    var ds = new Ext.data.Store({    proxy: new Ext.data.MemoryProxy(data),    reader: new Ext.data.ArrayReader({}, [    {name: 'id', mapping: 1},    {name: 'name', mapping: 0},    {name: 'descn', mapping: 2}    ])    });

    这样如截图所见,id和name两列的数据翻转了。如此这般,无论数据排列顺序如何,我们都可以使用mapping来控制对应关系,唯一需要注意的是,索引是从0开始的,所以对应第一列要写成mapping:0,以此类推。
  • 哈哈,万事俱备只欠东风,表格的列模型定义好了,原始数据和数据的转换都做好了,剩下的只需要装配在一起,我们的grid就出来了。
    var grid = new Ext.grid.Grid('grid', {    ds: ds,    cm: cm    });    grid.render();注意:上头是ext-1.x的写法,Ext.grid.Grid的第一个参数是渲染的id,对应在html里应该有一个 <div id="grid"></div>的东西,这样grid才知道要把自己画到哪里。
    创建完grid以后,还要用grid.render()方法,让grid开始渲染,这样才能显示出来。
  • 好了,把所有代码组合到一起,看看效果吧。
    var cm = new Ext.grid.ColumnModel([    {header:'编号',dataIndex:'id'},    {header:'名称',dataIndex:'name'},    {header:'描述',dataIndex:'descn'}    ]);    var data = [    ['1','name1','descn1'],    ['2','name2','descn2'],    ['3','name3','descn3'],    ['4','name4','descn4'],    ['5','name5','descn5']    ];    var ds = new Ext.data.Store({    proxy: new Ext.data.MemoryProxy(data),    reader: new Ext.data.ArrayReader({}, [    {name: 'id'},    {name: 'name'},    {name: 'descn'}    ])    });    ds.load();    var grid = new Ext.grid.Grid('grid', {    ds: ds,    cm: cm    });    grid.render();看看吧,这就是咱们搞出来的grid了。


html例子是lingo-sample/1.1.1目录下的02-01.html,把这个目录copy到ext-1.x的example目录下,就可以直接打开观看效果。

2.3. 上边那个是1.x的,2.0稍微有些不同哦



首先,Ext.grid.Grid已经不见了,咱们需要用Ext.grid.GridPanel。需要传递的参数也有少许区别。
var grid = new Ext.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里只需要任意点击一行,就取消全选,只选中刚才点击的那行。

哦,哦,那颜色不要也算是区别吧。

2.4. 按顺序,咱们先要把常见功能讲到,让grid支持按列排序



其实很简单,需要小小改动一下列模型。
var cm = new Ext.grid.ColumnModel([{header:'编号',dataIndex:'id',sortable:true},{header:'名称',dataIndex:'name'},{header:'描述',dataIndex:'descn'}]);如果你英语还可以,或者懂得查字典的话(软件翻译也算),那么你就会知道,多出来的这个sortable属性应该是可以排序的意思。现在咱们试一下改动后的效果。

看到了没有?编号的标题上有个小小的箭头,表格里的数据也是按照编号做的逆序排列,如此简单,我们就实现了按列排序。
很有趣的是,2.0加上sortable以后,1.x那种右键功能也跑回来了,不过它用的不是右键,而是下拉菜单似的实现方式。

什么?你问为什么其他两列无法排序?!嗯,好像是因为你还没有给另两列添加sortable属性。
怎么加?!按编号那样加就行了。
还是不会?!-_-。
var cm = new Ext.grid.ColumnModel([{header:'编号',dataIndex:'id',sortable:true},{header:'名称',dataIndex:'name',sortable:true},{header:'描述',dataIndex:'descn',sortable:true}]);这样所有列都可以排序了。什么?怎么取消排序?!-_-。

2.5. 让单元格里显示红色的字,图片,按钮,你还能想到什么?



嘿,希望你跟我一样,不愿意只能在grid里看到文字,至少不是单调的,毫无特色的文字。有些人就问了,如果我想改变一下单元格里显示内容,应该怎么办呢?
非常不幸的是,ext的作者,伟大的jack早已经想到了,说真的,你没想到的,他都想到了,不只想到了,他还做出来了。
唉,这就是区别啊。为啥你就不能动手做些东西呢?就知道向别人要这要那,唉。
首先,我宣布,偶们的数据要扩充啦,每个人要加上一个性别字段。
var data = [['1','male','name1','descn1'],['2','female','name2','descn2'],['3','male','name3','descn3'],['4','female','name4','descn4'],['5','male','name5','descn5']];男女搭配,干活不累撒。而且现在中国就是男多女少,我就还没对象呢。征婚中,单身女性加(QQ)771490531详谈。
你可以试试不改其他的部分,显示的结果是不会改变的,因为原始数据要经过ds的处理才能被grid使用,那么下一步我们就开始修改ds,把性别加进去。
var ds = new Ext.data.Store({proxy: new Ext.data.MemoryProxy(data),reader: new Ext.data.ArrayReader({}, [{name: 'id'},{name: 'sex'},{name: 'name'},{name: 'descn'}])});添加了一行{name: 'sex'},把数组的第二列映射为性别。现在grid可以感觉到sex了,嘿嘿。
不过grid还显示不了性别这列,因为咱们还没改cm。
var cm = new Ext.grid.ColumnModel([{header:'编号',dataIndex:'id'},{header:'性别',dataIndex:'sex'},{header:'名称',dataIndex:'name'},{header:'描述',dataIndex:'descn'}]);到现在其实都没什么新东西,但是你不觉得光看平板字,很难分出哪个是GG哪个是MM吗?听说过红男绿女没?要是男的都加上红色,女的都变成绿色,那不是清楚多了。就像下面一样。

怎么样?是不是效果大不同了。你不会认为很难吧,嗯,确实,如果你对html和css完全搞不明白的话,劝你还是先去学学吧,对自己有信心的往下看。
var cm = new Ext.grid.ColumnModel([{header:'编号',dataIndex:'id'},{header:'性别',dataIndex:'sex',renderer:function(value){if (value == 'male') {return "<span style='color:red;font-weight:bold;'>红男</span>";} else {return "<span style='color:green;font-weight:bold;'>绿女</span>";}}},{header:'名称',dataIndex:'name'},{header:'描述',dataIndex:'descn'}]);别被吓到,这么一大段其实就是判断是男是女,然后配上颜色。你要是觉得乱,也可以这么做。
function renderSex(value) {if (value == 'male') {return "<span style='color:red;font-weight:bold;'>红男</span>";} else {return "<span style='color:green;font-weight:bold;'>绿女</span>";}}var cm = new Ext.grid.ColumnModel([{header:'编号',dataIndex:'id'},{header:'性别',dataIndex:'sex',renderer:renderSex},{header:'名称',dataIndex:'name'},{header:'描述',dataIndex:'descn'}]);实际上这个renderer属性至关重要,它的值是一个function,哦,你说不知道js里function可以这么用?那么恭喜你,现在你知道了。
renderer会传递个参数进去,咱们grid里看到的,是这个函数的返回值,怎么样,神奇吧?
同志们,你们也应该看到了,返回html就可以,是html啊,html里有的东西,你返回什么就显示什么,颜色,链接,图片,按钮,只要你愿意,整个网页都可以返回回去。还有什么做不到的?哦,你不会html,那没辙,回去学吧。
咱们先来个图片。

function renderSex(value) {if (value == 'male') {return "<span style='color:red;font-weight:bold;'>红男</span><img src='user_male.png' />";} else {return "<span style='color:green;font-weight:bold;'>绿女</span><img src='user_female.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;}来看看我们可以在render里用到多少参数:
  • value是当前单元格的值
  • cellmeta里保存的是cellId单元格id,id不知道是干啥的,似乎是列号,css是这个单元格的css样式。
  • record是这行的所有数据,你想要什么,record.data["id"]这样就获得了。
  • rowIndex是行号,不是从头往下数的意思,而是计算了分页以后的结果。
  • columnIndex列号太简单了。
  • store,这个厉害,实际上这个是你构造表格时候传递的ds,也就是说表格里所有的数据,你都可以随便调用,唉,太厉害了。

有个同学就问啦:EXT render的参数,是如何得到的呢。因为你讲的那些都是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。

2.6. 更进一步,自动行号和多选checkbox



实际上行号和多选checkbox都是renderer的延伸,当然多选checkbox更酷一点儿,两者经常一起使用,所以让我们放在一起讨论好了。
2.6.1. 自动行号



只需要在cm中加上一行,这一行不会与ds中的任何数据对应,这也告诉我们可以凭空制作列,哈哈。
在之前的例子上改啦。
var cm = new Ext.grid.ColumnModel([{header:'NO.',renderer:function(value, cellmeta, record, rowIndex){return rowIndex + 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就变成了这幅模样。
var cm = new Ext.grid.ColumnModel([new Ext.grid.RowNumberer(),{header:'编号',dataIndex:'id'},{header:'性别',dataIndex:'sex'},{header:'名称',dataIndex:'name'},{header:'描述',dataIndex:'descn'}]);你绝对会同意我的意见,Jack's work is amazing.实在是太神奇了。看看截图就知道。

2.0的例子在lingo-sample/2.0/02-03.html

2.6.2. 全选checkbox的时间了,请允许我让2.0先上场。



因为2.0里有checkboxSelectionModel,这样完全可以证实用别人的轮子,比自己造轮子要方便。而且咱们造的轮子完全没有jack圆。不信的话,看下面1.x里的实现。
我们一直在修改cm,这次我们也要对它动刀了,不过SelectionModel既sm也要处理一下,这是为了改变单选和多选行的方式,以前这些可以靠shift或ctrl实现,而现在这些都要与checkbox关联上了。
啦啦啦,先看图片,后看代码。

先看看具体多了什么
var sm = new Ext.grid.CheckboxSelectionModel();神奇的是这个sm身兼两职,使用的时候既要放到cm里,也要放到grid中。代码如下。
var cm = new Ext.grid.ColumnModel([new Ext.grid.RowNumberer(),sm,{header:'编号',dataIndex:'id'},{header:'性别',dataIndex:'sex'},{header:'名称',dataIndex:'name'},{header:'描述',dataIndex:'descn'}]);var grid = new Ext.grid.GridPanel({el: 'grid',ds: ds,cm: cm,sm: sm});然后你就可以得到效果啦,代码在lingo-sample/2.0/02-04.html。

2.6.3. 1.x时代的全选checkbox。



理论上只需要给cm再加一列,像自动编号那样,不对应数据,只显示checkbox就可以了。难点就是checkbox与某一行被选择的时候要对应上,用checkbox选择上,sm里也要让这一行被选中,反之亦然。嗯,估计会比较复杂呢。
先放上显示checkbox的代码和截图:
var cm = new Ext.grid.ColumnModel([{header:'NO.',renderer:function(value, cellmeta, record, rowIndex){return rowIndex + 1;}},{header:'<input type="checkbox" >',renderer:function(value, cellmeta, record, rowIndex){return '<input type="checkbox" name="cb">';}},{header:'编号',dataIndex:'id'},{header:'性别',dataIndex:'sex'},{header:'名称',dataIndex:'name'},{header:'描述',dataIndex:'descn'}]);

与sm对接的方面比较麻烦,好在extjs.com上已经有扩展了,或者你可以看看我们弄下来的。 看看1.x多选树的截图。


2.7. 分页了吗?分页了吗?如果还没分就看这里吧。



如果你有一千条信息,一次都输出到grid里,然后让客户用下拉条一点儿一点儿去找吧。我们这里可是要做一个分页效果了,不用滚动屏幕,或者滚动一下就可以看到本页显示的数据,如果想看其他的只需要翻页就可以了。同志们,加强客户体验呀。
实际上,grid控件挺耗性能的,据土豆讲一个页面上放3个grid就可以感觉到响应变慢,以前看过介绍,grid里显示数据过多,听说是上千条,也会明显变慢。
所以说分页是必不可少滴,而且jack提供了方便集成分页工具条的方式,不用一下实在是太浪费了。
两步走,让grid集成分页。
2.7.1. 表面工作,先把分页工具条弄出来。



从图片可以清晰的看到,在grid下边多出来一行东东,包括了前一页,后一页,第一页,最后一页,刷新,以及提示信息。而我们不过写了如下几行代码而已,神奇呀。
var gridFoot = grid.getView().getFooterPanel(true);var paging = new Ext.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都发生变化,嘿嘿~这就算共享数据模型了。厉害呀。
知道了分页的玄机,让我们揉揉眼睛,好好看看里边的参数。
  • pageSize,是每页显示几条数据。
  • displayInfo,跟下面的配置有关,如果是false就不会显示提示信息。
  • displayMsg,只有在displayInfo:true的时候才有效,用来显示有数据的时候的提示信息,中国人应该看得懂汉语,到时候{0},{1},{2}会自动变成对应的数据,咱们只需要想办法把话说通就行了。
  • emptyMsg,要是没数据就显示这个,jack实在太贴心了,连这些小处都考虑得如此精细。

最好要注意的是,这段代码必须放在grid.render()之后,估计是因为动态生成grid的dom后,才能获得对应的footPanel。
现在给出例子,1.x的例子在lingo-sample/1.1.1/02-05.html。

2.7.2. 2.0赐予我们更大的灵活性



其实,在下,一直,对于:必须先渲染grid才能获得footPanel这事非常愤恨,你想啊,本来分页也应该属于初始化的一部分,现在却要先初始化grid,配置完毕,渲染,回过头来再从grid里把footPanel拿出来,再咕哝分页的配置。真,真,真郁闷呀。
所以2.0里的方式,简直大快民心。
var grid = new Ext.grid.GridPanel({el: 'grid',ds: ds,cm: cm,bbar: new Ext.PagingToolbar({pageSize: 10,store: ds,displayInfo: true,displayMsg: '显示第 {0} 条到 {1} 条记录,一共 {2} 条',emptyMsg: "没有记录"})});ds.load();嘿嘿,加一个bbar的参数就可以了,bbar就是bottom bar啦,底端工具条。

不过还是要注意一点,与1.x中不同的是,如果配置了分页工具条,ds.load()就必须在构造grid以后才能执行,否则分页工具条会不起作用。看来分页工具条会把自己和ds做一些关联,来完成与grid共享数据模型的。
对了,还有一点不同,1.x中分页条不会随着浏览器的大小改变,自动放缩,这点在2.0中也解决了。
2.0的例子在lingo-sample/2.0/02-05.html。

2.7.3. 迫不得已,要加上后台脚本了。



grid会每次都显示ds中所有的数据,咱们没法利用静态数据好好演示分页,于是,必须写后台脚本,让ext与后台进行数据交互才能看到真实的分页效果。
咱们尽量在原来的基础上修改啊,把注意力集中在关键部位,一次性突破。
我不会其他语言,后台就用jsp写啦。有个好消息是只要返回的数据格式一样,ext才不管后台是什么写的呢。也就是这样,不管你以后用什么实现后台,前台的ext代码都一样。
<%String start = request.getParameter("start");String limit = request.getParameter("limit");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) {}%>下面我们来解读这段jsp代码:
  • 在进行操作之前,我们先要获得ext传递过来的两个参数:start和limit,start指的从第几个数据开始显示,limit是说从start开始,一共要用多少个数据,当然返回的数据可能会小于这个值。
  • 咱们在后台模拟对100条数据进行分页,在获得了start和limit之后再生成json格式的数据。
    何谓json?在理论讲解之前先看看实例,让我们能有个感性认识,至于以后能不能升华到理性认识,就看各位的悟性了。
    模拟ext访问后台,并传递两个参数start=0&limit=10,把获得的数据稍微整理一下,是这个样子。
    {totalProperty:100,root:[    {id:0,name:'name0',descn:'descn0'},    {id:1,name:'name1',descn:'descn1'},    {id:2,name:'name2',descn:'descn2'},    {id:3,name:'name3',descn:'descn3'},    {id:4,name:'name4',descn:'descn4'},    {id:5,name:'name5',descn:'descn5'},    {id:6,name:'name6',descn:'descn6'},    {id:7,name:'name7',descn:'descn7'},    {id:8,name:'name8',descn:'descn8'},    {id:9,name:'name9',descn:'descn9'}    ]}请记住这个数据格式,不管后台是什么,只要满足了这样的格式要求,ext就可以接收处理,显示到grid中。
    我这里就不好好介绍json,现在只需要知道json里头除了name(名称)就是value(值),值有好几种格式,如果是数字就不用加引号,如果加了引号就是字符串,如果用[]包裹就是数组,如果出现{}就说明是嵌套的json。诸如此类。
    简单瞄了json一眼,开头就是totalProperty:100,这告诉ext:“俺这里有100个数据呢。”,然后就是root:[],root对应着一个数组,数组里有10个对象,每个对象都有id呀,name呀,descn呀。这10个数据最后就应该显示到表格里。
  • jsp里用for循环生成root数组里的数据,这样我们翻页的时候可以看到数据的变化,要不每次都是一样的数据,你怎么知道翻页是不是起作用了呢?
    最后我们把得到的json字符串输出到response里,ext也就可以获得这些数据了。

结果经过了一番折腾,我们的jsp已经确定可以返回我们所需要的数据了。现在我们可以忘掉后台是用什么语言写的了,直接切入ext代码,看看它是怎么样才能跑去后台获得这些数据呢?
因为引入了json作为数据传输格式,这次我们要对ext代码进行一次大换血了,请做好思想准备。
  • 换掉proxy,别在内存里找了,让我们通过http获得我们想要的。
    proxy: new Ext.data.HttpProxy({url:'grid.jsp'}),创建HttpProxy的同时,用url这个参数指定咱们去哪里取数据,我们这里设置成grid.jsp,就是我们刚才讨论的jsp脚本啦。
  • 已经不是数组了,现在要用json咯。
    reader: new Ext.data.JsonReader({    totalProperty: 'totalProperty',    root: 'root'    }, [    {name: 'id'},    {name: 'name'},    {name: 'descn'}    ])看比ArrayReader多了什么?totalProperty对应咱们jsp返回的totalProperty,也就是数据的总数。root对应咱们jsp返回的root,就是一个包含返回数据的数组。
  • 好了,最后在初始化的时候,告诉我们希望获得哪部分的数据就可以了。
    ds.load({params:{start:0,limit:10}});就在ds读取的时候添加两个参数,start和limit,告诉后台,我们从第一个数可以取起,最多要10个。
    在这里有一个小插曲,如果你按照我们以前的设置,grid是无法正常显示的,因为ds.load()无法在grid.render()前准备好所有数组,所以它不知道自己应该实现多高。没法子,我们只好为它指定一个固定的高度了。像这样<div id="grid" style="height:265px;"></div>。

最后,我们就可以使用分页条上那些按钮试试分页了。呵呵~就这么简单。
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,下面是它的截图:


2.7.4. 其实分页不一定要踩在脚下,也可以顶在头上。



我的意思是,grid除了FootPanel以外,还有HeaderPanel,意思就是头顶上的面板。我们把分页条放在上面也不会有任何问题。1.x中的代码仅仅是将getFooterPanel改成getHeaderPanel,这样分页条就跑到上头去了。
var gridHead = grid.getView().getHeaderPanel(true);var paging = new Ext.PagingToolbar(gridHead, ds, {pageSize: 10,displayInfo: true,displayMsg: '显示第 {0} 条到 {1} 条记录,一共 {2} 条',emptyMsg: '没有记录'});

1.x的例子可以在lingo-sample/1.1.1/02-07.html找到。
2.0就更简单了,只需要改一个字母,b -> t,呵呵~,让原来的bbar(bottom bar)变成tbar(top bar)就可以让我们的工具条登天了。
var grid = new Ext.grid.GridPanel({el: 'grid',ds: ds,cm: cm,tbar: new Ext.PagingToolbar({pageSize: 10,store: ds,displayInfo: true,displayMsg: '显示第 {0} 条到 {1} 条记录,一共 {2} 条',emptyMsg: "没有记录"})});

2.0的例子可以在lingo-sample/2.0/02-07.html找到。
呃,当然你可以让上下都加上分页条,反正它们最后都是共享一个ds,功能不会有任何问题哈。吼吼。


2.8. 可编辑表格,改变大小,表格间拖拽,树与表格间拖拽。

TOP

好帖好帖,顶!

TOP

魔兽大脚 http://www.79999.org.cn

一:魔兽大脚  魔兽多玩插件根据国外媒体CVG(computerandvideogames)的报道,2008年全年,《魔兽世界》的收入占据了“暴雪动视”大约50%的收入。
  月光宝盒除此之外,该报道还谈到:伴随着国外金融危机的出现,网游玩家数量大增,而传统的单机游戏业市场却开始下滑。
  魔兽世界插件相比十多年前暴雪入不敷出,被迫将自己卖给威旺迪,现今的暴雪依靠网游已财大气粗月光宝盒插件

  二:魔兽精灵
  魔兽插件Armory最先起源暴雪自己开发的官方数据库,是为了让玩家们更好的了解游戏,但暴雪主要的目的是做游戏而不是做Armory,所以armory只伴随版本的变更而变的更好,多玩魔兽插件没有做出大的改变,目前国外出现了一个3Darmory网站,目的是让玩家更形象的使用armory,当然目前这个系统还在测试,而且我们也没有在他们网站上发现暴雪的授权和支持信息等等。目前该armory也只支持欧服和美服魔兽精灵插件

TOP

健宝牧草种子新货到,恒温库保存,质量有保障发芽率95%!www.tzyz.cn
健宝牧草澳大利亚太平洋种子公司选育而成的饲用品种,是禾本科一年生高产优质的新型牧草,具有超强的分蘖和再生能力,目前在欧、亚、澳、非等二十多个国家广泛种植。1引入我国后,在较大面积的示范种植中,与其他同类牧草相比较,优点突出;该品种植株高大,茎秆粗壮,根系发达,出苗20天后开始拔节,每天平均长高4—5厘米,健宝粗蛋白含量13.00%—22.59%,粗脂肪1.01%—2.01%,粗纤维25.05%—39.72%,无氮浸出物36.9%—43.79%,适宜播种期为5月1日-10日,适应性强,无病虫害。健宝牧草耐旱、抗寒,还具有一定的抗盐碱能力,我国南北各地都可以种植。在中等水肥条件下,亩产鲜草1.5万公斤,在无霜期长短不同的地区都能种植。亩用种子2-5公斤,专业十年、品质保证
十多年来,我们始终坚持以真诚求信誉,以质量求生存、以科技求发展的原则,努力构筑诚信品牌,以不断完善的经营管理,优质的销售服务,良好的公司信誉,高品质的产品,真诚服务于国内外广大用户,做到与客户共赢、真诚服务到永远!
地址:山东省新泰市周全特种养殖研究所  
网址:www.tzyz.cn  www.tzyz.com   
电话:0538-7065208
手机:13053816388 联系人:张经理
QQ:331320998
中国牧草网在线客服,点击这里和我直接沟通  www.tzyz.com   www.tzyz.cn

TOP

TOP

三叶草属多年生草本植物,最适温度为19-24C。茎叶细软,营养价值高,干物质消化率为75-80%,开花期干物质中含精蛋白24.7%,各种动物均喜采食,是马牛羊、禽兔鱼的优质饲草。耐阴,在果园下生长良好。对土壤要求不严格,耐瘠、耐酸,不耐盐碱。主根短,侧根发达,多根瘤,可以改良土壤、培肥地力、减少化肥施用。初花期可刈割利用。次年亩产青草达4-5千公斤,每年可刈割3-4次。三叶草做为园林绿化必不可少的重要品种,遍及全国各地!我处供进口品种,需要可联系洽谈!有佳怡物流的城市、预付定金可货到付款!
早熟禾属多年生草本植物,耐热、抗旱,抗病、矮生、少修剪、养护成本低,即使在低养护时也会有艳丽的色彩,倍受全球职业草坪界的推崇!用于运动场、高尔夫球场、草皮生产、公园等高档圆林绿化,它的高分蘖密度形成犹如厚地毯般的草坪,能耐运动和行人的践踏,它可与多年生黑麦草混合使用。倍受全球职业草坪界的推崇!每平方米用量:草皮15-20克; 高尔夫发球台15-20克; 庭院绿地15克; 足球场25-30克。我处提供进口品种,需要可联系洽谈!有佳怡物流的城市、预付定金可货到付款!
草坪绿化专用品种:高羊茅为优良的冷季型草,适于广泛的土壤类型,在暖湿带和冷凉的亚热带气候条件下种植最佳。高羊茅采用播种方式建坪,一般草坪或保持水土用的平地粗放草坪的采用撒播,斜坡上可以采用水横向的条播,覆土深度0.5~1厘米,播种量30~50克/平方米。单播、混播都可以,常与早熟禾、多年生黑麦草混播或用多个高羊茅品种混播。由于苗期生长缓慢,出苗后 应注意松土。高羊茅的萌发时间为播后7~14天,约50天后可以成坪, 全年绿期较长,北京地区管理正常绿期可达280天以上。

地址:山东省新泰市周全特种养殖研究所  
网址:www.tzyz.cn  www.tzyz.com   
电话:0538-7065208 手机:13053816388
联系人:张经理 QQ:331320998
中国牧草网在线客服,点击这里和我直接沟通  http://www.tzyz.com  http://www.tzyz.cn

TOP








Suchmaschinenoptimierung mit Ranking-Hits