Extjs入门-grid
function rowdblclickFn(grid, rowIndex, e){//双击事件
var row = grid.store.getById(grid.store.data.items[rowIndex].id);
alert(row.get("unitcode")); }
grid.addListener('rowdblclick',
rowdblclickFn);
Ext2.0是一个javascript框架,它的Grid控件和其它可以显示数据的控件,能够支持多种数据类型,如二维数组、Json数据和XML数据,甚至包括我们自定义的数据类型。Ext为我们提供了一个桥梁Ext.data.Store,通过它我们可以把任何格式的数据转化成grid可以使用的形式,这样就不需要为每种数据格式写一个grid的实现了。
首先,一个表格应该有列定义,即定义表头ColumnModel: // 定义一个ColumnModel,表头中有四列 var cm = new Ext.grid.ColumnModel([ {header:'编号',dataIndex:'id'}, {header:'性别',dataIndex:'sex'}, {header:'名称',dataIndex:'name'}, {header:'描述',dataIndex:'descn'} ]); cm.defaultSortable = true; 该ColumnModel定义了表格的四个列,其每列的名称和对应的数据键。请注意defaultSortable属性,即为每个列都安上一个可以排序的功能。如果只想某些列举有该功能,可以设置: {header:'编号',dataIndex:'id',Sortable:true},
现在就来看看这个Ext.data.Store是如何转换三种数据的。
1.二维数组: // ArrayData var data = [ ['1','male','name1','descn1'], ['2','male','name1','descn2'], ['3','male','name3','descn3'], ['4','male','name4','descn4'], ['5','male','name5','descn5'] ]; // ArrayReader var ds = new Ext.data.Store({ proxy: new Ext.data.MemoryProxy(data), reader: new Ext.data.ArrayReader({}, [ {name: 'id',mapping: 0}, {name: 'sex',mapping: 1}, {name: 'name',mapping: 2}, {name: 'descn',mapping: 3} ]) }); ds.load(); ds要对应两个部分:proxy和reader。proxy告诉我们从哪里获得数据,reader告诉我们如何解析这个数据。 现在用的是Ext.data.MemoryProxy,它将内存中的数据data作为参数传递。Ext.data.ArrayReader专门用来解析数组,并且告诉我们它会按照定义的规范进行解析,每行按顺序读取四个数据,第一个叫id,第二个叫sex,第三个叫name,第四个descn。这些是跟 cm定义中的dataIndex对应的。这样cm就知道哪列应该显示那条数据了。 mapping属性用于标记data中的读取后的数据与标头的映射关系,一般是不用设置的。但如果我们想让sex的数据中name栏中出现,可以设置mapping值。即id的mapping为2,后者为0。 记得要执行一次ds.load(),对数据进行初始化。
数据的显示显得非常简单: HTML文件: <div id='grid'></div> JS文件: var grid = new Ext.grid.GridPanel({ el: 'grid', ds: ds, cm: cm }); grid.render();
其显示结果为:
2.如何在表格中添加CheckBox呢?
var sm = new Ext.grid.CheckboxSelectionModel(); 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: 'grid3', ds: ds, cm: cm, sm: sm,//添加的地方 title: 'HelloWorld' });
3. 如何做Grid上触发事件呢? 下面是一个cellclick事件 grid.addListener('cellclick', cellclick); function cellclick(grid, rowIndex, columnIndex, e) { var record = grid.getStore().getAt(rowIndex); //Get the Record var fieldName = grid.getColumnModel().getDataIndex(columnIndex); //Get field name var data = record.get(fieldName); Ext.MessageBox.alert('show','当前选中的数据是'+data); }
4.如何做Grid中做出快捷菜单效果: grid.addListener('rowcontextmenu', rightClickFn);//右键菜单代码关键部分 var rightClick = new Ext.menu.Menu({ id:'rightClickCont', //在HTML文件中必须有个rightClickCont的DIV元素 items: [ { id: 'rMenu1', handler: rMenu1Fn,//点击后触发的事件 text: '右键菜单1' }, { //id: 'rMenu2', //handler: rMenu2Fn, text: '右键菜单2' } ] }); function rightClickFn(grid,rowindex,e){ e.preventDefault(); rightClick.showAt(e.getXY()); } function rMenu1Fn(){ Ext.MessageBox.alert('right','rightClick'); } 其Grid如下:
5.如何将一列中的数据根据要求进行改变呢? 比如说性别字段根据其male或female改变显示的颜色,这种ColumnMode中设计: var cm = new Ext.grid.ColumnModel([ new Ext.grid.RowNumberer(), sm, {header:'编号',dataIndex:'id'}, {header:'性别',dataIndex:'sex',renderer:changeSex}, {header:'名称',dataIndex:'name'}, {header:'描述',dataIndex:'descn'} ]); cm.defaultSortable = true;
function changeSex(value){ if (value == 'male') { return "<span style='color:red;font-weight:bold;'>红男</span>"; } else { return "<span style='color:green;font-weight:bold;'>绿女</span>"; } }
其它两种数据的Grid显示是相同的,其不同之处在于数据获取的过程:
6.Json数据 至于这种数据的类型请大家自己看Ajax的书籍: //JsonData var data = { 'coders': [ { 'id': '1', 'sex': 'male', 'name':'McLaughlin', 'descn': 'brett@newInstance.com' }, { 'id': '2', 'sex': 'male','name':'Hunter', 'descn': 'jason@servlets.com' }, { 'id': '3', 'sex': 'female','name':'Harold', 'descn': 'elharo@macfaq.com' }, { 'id': '4', 'sex': 'male','name':'Harolds', 'descn': 'elhaross@macfaq.com' } ], 'musicians': [ { 'id': '1', 'name': 'Clapton', 'descn': 'guitar' }, { 'id': '2', 'name': 'Rachmaninoff', 'descn': 'piano' } ] } //ds使用的MemoryProxy对象和JsonReader对象 var ds = new Ext.data.Store({ proxy: new Ext.data.MemoryProxy(data), reader: new Ext.data.JsonReader({root: 'coders'}, [ {name: 'id'}, {name: 'sex'}, {name: 'name'}, {name: 'descn'} ]) }); ds.load();
var grid = new Ext.grid.GridPanel({ el: 'grid3', ds: ds, cm: cm, sm: sm, title: 'HelloWorld', autoHeight: true//一定要写,否则显示的数据会少一行 }); grid.render();
7.使用XML数据: 注意,读取XML数据必须在服务器上进行。 XML数据test.xml的内容: <?xml version="1.0" encoding="UTF-8"?> <dataset> <results>2</results> <item> <id>1</id> <sex>male</sex> <name>Taylor</name> <descn>Coder</descn> </item> </dataset>var ds3 = new Ext.data.Store({ url: 'test.xml', //XML数据 reader: new Ext.data.XmlReader({record: 'item'}, [ //使用XmlReader对象 {name: 'id'}, {name: 'sex'}, {name: 'name'}, {name: 'descn'} ]) });
8.从服务器获取数据和数据翻页控件 从一个服务器文件,如ASP、JSP或Servlet中获得数据二维Array、JSON或XML数据,也可以被Ext读取,并被Grid显示: 服务器文件data.asp: <% start = cint(request("start")) limit = cint(request("limit"))
dim json json=cstr("{totalProperty:100,root:[") for i = start to limit + start-1 json =json + cstr("{'id':'") +cstr(i) + cstr("','name':'name") + cstr(i) + cstr("','descn':'descn") + cstr(i) + cstr("'}") if i <> limit + start - 1 then json =json + "," end if next json = json +"]}" response.write(json) %>
我们可以看到,这个页面会根据传入的start和limit的不同,返回不同的数据,其实质是个分页的代码。下面是start=0,limit=10的JSON数据: {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'}]}
我们使用分页控件来控制Grid的数据: Ext.onReady(function(){ var sm = new Ext.grid.CheckboxSelectionModel(); var cm = new Ext.grid.ColumnModel([ new Ext.grid.RowNumberer(), sm, {header:'编号',dataIndex:'id'}, {header:'性别',dataIndex:'sex'}, {header:'名称',dataIndex:'name'}, {header:'描述',dataIndex:'descn'} ]); cm.defaultSortable = true;
var ds = new Ext.data.Store({ proxy: new Ext.data.HttpProxy({url:'data.asp'}), reader: new Ext.data.JsonReader({ totalProperty: 'totalProperty', root: 'root' }, [ {name: 'id'}, {name: 'name'}, {name: 'descn'} ]) }); ds.load({params:{start:0,limit:10}}); var grid = new Ext.grid.GridPanel({ el: 'grid3', ds: ds, cm: cm, sm: sm, title: 'ASP->JSON', bbar: new Ext.PagingToolbar({ pageSize: 10, store: ds, displayInfo: true, displayMsg: '显示第 {0} 条到 {1} 条记录,一共 {2} 条', emptyMsg: "没有记录" }), tbar: new Ext.PagingToolbar({ pageSize: 10, store: ds, displayInfo: true, displayMsg: '显示第 {0} 条到 {1} 条记录,一共 {2} 条', emptyMsg: "没有记录" }) }); grid.render(); })
10.如何在Grid的上方添加按钮呢? 添加按钮的关键之处在于tbar或bbar属性设置Toolbar工具条: var grid = new Ext.grid.GridPanel({ el: 'grid3', ds: ds, cm: cm, sm: sm, title: 'HelloWorld', tbar: new Ext.Toolbar({ items:[ { id:'buttonA'
,text:"Button A" ,handler: function(){ alert("You clicked Button A"); } }
, new Ext.Toolbar.SplitButton({}) ,{ id:'buttonB' ,text:"Button B" ,handler: function(){ alert("You clicked Button B"); } }
, '-' ,{ id:'buttonc' ,text:"Button c" } ] }) });
11.将GridPanel放入一个Panel或TabPanel中 var tabs = new Ext.TabPanel({ collapsible: true ,renderTo: 'product-exceptions' ,width: 450 ,height:400 ,activeTab: 0 ,items:[ { title: 'Unmatched' },{ title: 'Matched' } ] }); tabs.doLayout();
var panel = new Ext.Panel({ renderTo: 'panel', title:'panel', collapsible:true, width:450, height:400, items:[grid] //管理grid });
Panel必须有DIV存在。其包含的Component有items管理。
Extjs入门-grid的更多相关文章
- ExtJS入门教程04,这是一个超级好用的grid
今天进行extjs入门教程的第四篇:grid. 来一份grid尝尝 小伙伴们都知道extjs的grid功能强大,更清楚功能强大的东西用起来必然会复杂.今天我们就从最简单的grid开始讲解. 先来一个最 ...
- 无废话ExtJs 入门教程十七[列表:GridPanel]
无废话ExtJs 入门教程十七[列表:GridPanel] extjs技术交流,欢迎加群(201926085) 在Extjs中,GridPanel用于数据显示,即我们平时说的列表页.在本节中,我们先对 ...
- EXTJS中grid的数据特殊显示,不同窗口的数据传递
//EXTJS中grid的数据特殊显示renderer : function(value, metaData, record, rowIndex, colIndex, store, view) { v ...
- 无废话ExtJs 入门教程二十一[继承:Extend]
无废话ExtJs 入门教程二十一[继承:Extend] extjs技术交流,欢迎加群(201926085) 在开发中,我们在使用视图组件时,经常要设置宽度,高度,标题等属性.而这些属性可以通过“继承” ...
- 无废话ExtJs 入门教程二十[数据交互:AJAX]
无废话ExtJs 入门教程二十[数据交互:AJAX] extjs技术交流,欢迎加群(521711109) 1.代码如下: 1 <!DOCTYPE html PUBLIC "-//W3C ...
- 无废话ExtJs 入门教程十九[API的使用]
无废话ExtJs 入门教程十九[API的使用] extjs技术交流,欢迎加群(201926085) 首先解释什么是 API 来自百度百科的官方解释:API(Application Programmin ...
- 无废话ExtJs 入门教程十六[页面布局:Layout]
无废话ExtJs 入门教程十六[页面布局:Layout] extjs技术交流,欢迎加群(201926085) 首先解释什么是布局: 来自百度词典的官方解释:◎ 布局 bùjú: [distributi ...
- 无废话ExtJs 入门教程十五[员工信息表Demo:AddUser]
无废话ExtJs 入门教程十五[员工信息表Demo:AddUser] extjs技术交流,欢迎加群(201926085) 前面我们共介绍过10种表单组件,这些组件是我们在开发过程中最经常用到的,所以一 ...
- 无废话ExtJs 入门教程十四[文本编辑器:Editor]
无废话ExtJs 入门教程十四[文本编辑器:Editor] extjs技术交流,欢迎加群(201926085) ExtJs自带的编辑器没有图片上传的功能,大部分时候能够满足我们的需要. 但有时候这个功 ...
随机推荐
- SQL面试题:有A B C三列,用SQL语句实现:当A列大于B列时选择A列否则选择B列
.请教一个面试中遇到的SQL语句的查询问题 表中有A B C三列,用SQL语句实现:当A列大于B列时选择A列否则选择B列,当B列大于C列时选择B列否则选择C列. ------------------- ...
- CS:APP3e 深入理解计算机系统_3e CacheLab实验
详细的题目要求和资源可以到 http://csapp.cs.cmu.edu/3e/labs.html 或者 http://www.cs.cmu.edu/~./213/schedule.html 获取. ...
- Vuex 源码学习(一)
(一)Vuex 是什么? Vuex 是一个专为 Vue.js 应用程序开发的状态管理模式.它采用集中式存储管理应用的所有组件的状态, 并以相应的规则保证状态以一种可预测的方式发生变化. —— 来自 V ...
- CS Round#53 C Histogram Partition
题意:给定一个数组A,以及一个初始值全为0的空数组B,每次可以对数组B的任意一个区间内的所有数+x,问至少几次操作能把B数组变成A数组 NOIP原题(积木大赛)升级版,话说CS怎么那么多跟NOIP原题 ...
- java基础解析系列(十一)---equals、==和hashcode方法
java基础解析系列(十一)---equals.==和hashcode方法 目录 java基础解析系列(一)---String.StringBuffer.StringBuilder java基础解析系 ...
- Golang中的信号处理
信号类型 个平台的信号定义或许有些不同.下面列出了POSIX中定义的信号. Linux 使用34-64信号用作实时系统中. 命令 man 7 signal 提供了官方的信号介绍. 在POSIX.1-1 ...
- Comparable和Comparator的差别
原文地址:http://leihuang.org/2014/11/16/Comparable-Vs-Comparator/ Comparable和Comparator都是用来实现集合中元素的比較.排序 ...
- 【Jquery系列】JqGrid参数详解
1 概述 本篇文章主要与大家分享JqGrid插件参数问题. 2 参数详解 2.1 初始化参数 2.2 ColModel参数 3 json数据 jqGrid可支持的数据类型:xml.jso ...
- OS X第三方类库管理工具cocoapods入门
一.简介 什么是cocoapods?--是OS X和iOS下一个第三方类库管理工具.通过cocoapods,可以为项目添加"Pods"依赖库,并且管理其版本. cocoapods好 ...
- 《跟我学IDEA》四、配置模板(提高代码编写效率)
上一篇博文,我们学习了idea的一些实用配置,相信大家也对idea这个开发工具有了一个大概的了解.今天我们来学习模板的配置,idea提供很多模板从而提高编写代码的效率,比如说一些经常用的代码及生成文件 ...