ExtJS中表格控件的使用,属性设置和数据的获取_百度文库
两大类热门资源免费畅读
续费一年阅读会员，立省24元！
评价文档：
ExtJS中表格控件的使用,属性设置和数据的获取
上传于||暂无简介
大小：13.60KB
登录百度文库，专享文档复制特权，财富值每天免费拿！
你可能喜欢1. XML数据源
假设我们有一个数据源是以XML的形式存在的，我们需要从里面取出数据并绑定在界面。XML的结构如下：&
&students&& &stu&& &age&15&/age&& &name&奥特曼&/name&& &hobby&打小怪兽&/hobby&& &/stu&& &stu&& &age&13&/age&& &name&孙悟空&/name&& &hobby&吃桃子&/hobby&& &/stu&& &stu&& &age&100&/age&& &name&石曼迪&/name&& &hobby&睡觉&/hobby&& &/stu&& &/students&
其绑定部分代码比上节的简单多了，最少不用定义数据源了，只需要告诉Ext要的数据在哪里去取即可，实现代码如：&
//解析数据源&var&ds&=&new&Ext.data.Store({& url:&'student.xml',& reader:&new&Ext.data.XmlReader({record:'stu'},&[& {&name:&'age'&},&{&name:&'name'&},&{&name:&'hobby'&}& ])& });& ds.load();
url：指定XML文件的存放位置，写相对路径。然后需要把读取器换成XmlReader，并在第一个参数里面告诉Ext开始解析的每条数据的根节点，根据本文提供的XML文件，每条数据的根节点是&stu&，后面的就不用解释了，和前面的一样。
最后需要注意的是，本例包括以后的例子需要部署到服务器上运行，才能出现结果，不能双击网页文件查看效果，因为要和服务器交互。
2. JSON格式数据
首先得明白什么是JSON格式，json是js本身的一种数据格式，他是数据存储中最快的一种格式，现在已经广泛应用于互联网产品中，如腾讯的开心农场，数据传输就用的是json。
josn的数据组织结构{key:value,key1:value1,...n}，比较难懂，一般各种语言都提供了json转换方法，可以直接调用，省的大家拼字符串。
下面举例说明json的写法，拿一个一组数据为例：&
{data:&[& {projectId:&100,&project:&'Ext表单基本知识',&due:'06/24/2010'},& {projectId:&102,&project:&'Ext表格基本知识',&due:'07/11/2010'},& {projectId:&102,&project:&'Ext还可以汇总',&due:'07/15/2010'}& ]}
最外层是一对花括弧表示数据开始和结束，里面有一个节点叫&data&表示根结点，后面跟&[]&表示子节点的数据，再里面就是具体的键值对数据表示形式了，每个数据用英文逗号隔开，每条数据都用花括弧括起来。
然后我们来解析他，根据我们上节所说，现在的数据源变成json格式，那么解析器也得变成JsonReader，只需要改动这一处即可，修改后的代码如下：&
&script&type="text/javascript"&& function&GridBasic()&{& //定义表格&var&cm&=&new&Ext.grid.ColumnModel([& {&header:&'项目标号',&dataIndex:&'projectId'&},& {&header:&'项目描述',&dataIndex:&'project'&},& {&header:&'项目时间',&dataIndex:&'due'&}& ]);& //解析数据源&var&ds&=&new&Ext.data.Store({& url:&'Test.json',& reader:&new&Ext.data.JsonReader({&root:&'data'&},&['projectId'&,'project'&,&'due'&])& });& ds.load();& //装配表格&var&grid&=&new&Ext.grid.GridPanel({& el:&'grid',& ds:&ds,& cm:&cm,& height:200,& width:500& });& grid.render();& }& Ext.onReady(GridBasic);&//开始执行&&/script&
最终运行效果如：
3. 使用动态语言绑定
PHP本身就有处理函数：json_encode（数组）使用的时候只需把数据库中查询出来的数据已数组形式传递进去，然后输出即可，实现代码如：&
&?php& $arr=array(& 0=&array('name'=&'孔雀','age'=&'88','adr'=&'道观'),& 1=&array('name'=&'奥特曼','age'=&'150','adr'=&'火星'),& 2=&array('name'=&'石曼迪','age'=&'18','adr'=&'地球'),& 3=&array('name'=&'闹闹','age'=&'28','adr'=&'山东'),& );& echo&'{data:'.json_encode($arr).'}';& ?&
前台页面也只需要更改数据源为输出数据的文件名即可，完整代码如：&
&script&type="text/javascript"&& function&GridBasic()&{& //定义表格&var&cm&=&new&Ext.grid.ColumnModel([& {&header:&'项目标号',&dataIndex:&'name'&},& {&header:&'项目描述',&dataIndex:&'age'&},& {&header:&'项目时间',&dataIndex:&'adr'&}& ]);& //解析数据源&var&ds&=&new&Ext.data.Store({& url:&'test.php',& reader:&new&Ext.data.JsonReader({&root:&'data'&},&['name'&,'age'&,&'adr'&])& });& ds.load();& //装配表格&var&grid&=&new&Ext.grid.GridPanel({& el:&'grid',& ds:&ds,& cm:&cm,& height:200,& width:500& });& grid.render();& }& Ext.onReady(GridBasic);&//开始执行&&/script&
和前面学习过的基本一样。
绑定结果如：
使用asp.net就更简单了，传统的asp.net直接在提供数据的页面的page_load事件下输出即可，使用asp.net内置的处理对象JavaScriptSerializer，使用方法如：新建一个提供数据用的页面data.aspx，在后台写上如下代码：&
using&S& using&System.Collections.G& using&System.L& using&System.W& using&System.Web.UI;& using&System.Web.UI.WebC& using&System.Web.Script.S&public&partial&class&data&:&System.Web.UI.Page& {& protected&void&Page_Load(object&sender,&EventArgs&e)& {& List&Student&&students&=&new&List&Student&&{& new&Student&{&Id&=&1,&Name&=&"孔雀",&Adr&=&"道观"&}&,& new&Student&{&Id=2,&Name="闹闹",&Adr="山&东"},& new&Student&{&Id=1,&Name="石曼迪",&Adr="地球"}& };& JavaScriptSerializer&j&=&new&JavaScriptSerializer();& Response.Write(j.Serialize(students));& Response.End();& }& }&public&class&Student& {& public&int&Id&{&get;&set;&}& public&string&Name&{&get;&set;&}& public&string&Adr&{&get;&set;&}& }
在接受页面的前台协商EXT代码即可：&
&script&type="text/javascript"&& function&GridBasic()&{& //定义表格&var&cm&=&new&Ext.grid.ColumnModel([& {&header:&'姓名',&dataIndex:&'Name'&},& {&header:&'编号',&dataIndex:&'Id'&},& {&header:&'地址',&dataIndex:&'Adr'&}& ]);& //解析数据源&var&ds&=&new&Ext.data.Store({& url:&'data.aspx',& reader:&new&Ext.data.JsonReader({&},&['Name',&'Id',&'Adr'])& });& ds.load();& //装配表格&var&grid&=&new&Ext.grid.GridPanel({& el:&'grid',& ds:&ds,& cm:&cm,& height:&200,& width:&500& });& grid.render();& }& Ext.onReady(GridBasic);&//开始执行&&/script&
最终运行效果如：
ASP.NET MVC：
Asp.net mvc作为微软最新推出的架构模式，已经在各个行业逐步应用起来了，由于它采用的不是传统的服务器控件-事件模式，改变以往服务器端运行模式，采用表单提交方式，故而非常有利于测试和请求控制，没了以往那么多的控件，表格必须得手写代码循环绑定，我们也举一个MVC的例子来说明数据绑定吧。
先使用VS2010创建一个MVC项目，在view下面的share里面的Site.Master里面添加对Ext的引用。然后在model里面增加一个返回集合的方法，最后在Index对应的Controller里面增加json的输出方法，然后在view里Index对应的视图上配置数据源即可。
Model对应的代码如：&
using&S& using&System.Collections.G& using&System.L& using&System.W& namespace&Ext_aspnet_MVC.Models& {& public&class&Student& {& public&int&Id&{&get;&set;&}& public&string&Name&{&get;&set;&}& public&string&Adr&{&get;&set;&}& }&public&class&StudentModel& {& public&List&Student&&GetAll()& {& List&Student&&students&=&new&List&Student&&{& new&Student&{&Id&=&1,&Name&=&"孔雀",&Adr&=&"道观"&}&,& new&Student&{&Id=2,&Name="闹闹",&Adr="山&东"},& new&Student&{&Id=1,&Name="石曼迪",&Adr="地球"}& };& return&& }& }& }
Controller对应的代码如：&
public&JsonResult&GetData()& {& StudentModel&stu&=&new&StudentModel();& List&Student&&s&=&stu.GetAll();& return&Json(new&{&data&=&s},&JsonRequestBehavior.AllowGet);& }
&注：MVC2出于对网站数据的保护，默认禁止通过get的请求返回JsonResult数据，你可以在返回Json时，传入第二个参数 JsonRequestBehavior.AllowGet。
View对应的代码如：&
&script&type="text/javascript"&& function&GridBasic()&{& //定义表格&var&cm&=&new&Ext.grid.ColumnModel([& {&header:&'姓名',&dataIndex:&'Name'&},& {&header:&'编号',&dataIndex:&'Id'&},& {&header:&'地址',&dataIndex:&'Adr'&}& ]);& //解析数据源&var&ds&=&new&Ext.data.Store({& url:&'Home/GetData',& reader:&new&Ext.data.JsonReader({&root:&'data'&},&['Name',&'Id',&'Adr'])& });& ds.load();& //装配表格&var&grid&=&new&Ext.grid.GridPanel({& el:&'grid',& ds:&ds,& cm:&cm,& height:&200,& width:&500& });& grid.render();& }& Ext.onReady(GridBasic);&//开始执行&&/script&
最终的效果如：
页是Ext自带的一个工具条功能，需要此功能时，可以打开设置相应的参数即可，后台查询数据的方式和传统方式相同，可以使用分页SQL，也可以使用分页存储过程，将查询到的数据以json的形式输出即可。
附：json格式示例：
{"data":[{"Id":1,"Name":"闹闹","Adr":"玉虚宫"},{"Id":2,"Name":"宝宝","Adr":"飘渺之界"},{"Id":3,"Name":"孔雀","Adr":"犀牛贺州"},{"Id":4,"Name":"石曼迪","Adr":"北极寒州"},{"Id":5,"Name":"魔法师","Adr":"未知大陆"}],"totalCount":16}
这个是带分页输出的json样本，意思是后台程序要做的仅仅只是将要展示的数据构建成json也就是Ext认识的格式，然后告诉前台去哪里获取这些数据即可。而构建方式每种语言各有不同，基本都提供了转换的方法或组件。PHP中有json_encode，JAVA中有JSONArray，JSONObject等，C#提供了JavaScriptSerializer和MVC中的Json方法，都可以构建出合法的json格式。如本例中的asp.net就是这么构建的：
public&partial&class&data&:&System.Web.UI.Page& {& protected&void&Page_Load(object&sender,&EventArgs&e)& {& int&start&=&Convert.ToInt32(Request.QueryString["start"]);//接受前台传递过来的分页起始条件&int&limit&=&Convert.ToInt32(Request.QueryString["limit"]);//接受前台传递过来的分页记录条数&StudentDAL&sc&=&new&StudentDAL();& List&StudentInfo&&students&=&sc.GetData(start,&limit);//调用查询方法&JavaScriptSerializer&j&=&new&JavaScriptSerializer();//实例化字符串格式化对象&string&result&=&"{\"totalCount\":"&+&sc.GetCount()&+&",\"data\":"&+&j.Serialize(students)&+&"}";& Response.Write(result);& Response.End();& }& }
本段代码中用到的JavaScriptSerializer需要引入命名空间using System.Web.Script.
S方可使用。
同样，asp.net MVC中将集合转换为json的代码以及如Json方法的使用如：
public&JsonResult&GetData()& {& int&start&=&Convert.ToInt32(Request.QueryString["start"]);& int&limit&=&Convert.ToInt32(Request.QueryString["limit"]);& StudentModel&stu&=&new&StudentModel();& List&Student&&s&=&stu.GetData(start,&limit);& return&Json(new&{&data&=&s,&totalCount&=&stu.GetCount()&},&JsonRequestBehavior.AllowGet);& }
本段代码需要解释两点：
1. 这个动作的返回值是JsonResult类型，属于Controller 提供了众多的方法让我们返回各种类型的 ActionResult中的一种，其他的返回值类型如下图所示：
2. 默认情况下使用JsonResult作为返回值会报下面的异常：System.InvalidOperationException: This request has been blocked because sensitive information could be disclosed to third party web sites when this is used in a GET request. To allow GET requests, set JsonRequestBehavior to AllowGet.
由错误信息可知MVC2出于对网站数据的保护，默认禁止通过get的请求返回JsonResult数据，你可以在返回Json时，传入第二个参数 JsonRequestBehavior.AllowGet，如：return Json(result, JsonRequestBehavior.AllowGet)。
OK，后台的输出工作完成了，下来就看前台怎么接收和显示了。不管后台框架如何变化，前台的显示和解析是一样的，需要指定数据从何获取，以什么样的方式获取，对应的字段显示在对应的列标题中，如果需要分页的话还得把分页控件显示出来，然后传入分页参数。
先看解析数据源：
//解析数据源&var&ds&=&new&Ext.data.Store({& proxy:&new&Ext.data.HttpProxy({& url:&'data.aspx',& dataType:&'json',& method:&'GET'& }),& reader:&new&Ext.data.JsonReader({&root:&'data',&totalProperty:&'totalCount'&},&Ext.data.Record.create([& {&name:&'Id',&mapping:&'Id'&},& {&name:&'Name',&mapping:&'Name'&},& {&name:&'Adr',&mapping:&'Adr'&}& ]))& });
HttpProxy 使用 HTTP 协议，通过 Ajax 去后台取数据，构造它时需要设置 url等参数。Reader中用的是JsonReader表示用什么方式去解析，参数中的root意思是内容部分从哪个节点开始解析，totalProperty表示总的记录数是多少，用于分页计算，这两个参数是平行关系。再往后的代码就是映射关系了。
解析完数据源，就需要按照要求装配表格了，需要这次装配的时候记得显示分页条：
//装配表格&var&grid&=&new&Ext.grid.GridPanel({& el:&'grid',& ds:&ds,& cm:&cm,& height:&200,& width:&500,& bbar:&new&Ext.PagingToolbar({& pageSize:&5,& store:&ds,& displayInfo:&true,& displayMsg:&'显示第{0}条到第{1}条记录，一共{2}条',& emptyMsg:&"没有记录"& }),& title:&'留言内容'& });& ds.load({&params:&{&start:&0,&limit:&5}&});
Ext.PagingToolbar是Ext专用的分页条控件，需要设置页码和提示信息等。最后一行的意思是表格第一次加载时查询哪些记录，当然参数名就在这里固定下来，点击下一页仍然使用这里定义的两个属性。
完整显示代码如：
&script&type="text/javascript"&& function&GridBasic()&{& //定义表格&var&cm&=&new&Ext.grid.ColumnModel([& {&header:&'姓名',&dataIndex:&'Name'&},& {&header:&'编号',&dataIndex:&'Id'&},& {&header:&'地址',&dataIndex:&'Adr'&}& ]);& //解析数据源&var&ds&=&new&Ext.data.Store({& proxy:&new&Ext.data.HttpProxy({& url:&'data.aspx',& dataType:&'json',& method:&'GET'& }),& reader:&new&Ext.data.JsonReader({&root:&'data',&totalProperty:&'totalCount'&},&Ext.data.Record.create([& {&name:&'Id',&mapping:&'Id'&},& {&name:&'Name',&mapping:&'Name'&},& {&name:&'Adr',&mapping:&'Adr'&}& ]))& });& ds.load();& //装配表格&var&grid&=&new&Ext.grid.GridPanel({& el:&'grid',& ds:&ds,& cm:&cm,& height:&200,& width:&500,& bbar:&new&Ext.PagingToolbar({& pageSize:&5,& store:&ds,& displayInfo:&true,& displayMsg:&'显示第{0}条到第{1}条记录，一共{2}条',& emptyMsg:&"没有记录"& }),& title:&'留言内容'& });& ds.load({&params:&{&start:&0,&limit:&5}&});& grid.render();& }& Ext.onReady(GridBasic);&//开始执行&&/script&
有些情况下会遇到解析不出来或表单提交不上去的现象，比如目录配置或端口配置，那是由于Ext找不到数据源了，可以使用下面的方法解决掉：
前台接收用url: '&%:ViewData["PostUrl"]%&/Home/GuestBooks',
后台将配置好的路径输出：ViewData["PostUrl"] = "http://" + Request.Url.Host + ":" + Request.Url.P//提供表单提交路径。
最终完成的效果如：
阅读(...) 评论()extGrid-表格
由于版本不断更新，新增或更新的功能没有在上面提供，如果需要可以看更新说明，或加QQ群（）最新版本v1.2.6(大数据支持)，详细API文档也在筹备中。。。君，已阅读到文档的结尾了呢~~
ExtJS中表格控件的使用,属性设..
扫扫二维码，随身浏览文档
手机或平板扫扫即可继续访问
ExtJS中表格控件的使用,属性设置和数据的获取
举报该文档为侵权文档。
举报该文档含有违规或不良信息。
反馈该文档无法正常浏览。
举报该文档为重复文档。
推荐理由：
将文档分享至：
分享完整地址
文档地址：
粘贴到BBS或博客
flash地址：
支持嵌入FLASH地址的网站使用
html代码：
&embed src='/DocinViewer-4.swf' width='100%' height='600' type=application/x-shockwave-flash ALLOWFULLSCREEN='true' ALLOWSCRIPTACCESS='always'&&/embed&
450px*300px480px*400px650px*490px
支持嵌入HTML代码的网站使用
您的内容已经提交成功
您所提交的内容需要审核后才能发布，请您等待！
3秒自动关闭窗口