无废话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 ...
随机推荐
- 使用antd UI 制作菜单
antd 主页地址:https://ant.design/docs/react/introduce 在使用过程中,不能照搬antd的组件代码,因为有些并不合适.首先,菜单并没有做跳转功能,仅仅是菜单, ...
- android 动画
public void onClicked(View v_) { //wa.startAnimation(); // TextView tv = (TextView)findViewById(R.id ...
- 利用HTML5的History API实现无刷新跳转页面初探
HTML4中的History API history这个东西大家应该都不陌生,我们经常使用history.back(-1)来实现后退功能,具体的属性和方法如下: 属性 length 历史的项数.Jav ...
- <<< 网页中如何利用原生js和jquery储存cookie
javascript当中的cookie机制,使应用达到了真正的全局变量的要求,cookie是浏览器提供的一种机制,它将document 对象的cookie属性提供给JavaScript.可以由Java ...
- Day2-python基础2
本次学习内容 1.for循环 2.continue and break 3.while循环 4.运算符 5.数据类型 数字 字符串 列表 1.for循环 猜年龄的游戏完善下,只有三次机会 for i ...
- Windows 基础知识2
1.进程通信的几种方式 管道:匿名,命名 信号 报文 共享内存 信号量:主要作为进程和同一进程的线程同步的方式 套接字 2.线程通信的几种方式: 临界区,信号量.互斥量.事件. 信号量:它允许多个线程 ...
- 面试题目——《CC150》树与图
面试题4.1:实现一个函数,检查二叉树是否平衡.在这个问题中,平衡树的定义如下:任意一个结点,其两颗子树的高度差不超过1. 思路:两个方法,第一种速度较快 package cc150; public ...
- thinkphp3.2与phpexcel基础生成
public function ff(){ import("Org.Util.PHPExcel"); import("Org.Util.PHPExcel.Workshee ...
- Maven、SecureCRT使用问题汇集
1 Maven 无法下载pom文件中相关的依赖包 该问题可能有很多原因,我的原因是host中的localhost被修改了,改回来即可! 看起来好像出了一些网络原因的问题,顺着这个方向搜索,发现国外也有 ...
- Pandas-多表操作
Pandas包对多个数据表(DataFrame)的常用整合功能. 目录 merge join concat append combin_first merge 合并 pandas.merge可根据一个 ...