- 浏览: 90797 次
- 性别:
- 来自: 济南
文章分类
最新评论
-
jc_dreaming:
...
JAVA连接数据库大全 -
决胜千Li:
重载的参数名必须不同吧!
java编程中的重载和覆盖的条件 -
zl584521:
http://zl19830917.blog.163.com/ ...
jfreechart学习 -
magice:
LZ把代码标记一下就好了:)
jfreechart学习 -
kaguvivian:
有营养!
jfreechart学习
最近空闲时间在学习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(),对数据进行初始化。 数据的显示显得非常简单: 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管理。 本文是在学习Ext2.0的基础上写的,因此,参考了许多网上存在的Blog文章。在此表示致敬!
发表评论
-
JavaScript验证大全
2007-04-28 13:24 909js验证表单大全 1. 长度限制 <script&g ... -
Javascript通用表单的验证函数
2007-04-28 13:27 711*--------------- 客户端表 ... -
常用的JavaScript验证正则表达式
2007-04-28 13:29 611匹配中文字符的正则表达式: [u4e00-u9fa5] 评注 ... -
JS客户端验证总结
2007-04-28 13:32 726function ismit()//判断radio是否没有选择 ... -
window.showModalDialog()
2007-04-28 13:42 957showModalDialog() (IE 4+ 支持 ... -
将页面数据导出到excel文件
2007-05-10 17:09 1316<!DOCTYPE html PUBLIC " ... -
js导出数据到excel
2007-05-10 17:10 1038<title>浏览器表格导出到Excel</ ... -
动态创建option的两种方式
2007-05-15 13:24 784动态创建option 以前使用的方式是: var opt ... -
js技巧
2007-12-06 11:44 7461、无提示关闭窗口 <input type=" ... -
javascript小技巧总结
2008-03-24 22:17 764事件源对象 event.srcElement.tagNa ... -
70个流行的AJAX应用的演示和源码下载
2008-11-26 22:46 944Ajallerix : AJAX, simple, fas ...
相关推荐
Ext2.0框架的Grid的使用 开放前台 美观页面
我从未想到JS代码 看到YUI,惊若天人,如今看到EXT2.0的东西,更是感觉震撼
于是,我就看完了Ext官方网站的介绍,然后把该网站介绍--Ext2.0开发指南完整翻写成了简体中文,并且使用Ext2.2调试出来,因为--该官方网站给出的是Ext 2.0版本,有的代码跑不出来,比如Ext2.2中没有Ext.grid.Grid这...
ExtJS是一种主要用于创建前端用户界面,是一个与后台技术无关的前端ajax框架。 功能丰富,无人能出其右 无论是界面之美,还是功能之强,ext的表格控件都高居榜首。 单选行,多选行,高亮显示选中的行,推拽...
…6 第二章 Ext框架基础及核心简介………………………………………………………………………………….……8 2.1 Ext类库简介…………………………………………………………………………………………………....
主要使用的技术: 1、extjs2.0,整体框架 2、RemoteCheckboxGroup.js ,用于动态生成表字段(供查询结果使用) 3、Ext.ux.grid.RowActions.js,用于grid行扩展(上移下移删除等) 4、Datetime.js,用于时间选择 5、...
呵呵~不过ext也不是万能的,与fins的ecside比较,ext不能锁定列(土豆说1.x里支持锁定列,但是2.0里没有了,因为影响效率。),也没有默认的统计功能,也不支持excel,pdf等导出数据。另外fins说,通过测试ecside...
支持的浏览器: IE 7.0+, Firefox 3.0+, Chrome 2.0+, Opera 9.5+, Safari 3.0+ 注:ExtAspNet基于一些开源的程序ExtJS, HtmlAgilityPack, Nii.JSON, YUICompressor。 示例: http://extasp.net/ 开源: ...
ExtJS是一种主要用于创建前端用户界面,是一个基本与后台技术无关的前端ajax框架。 功能丰富,无人能出其右。 无论是界面之美,还是功能之强,ext的表格控件都高居榜首。 单选行,多选行,高亮显示选中的行,拖拽...
基于 ExtJS 的专业 ASP.NET 2.0 控件库,拥有原生的 AJAX 支持和华丽的UI效果。 ExtAspNet的使命 创建没有 JavaScript,没有 CSS,没有 UpdatePanel,没有 ViewState,没有 WebServices 的网站应用程序。 支持的...
-Grid中TemplateField生成到页面中控件具有唯一ID,例如Grid1_ct5_Label2,Grid1_ct6_Label2(feedback:geruger)。 +2009-09-27 v2.1.2 -为Tree控件增加GetExpandAllNodesReference和...