无废话ExtJs 入门教程十七[列表：GridPanel]
无废话ExtJs 入门教程十七[列表：GridPanel]
在Extjs中，GridPanel用于数据显示，即我们平时说的列表页。在本节中，我们先对GridPanel有个基本的认识，后继过程再做Demo练习详细讲解在开发中的应用。
1.代码如下：
1 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 2 <html xmlns="http://www.w3.org/1999/xhtml"> 3 <head> 4 <title></title> 5 <!--ExtJs框架开始--> 6 <script type="text/javascript" src="/Ext/adapter/ext/ext-base.js"></script> 7 <script type="text/javascript" src="/Ext/ext-all.js"></script> 8 <script src="/Ext/src/locale/ext-lang-zh_CN.js" type="text/javascript"></script> 9 <link rel="stylesheet" type="text/css" href="/Ext/resources/css/ext-all.css" /> 10 <!--ExtJs框架结束--> 11 <script type="text/javascript"> 12 Ext.onReady(function() {13 //数据源 14 var jsonstore = newExt.data.JsonStore({15 data: [16 { id: 1, name: '张三', sex: '0', birthday: '2001/01/01'},17 { id: 2, name: '李四', sex: '1', birthday: '2002/01/01'},18 { id: 3, name: '王五', sex: '0', birthday: '2003/01/01'}19 ],20 fields: ['id', 'name', 'sex', { name: 'birthday', type: 'date', dateformat: 'Y/m/d'}]21 });22 //复选框列 23 var sm = newExt.grid.CheckboxSelectionModel();24 //渲染性别 25 var sexrender = function(value, metaData, record, rowIndex, cloIndex, store) {26 if (value == '0') {27 metaData.attr = 'style="font-weight:bold";' 28 return '男';29 }30 else 31 return '女';32 }33 //定义列 34 var column = newExt.grid.ColumnModel({35 columns: [36 sm,37 { header: '编号', dataIndex: 'id', sortable: true},38 { header: '姓名', dataIndex: 'name'},39 { header: '性别', dataIndex: 'sex', renderer: sexrender },40 { header: '出生日期', dataIndex: 'birthday', renderer: Ext.util.Format.dateRenderer('Y-m-d') }41 ]42 });43 //添加按钮 44 var tbtn = newExt.Toolbar.Button({45 text: '查看选中项',46 listeners: {47 'click': function() {48 var row =grid.getSelectionModel().getSelections();49 for (var i = 0; i < row.length; i++) {50 alert(row[i].get('id'));51 }52 }53 }54 });55 //分页控件 56 var pager = newExt.PagingToolbar({57 pageSize: 2,58 store: jsonstore,59 listeners: {60 "beforechange": function(bbar, params) {61 var grid =bbar.ownerCt;62 var store =grid.getStore();63 var start =params.start;64 var limit =params.limit;65 alert(store.getCount());66 return false;67 }68 }69 });70 //列表 71 var grid = newExt.grid.GridPanel({72 sm: sm,73 title: 'GridPanel',74 height: 200,75 store: jsonstore,76 tbar: [tbtn],77 bbar: pager,78 colModel: column79 });80 //表单 81 var form = newExt.form.FormPanel({82 frame: true,83 fileUpload: true,84 url: '/App_Ashx/Demo/Upload.ashx',85 title: '表单标题',86 style: 'margin:10px',87 items: [grid]88 });89 //窗体 90 var win = newExt.Window({91 title: '窗口',92 width: 476,93 height: 374,94 resizable: true,95 modal: true,96 closable: true,97 maximizable: true,98 minimizable: true,99 buttonAlign: 'center',100 items: form101 });102 win.show();103 });104 </script> 105 </head> 106 <body> 107 <!-- 108 说明：109 (1)var jsonstore = newExt.data.JsonStore():创建一个新的数据源。110 data: 数据项，如数据库中的存储一样111 id name sex brithday112 1 张三 0 2001-01-01 113 2 李四 1 2002-01-01 114 3 王五 0 2003-01-01 115 fields: 列的定义,指出数据源应该有几列，每列的名称和数据类型等信息，如上所示，说明存在4列，列名分别为：id,name,sex,brithday。116 (2) var sm = newExt.grid.CheckboxSelectionModel()：创建一个复选框的列。117 注意 sm 要在两个地方使用，一、要告诉列模型，上例的36行。二、要告诉列表，上例的72行。缺一不可。118 (3)var column = newExt.grid.ColumnModel():grid的列，这个是定义gird应该有几列。119 如上所示：第一列为：sm[复选框]，第二列为：{ header: '编号', dataIndex: 'id', sortable: true }，header：显示在gird上面的标题，dataIndex：'id'对应数据源的映射关系，意思就是说，表头显示叫"编号"，而实际的数据对应的是数据源的id这一列。120 { header: '性别', dataIndex: 'sex', renderer: sexrender }：renderer渲染列，执行的方法为 sexrender121 var sexrender = function(value, metaData, record, rowIndex, cloIndex, store) {122 if (value == '0'){123 metaData.attr = 'style="font-weight:bold";' 124 return '男';125 }126 else 127 return '女';128 }129 参数说明：130 value:当前单元格的值。131 meetaData:设置元素<div>男</div>的样式表与属性值，如上所示：我加了个加粗显示的样式。这个参数包含两个属性：metaData.css与metaData.attr 132 record：当前Record对象引用。133 rowIndex:当前单元格行的索引。134 colIndex:当前单元格列的索引。135 store:store的引用。136 我们最常用的就是 value，平时写的时候大多数只传value，例如： var sexrender = function(value){处理方法}137 (4)var tbtn = new Ext.Toolbar.Button()：创建一个工具栏按钮，tbar可以添加多个按钮，处理不同的方法，如"添加","删除","修改"等。138 (5)var row = grid.getSelectionModel().getSelections():获取选中项的行，row[i].get('id')获取行中的某一列。139 (6)var grid = newExt.grid.GridPanel()：声明一个新的gird。140 sm: sm,//选择列 141 store: jsonstore,//数据源 142 tbar: [tbtn],//顶部的按钮 143 bbar: pager,//底部的分页 144 colModel: column//列表头与列 145 (7)var pager = newExt.PagingToolbar()：创建一个新的分页控件146 pageSize: 2,//页码大小为2 147 store: jsonstore,分页的数据源148 listeners: {//由于没有链接后台数据库动态绑定数据库，这里在，点下一页时‘beforechange’事件做了个 return false 149 "beforechange": function(bbar, params) {150 var grid =bbar.ownerCt;151 var store =grid.getStore();152 var start = params.start;//起始数据的索引号 153 var limit = params.limit;//每页的大小 154 console.log("==下面是打印信息")155 console.log(store.getCount());156 console.log(start);157 console.log(limit);158 console.log("==打印结束。")159 return false;160 }161 }162 });163 --> 164 </body> 165 </html>
2.效果如下：
转载请注明出处：http://www.cnblogs.com/iamlilinfeng
» 下一篇：无废话ExtJs 入门教程十八[树：TreePanel]
#1楼 2012-06-27 15:10 | 貓崽
#2楼[楼主] 2012-06-27 15:22 | 李林峰的园子
恩，谢谢指正，这个我稍有了解，Ext.define是4的写法，和3中的Ext.extend 类似。继承关系会在后面阐述，到时还请多多指点。
#3楼 2012-06-27 15:27 | HU9HJI1
#4楼[楼主] 2012-06-27 15:36 | 李林峰的园子
你好，做入门教程的意义就是在于让人能看明白，并可以应用，你没看懂的地方可能是我表达的有问题，请具体指出，我好修改下。谢谢。
#5楼 2012-06-27 15:50 | 牛腩
#6楼 2012-06-27 15:51 | 江宁织造
#7楼 2012-06-27 16:10 | 貓崽
ASP.NET MVC +extJS+Jquery绝配
#8楼[楼主] 2012-06-27 16:11 | 李林峰的园子
是的，前端展现在已讲的差不多了，马上讲到与后台交互了。另外：http://www.cnblogs.com/iamlilinfeng/archive/2012/06/23/2559532.html
我在这个教程里简单的提到过。其实Extjs与后台交互比较容易理解，前端向后端发送http请求，后台数据以json格式输出，然后解析展现在页面上就行了。
#9楼[楼主] 2012-06-27 16:12 | 李林峰的园子
谢谢支持，希望也能早看到你的视频，加油。
#10楼 2012-06-27 17:12 | 冰封e族
有了 Extjs 还要毛的jquery，蛋疼。
#11楼 2012-06-27 20:18 | 朙朙
你实际用到时候就知道了，EXT有些东西没Jquery好用
#12楼 2012-06-27 20:25 | 朙朙
比如说去获取一个Iframe里面的东西，Jquery很方便，
再比如说需要iframe加载完之后再去运行一个回调函数。你试过吗？
这些都是在实际应用会遇到的一些。
还有你说话很不文明。
#13楼 2012-06-28 07:01 | pulihe
因为jq提供的灵活性更大，但ext提供的是一种整体性的解决方案。
对于大型extjs项目来说，整体性便利还是能省下更多成本的。
#14楼 2012-06-28 08:28 | 三生石上
如果是asp.net webforms，可以考虑服务器控件ExtAspNet，方便快速开发
#15楼 2012-06-28 08:37 | 三生石上
extjs和jquery没啥可比性，关注点不同。拿extjs core和jquery比较还差不多
#16楼 2012-06-28 08:52 | 朙朙
我这边都是用EXTjs为主，Jquery为辅助来做，再比如说，登录页，这么小的一个页面你再去用EXT做，让用户加载那么大一个EXT all？是不是有点得不偿失
#17楼 2012-07-02 17:41 | Lordbaby
#18楼[楼主] 2012-07-02 19:18 | 李林峰的园子
一个传统的基于Ext.Viewport框架，一个基于仿桌面的，都会实现[增，删，改，查]，正在写，快出来。
无废话ExtJs 入门教程十七[列表：GridPanel]相关推荐
- 无废话ExtJs 入门教程六[按钮：Button]
无废话ExtJs 入门教程六[按钮:Button] extjs技术交流,欢迎加群(201926085) 继上一节内容,我们在表单里加了个两个按钮"提交"与重置.如下所示代码区的第6 ...
- 无废话ExtJs 入门教程二十三[员工管理实例：Demo]
一.概况:这个实例的开发工具为 vs2010,数据库为 sql2008 r2,数据库设计pd16.以下是对文件的详细说明: 解压文件 05 ExtJs教程 夹后 会有以下3个文件夹: 00 Extjs ...
- 无废话ExtJs 入门教程十[单选组：RadioGroup、复选组：CheckBoxGroup]
继上一节内容,我们在表单里加了个一个单选组,一个复选组: 1.代码如下: 1 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transiti ...
- 无废话ExtJs 入门教程八[脚本调试Firefox：firebug]
Firebug是一个Firefox插件,功能:HTML查看和即时编辑.控制台.网络状况等,是开发JavaScript.ExtJs的得力调试工具. 一.Firefox的安装.下载地址: htt ...
- 无废话SharePoint入门教程三[创建网站集和网站]
一.前言 前两篇文章讲解了什么是SharePoint,并且介绍了在SharePoint中一些常用的概念.但概念终究是概念,我们还是要脚踏实地的去动手实践.下面的文章对于了解SharePoint的人来说 ...
- 无废话SharePoint入门教程二[SharePoint发展、工具及术语]
一.前言 1.由于上一篇文章的标题命名失误,此篇标题写给百度搜索"什么是SharePoint". 2.关于什么是SharePoint,请参见本人的第一篇文章:http://www. ...
- ExtJs 入门教程（我感觉挺好的）
ExtJs 入门教程一[学习方法] ExtJs 入门教程二[Hello World] ExtJs 入门教程三[窗体:Window组件] ExtJs 入门教程四[表单:FormPanel] ExtJs ...
- 无废话WCF系列教程 -- 李林峰
李林峰的无废话WCF入门教程 无废话WCF入门教程一[什么是WCF] 无废话WCF入门教程二[WCF应用的通信过程] 无废话WCF入门教程三[WCF的宿主] 无废话WCF入门教程四[WCF的配置文件] ...
- python十大操作方法_python最佳入门教程(19): 列表操作方法
1 教程引言 本教程基于python3.x, 是针对初学者的一系列python入门教程,在知乎上常有人问我计算机该怎么学,如何自学编程,笔者也是通过自学编程而进入IT这一行业的,回顾入行的这几年,从音 ...
最新文章
- 爬虫scrapy框架中间件的使用
- 百度母婴技术团队—基于Reactjs实现webapp #1
- 电脑有回声_专递课堂互动教室现场有回声怎么办？
- C++:搭建深度学习环境及实战
- wxWidgets：wxTreeCtrl概述
- UVa439 Knight Move 骑士的移动(bfs)
- 计算机课题立项申报书范文,专项课题立项申报书模板.doc
- NETBEUI协议的优点及应用
- APP推广的八大“邪恶”方法？做好产品才是王道！
- “两地三中心”和“双活”简介--容灾技术方案
- 资源利用率提高67%，腾讯实时风控平台云原生容器化之路
- lc滤波器是利用电感的感抗_由浅入深讲解滤波电路工作原理
- 英：最常用有用的英语口语900句
- CSMA(carrier sense multiple access)
- 生容易，活容易，生活不容易。
- 北漂9年了，37岁的我跳槽进了国企，开启了一段新的人生旅程
- Mac-如何在任意文件夹下打开终端
- 腾讯云·部署Eclipse Che（云原生IDE）（CSDN云通用）
- 支付宝开放平台RSA签名验签工具----生成密钥报错
- 创建新数据源：缺少Microsoft Access Driver（×.mdb）的解决办法