- 浏览: 322267 次
- 性别:
- 来自: 福建
文章分类
最新评论
-
wangyonglin1123:
完美解决 谢谢您
BufferedReader中文乱码解决 -
wangyonglin1123:
StringBuilder result = new Stri ...
BufferedReader中文乱码解决 -
u011110982:
楼主,代码呢?
PKI体系简易JAVA实现(一):时间戳服务器TSA -
WangSongYuan:
我也遇到楼主一样的问题 果然在<body>后面填一 ...
Extjs IE8 对象不支持此属性或方法的bug -
ocaicai:
https://gist.github.com/wendal/ ...
JAVA获取方法参数名的分析(二)
最近空闲时间在学习Ext2.0框架,只有一个字的感叹“强”,我从未想到JS代码能够写出这么绚丽的Web页面出来,以前看到YUI,惊若天人,如今看到EXT2.0的东西,更是感觉震撼。
Ext2.0是一个JS框架,它的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(),对数据进行初始化。
数据的显示显得非常简单:
<div id='grid'></div>
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'); }
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
2011-08-10 23:39 1441很基础的东西,在运行的时候更换grid的内容(grid结构,s ... -
EditorGridPanel禁用某一行
2011-01-21 15:33 2236小记: Ext的EditorGridPanel是基于列 ... -
Ext.Loader使用(js延迟加载)
2011-01-09 00:50 8700首先感谢公司里傅哥对于Ext的Loader类的关注,没有他提起 ... -
Ext Button的onClick和handler
2010-12-28 23:40 7531在EXT中,当我们要为按钮点击添加处理function的时候, ... -
为Ext GridPanel添加对复选框勾选行指定列求和的方法
2010-08-18 10:46 4689又是项目需求。对带有 ... -
Extjs IE8 对象不支持此属性或方法的bug
2010-08-10 15:36 9271同事写了一个最基本的EXT3.2的例子,就一个基本JSP页面, ... -
Ext override一个方法后调用原版方法的办法
2010-06-21 13:42 2306onFocus : function(){ Ext. ... -
js文件中再引入js文件的方法
2009-12-06 12:26 13391在我们的网站项目中,经常会出现这种场景,我们有一个 或几 ... -
解决myeclipse加入了ext后总是validating
2009-09-29 11:53 2768myeclipse7.1加入了ext后,每次修改了js文件,一 ...
相关推荐
### Ext2.0框架的Grid使用详解 #### 引言 在前端开发领域,Ext2.0框架以其强大的功能和灵活的组件库而备受推崇,尤其是其Grid组件,更是前端开发者构建美观、交互性强的数据展示界面的利器。本文将深入探讨Ext2.0...
文档"document"可能包含了EXT2.0 GRID的详细配置、使用方法、示例代码等,对于理解和使用EXT GRID组件至关重要。通过深入学习这个文档,你可以掌握EXT GRID的基本用法和高级特性,从而在项目中构建出功能强大的数据...
部分中文帮助手册的存在表明,Ext2.0支持多语言,这使得非英语用户也能便捷地学习和使用这个框架。 7. **主题和皮肤**: Ext2.0允许开发者自定义皮肤和主题,改变组件的外观,以适应不同的品牌风格或者用户偏好。...
EXT2.0中文API是专为开发者设计的一套详尽的文档,主要涵盖了EXT2.0框架中的各种组件、函数、方法以及事件处理等关键内容。EXT2.0是一款广泛应用于构建富互联网应用(Rich Internet Applications,RIA)的JavaScript...
EXT2.0是一个广泛使用的JavaScript框架,主要专注于构建富客户端Web应用程序。这个版本在EXTJS的早期发展中起到了重要的作用,它提供了丰富的组件库、数据管理和强大的用户界面工具,使得开发者能够创建功能强大且...
EXT 2.0是Web开发框架的一个重要版本,主要用于构建富客户端应用,它基于JavaScript,提供了丰富的组件库和数据管理功能。EXT 2.0源码的下载对于深入理解其内部工作原理、自定义组件以及优化性能至关重要。在学习EXT...
EXT 2.0是Sencha公司开发的一个JavaScript框架,主要用于构建富互联网应用程序(RIA)。它提供了丰富的组件库,包括数据网格、图表、表单、树形视图等,支持复杂的数据绑定和事件处理机制。EXT 2.0的源码分析可以...
这样的资源通常会涵盖EXT2.0的基本组件,如表格(Grid)、面板(Panel)、窗口(Window)、菜单(Menu)等,以及布局管理、数据绑定、事件处理等方面的知识。 ExtJS学习.pdf则可能是另一个EXT JS的学习资料,可能...
在本文中,我们将深入探讨如何使用Ext JS 2.0框架中的Grid组件实现分页功能,结合PHP后端进行数据处理。Grid组件是Ext JS中一个强大的数据展示工具,能够以表格形式展示大量数据,而分页则是处理大数据集时不可或缺...
在Ext 2.0中,API(Application Programming Interface)文档是至关重要的,因为它详细介绍了框架中的类、方法、属性和事件,帮助开发者快速掌握如何使用这些功能。这个API文档涵盖了以下几个关键知识点: 1. **...
EXT 2.0 正式版本的发布标志着一个重要的里程碑,EXT 是一款广泛使用的JavaScript库,专注于构建富互联网应用程序(RIA)。EXT 提供了丰富的组件和功能,使得开发者能够创建功能强大、用户界面友好的Web应用。EXT ...
3. **Grid Panel**:EXT 2.0 的网格面板是一个强大的表格控件,支持分页、排序、过滤、行编辑等多种功能,适用于展示大量结构化数据。 4. **表单组件**:EXT 2.0 提供了一系列完善的表单元素,如文本框、复选框、...
EXT2.0是EXT框架的一次重大更新,它带来了许多改进和新功能,旨在提高开发者的体验和应用程序的性能。以下是对EXT2.0中关键知识点的详细解释: 1. **组件模型 (Component Model)**: 在EXT2.0中,Component和...
EXT是一个广泛使用的前端开发框架,特别是用于构建数据驱动的Web应用程序。EXT2.0是EXT库的一个里程碑,引入了许多增强功能和改进,使开发者能够创建功能丰富的、交互性强的用户界面。EXT的核心特性包括数据绑定、...
这个压缩包"ext2.0.rar"包含了EXT Grid 2.0的所有资源和文件,帮助开发者实现描述中提到的各种高级特性。 1. **本地与远程排序**: 在EXT Grid 2.0中,用户可以对显示的数据进行本地排序,这意味着排序操作在客户端...
《Ext 2.0 核心API 详解教程》是一本深入探讨EXT 2.0核心技术的PDF文档,旨在帮助开发者全面理解EXT框架中的API,从而更好地进行Web应用程序的开发。EXT 2.0是一个强大的JavaScript库,尤其在构建富互联网应用(RIA...
根据提供的文件信息,我们可以推断出这份文档主要讨论的是Ext 2.0框架的相关内容,包括但不限于该框架的基础知识、示例代码等。下面将基于这些信息,详细展开相关知识点。 ### Ext 2.0 框架简介 Ext 2.0是一个流行...
Ext2.0是一个广泛使用的JavaScript库,主要用于构建富互联网应用程序(Rich Internet Applications,RIA)。它提供了丰富的组件模型、数据绑定机制以及高效的用户界面框架。这个API文档是开发者理解和使用Ext2.0的...