无废话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 = new Ext.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 = new Ext.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 = new Ext.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 = new Ext.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 = new Ext.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 = new Ext.grid.GridPanel({
72 sm: sm,
73 title: 'GridPanel',
74 height: 200,
75 store: jsonstore,
76 tbar: [tbtn],
77 bbar: pager,
78 colModel: column
79 });
80 //表单
81 var form = new Ext.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 = new Ext.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: form
101 });
102 win.show();
103 });
104 </script>
105 </head>
106 <body>
107 <!--
108 说明：
109 (1)var jsonstore = new Ext.data.JsonStore():创建一个新的数据源。
110 data: 数据项，如数据库中的存储一样
111 id name sex brithday
112 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 = new Ext.grid.CheckboxSelectionModel()：创建一个复选框的列。
117 注意 sm 要在两个地方使用，一、要告诉列模型，上例的36行。二、要告诉列表，上例的72行。缺一不可。
118 (3)var column = new Ext.grid.ColumnModel():grid的列，这个是定义gird应该有几列。
119 如上所示：第一列为：sm[复选框]，第二列为：{ header: '编号', dataIndex: 'id', sortable: true }，header：显示在gird上面的标题，dataIndex：'id'对应数据源的映射关系，意思就是说，表头显示叫"编号"，而实际的数据对应的是数据源的id这一列。
120 { header: '性别', dataIndex: 'sex', renderer: sexrender }：renderer渲染列，执行的方法为 sexrender
121 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 = new Ext.grid.GridPanel()：声明一个新的gird。
140 sm: sm,//选择列
141 store: jsonstore,//数据源
142 tbar: [tbtn],//顶部的按钮
143 bbar: pager,//底部的分页
144 colModel: column//列表头与列
145 (7)var pager = new Ext.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.效果如下：
无废话ExtJs 入门教程十七[列表：GridPanel]的更多相关文章
- 无废话ExtJs 入门教程二十一[继承：Extend]
无废话ExtJs 入门教程二十一[继承:Extend] extjs技术交流,欢迎加群(201926085) 在开发中,我们在使用视图组件时,经常要设置宽度,高度,标题等属性.而这些属性可以通过“继承” ...
- 无废话ExtJs 入门教程十九[API的使用]
无废话ExtJs 入门教程十九[API的使用] extjs技术交流,欢迎加群(201926085) 首先解释什么是 API 来自百度百科的官方解释:API(Application Programmin ...
- 无废话ExtJs 入门教程十六[页面布局：Layout]
无废话ExtJs 入门教程十六[页面布局:Layout] extjs技术交流,欢迎加群(201926085) 首先解释什么是布局: 来自百度词典的官方解释:◎ 布局 bùjú: [distributi ...
- 无废话ExtJs 入门教程二十[数据交互：AJAX]
无废话ExtJs 入门教程二十[数据交互:AJAX] extjs技术交流,欢迎加群(521711109) 1.代码如下: 1 <!DOCTYPE html PUBLIC "-//W3C ...
- 无废话ExtJs 入门教程十五[员工信息表Demo：AddUser]
无废话ExtJs 入门教程十五[员工信息表Demo:AddUser] extjs技术交流,欢迎加群(201926085) 前面我们共介绍过10种表单组件,这些组件是我们在开发过程中最经常用到的,所以一 ...
- 无废话ExtJs 入门教程十四[文本编辑器：Editor]
无废话ExtJs 入门教程十四[文本编辑器:Editor] extjs技术交流,欢迎加群(201926085) ExtJs自带的编辑器没有图片上传的功能,大部分时候能够满足我们的需要. 但有时候这个功 ...
- 无废话ExtJs 入门教程十三[上传图片：File]
无废话ExtJs 入门教程十三[上传图片:File] extjs技术交流,欢迎加群(201926085) 1.代码如下: 1 <!DOCTYPE html PUBLIC "-//W3C ...
- 无废话ExtJs 入门教程十二[下拉列表联动：Combobox_Two]
无废话ExtJs 入门教程十二[下拉列表联动:Combobox_Two] extjs技术交流,欢迎加群(201926085) 不管是几级下拉列表的联动实现本质上都是根据某个下拉列表的变化,去动态加载其 ...
- 无废话ExtJs 入门教程十一[下拉列表：Combobox]
无废话ExtJs 入门教程十一[下拉列表:Combobox] extjs技术交流,欢迎加群(201926085) 继上一节内容,我们在表单里加了个一个下拉列表: 1.代码如下: 1 <!DOCT ...
随机推荐
- iOS 如何打开后灯（闪光灯）
- (void)torchOnOrOff { AVCaptureDevice *device = [AVCaptureDevice defaultDeviceWithMediaType:AVMedia ...
- C#-WebForm-WebForm开发基础、如何给控件注册事件？——事件委托写法、http无状态性、三层结构
(小知识 - xml:可扩展的标记语言 html:超文本标记语言) 一.创建WebForm:新建→网站 此时文件夹中只有一个 config 文件,打开后 二.在项目下右键添加新项 在设计页面中打开 从 ...
- elk系列8之logstash+redis+es的架构来收集apache的日志
preface logstash--> redis --> logstash --> es这套架构在讲究松耦合关系里面是最简单的, 架构图如下: 解释下这个架构图的流程 首先前端lo ...
- Google Map API V3开发（4）
Google Map API V3开发(1) Google Map API V3开发(2) Google Map API V3开发(3) Google Map API V3开发(4) Google M ...
- Q: ossfs挂载时如何设置权限？
Q: ossfs挂载时如何设置权限? 如果要允许其他用户访问挂载文件夹,可以在运行ossfs的时候指定allow_other参数: ossfs your_bucket your_mount_point ...
- PHP读写文件
一:读取文件 例1: $xml = ""; //打开文件 $f = fopen('http://app.eyuebus.com/Public/apk/version.xml', ' ...
- 转】C#接口-显式接口和隐式接口的实现
[转]C#接口-显式接口和隐式接口的实现 C#中对于接口的实现方式有隐式接口和显式接口两种: 类和接口都能调用到,事实上这就是“隐式接口实现”. 那么“显示接口实现”是神马模样呢? interface ...
- tyvj1011 传纸条
背景 NOIP2008复赛提高组第三题 描述 小渊和小轩是好朋友也是同班同学,他们在一起总有谈不完的话题.一次素质拓展活动中,班上同学安排做成一个m行n列的矩阵,而小渊和小轩被安排在矩阵对角线的两端, ...
- codevs2777 栅栏的木料
题目描述 Description 农民John准备建一个栅栏来围住他的牧场.他已经确定了栅栏的形状,但是他在木料方面有些问题.当地的杂货储存商扔给John一些木板,而John必须从这些木板中找出尽可能 ...
- Navigation Bar options for Android (based on photosomething project)
1, Tab控件即标签页,可以在一页中切换显示n页内容,要使用此效果,需要用到TabHost和Tabwidget类.(过时了?) Tab控件具有两种实现过程,一是在同一个Activity中切换显示不同 ...