关闭

关闭

关闭

封号提示

内容

首页 Ext2.0框架的Grid使用介绍.doc

Ext2.0框架的Grid使用介绍.doc

Ext2.0框架的Grid使用介绍.doc

上传者: 021cn 2011-10-10 评分 0 0 0 0 0 0 暂无简介 简介 举报

简介:本文档为《Ext2.0框架的Grid使用介绍doc》,可适用于IT/计算机领域,主题内容包含ExtExt框架的Grid使用介绍Ext框架的Grid使用介绍    最近空闲时间在学习Ext框架只有一个字的感叹“强”我从未想到JS代码能够写出这符等。

ExtExt框架的Grid使用介绍Ext框架的Grid使用介绍    最近空闲时间在学习Ext框架只有一个字的感叹“强”我从未想到JS代码能够写出这么绚丽的Web页面出来以前看到YUI惊若天人如今看到EXT的东西更是感觉震撼。 Ext是一个JS框架它的Grid控件和其它可以显示数据的控件能够支持多种数据类型如二维数组、Json数据和XML数据甚至包括我们自定义的数据类型。Ext为我们提供了一个桥梁ExtdataStore通过它我们可以把任何格式的数据转化成grid可以使用的形式这样就不需要为每种数据格式写一个grid的实现了。 首先一个表格应该有列定义即定义表头ColumnModel:定义一个ColumnModel表头中有四列varcm=newExtgridColumnModel(   {header:'编号',dataIndex:'id'},   {header:'性别',dataIndex:'sex'},   {header:'名称',dataIndex:'name'},   {header:'描述',dataIndex:'descn'})cmdefaultSortable=true   该ColumnModel定义了表格的四个列其每列的名称和对应的数据键。请注意defaultSortable属性即为每个列都安上一个可以排序的功能。如果只想某些列举有该功能可以设置:{header:'编号',dataIndex:'id',Sortable:true}, 现在就来看看这个ExtdataStore是如何转换三种数据的。二维数组:ArrayDatavardata=   '','male','name','descn',   '','male','name','descn',   '','male','name','descn',   '','male','name','descn',   '','male','name','descn'ArrayReadervards=newExtdataStore({   proxy:newExtdataMemoryProxy(data),   reader:newExtdataArrayReader({},       {name:'id',mapping:},       {name:'sex',mapping:},       {name:'name',mapping:},       {name:'descn',mapping:}   )})dsload() ds要对应两个部分:proxy和reader。proxy告诉我们从哪里获得数据reader告诉我们如何解析这个数据。现在用的是ExtdataMemoryProxy它将内存中的数据data作为参数传递。ExtdataArrayReader专门用来解析数组并且告诉我们它会按照定义的规范进行解析每行按顺序读取四个数据第一个叫id第二个叫sex第三个叫name第四个descn。这些是跟cm定义中的dataIndex对应的。这样cm就知道哪列应该显示那条数据了。 mapping属性用于标记data中的读取后的数据与标头的映射关系一般是不用设置的。但如果我们想让sex的数据中name栏中出现可以设置mapping值。即id的mapping为,后者为。 记得要执行一次dsload()对数据进行初始化。 数据的显示显得非常简单:HTML文件:<divid='grid'><div>JS文件:vargrid=newExtgridGridPanel({   el:'grid',   ds:ds,   cm:cm})gridrender()其显示结果为:如何在表格中添加CheckBox呢?varsm=newExtgridCheckboxSelectionModel()varcm=newExtgridColumnModel(   newExtgridRowNumberer(),自动行号   sm,添加的地方   {header:'编号',dataIndex:'id'},   {header:'性别',dataIndex:'sex'},   {header:'名称',dataIndex:'name'},   {header:'描述',dataIndex:'descn'})vargrid=newExtgridGridPanel({   el:'grid',   ds:ds,   cm:cm,   sm:sm,添加的地方   title:'HelloWorld'}) 如何做Grid上触发事件呢?下面是一个cellclick事件gridaddListener('cellclick',cellclick)functioncellclick(grid,rowIndex,columnIndex,e){   varrecord=gridgetStore()getAt(rowIndex)  GettheRecord   varfieldName=gridgetColumnModel()getDataIndex(columnIndex) Getfieldname   vardata=recordget(fieldName)   ExtMessageBoxalert('show','当前选中的数据是'data)}如何做Grid中做出快捷菜单效果:gridaddListener('rowcontextmenu',rightClickFn)右键菜单代码关键部分varrightClick=newExtmenuMenu({   id:'rightClickCont', 在HTML文件中必须有个rightClickCont的DIV元素   items:       {           id:'rMenu',           handler:rMenuFn,点击后触发的事件           text:'右键菜单'       },       {           id:'rMenu',           handler:rMenuFn,           text:'右键菜单'       }   })functionrightClickFn(grid,rowindex,e){   epreventDefault()   rightClickshowAt(egetXY())}functionrMenuFn(){  ExtMessageBoxalert('right','rightClick')}其Grid如下: 如何将一列中的数据根据要求进行改变呢?比如说性别字段根据其male或female改变显示的颜色这种ColumnMode中设计:varcm=newExtgridColumnModel(   newExtgridRowNumberer(),   sm,   {header:'编号',dataIndex:'id'},   {header:'性别',dataIndex:'sex',renderer:changeSex},   {header:'名称',dataIndex:'name'},   {header:'描述',dataIndex:'descn'})cmdefaultSortable=truefunctionchangeSex(value){   if(value=='male'){       return"<spanstyle='color:redfontweight:bold'>红男<span>"   }else{       return"<spanstyle='color:greenfontweight:bold'>绿女<span>"   }} 其它两种数据的Grid显示是相同的其不同之处在于数据获取的过程:Json数据至于这种数据的类型请大家自己看Ajax的书籍: JsonDatavardata={   'coders':       {'id':'','sex':'male','name':'McLaughlin','descn':'brettnewInstancecom'},       {'id':'','sex':'male','name':'Hunter','descn':'jasonservletscom'},       {'id':'','sex':'female','name':'Harold','descn':'elharomacfaqcom'},       {'id':'','sex':'male','name':'Harolds','descn':'elharossmacfaqcom'}   ,   'musicians':       {'id':'','name':'Clapton','descn':'guitar'},       {'id':'','name':'Rachmaninoff','descn':'piano'}   }ds使用的MemoryProxy对象和JsonReader对象vards=newExtdataStore({       proxy:newExtdataMemoryProxy(data),       reader:newExtdataJsonReader({root:'coders'},           {name:'id'},           {name:'sex'},           {name:'name'},           {name:'descn'}       )   })dsload()vargrid=newExtgridGridPanel({   el:'grid',   ds:ds,   cm:cm,   sm:sm,   title:'HelloWorld',   autoHeight:true一定要写否则显示的数据会少一行})gridrender()使用XML数据:注意读取XML数据必须在服务器上进行。XML数据testxml的内容:<xmlversion=""encoding=""><dataset>    <results><results>    <item>          <id><id>          <sex>male<sex>          <name>Taylor<name>          <descn>Coder<descn>    <item><dataset>vards=newExtdataStore({   url:'testxml',  XML数据   reader:newExtdataXmlReader({record:'item'}, 使用XmlReader对象       {name:'id'},       {name:'sex'},       {name:'name'},       {name:'descn'}   )})从服务器获取数据和数据翻页控件从一个服务器文件如ASP、JSP或Servlet中获得数据二维Array、JSON或XML数据也可以被Ext读取并被Grid显示:服务器文件dataasp:<   start=cint(request("start"))   limit=cint(request("limit"))   dimjson   json=cstr("{totalProperty:,root:")      fori=starttolimitstart       json=jsoncstr("{'id':'")cstr(i)cstr("','name':'name")cstr(i)cstr("','descn':'descn")cstr(i)cstr("'}")       ifi<>limitstartthen           json=json","       endif   next   json=json"}"   responsewrite(json)>我们可以看到这个页面会根据传入的start和limit的不同返回不同的数据其实质是个分页的代码。下面是start=,limit=的JSON数据:{totalProperty:,root:{'id':'','name':'name','descn':'descn'},{'id':'','name':'name','descn':'descn'},{'id':'','name':'name','descn':'descn'},{'id':'','name':'name','descn':'descn'},{'id':'','name':'name','descn':'descn'},{'id':'','name':'name','descn':'descn'},{'id':'','name':'name','descn':'descn'},{'id':'','name':'name','descn':'descn'},{'id':'','name':'name','descn':'descn'},{'id':'','name':'name','descn':'descn'}} 我们使用分页控件来控制Grid的数据:ExtonReady(function(){   varsm=newExtgridCheckboxSelectionModel()      varcm=newExtgridColumnModel(       newExtgridRowNumberer(),       sm,       {header:'编号',dataIndex:'id'},       {header:'性别',dataIndex:'sex'},       {header:'名称',dataIndex:'name'},       {header:'描述',dataIndex:'descn'}   )   cmdefaultSortable=true   vards=newExtdataStore({       proxy:newExtdataHttpProxy({url:'dataasp'}),       reader:newExtdataJsonReader({           totalProperty:'totalProperty',           root:'root'       },           {name:'id'},           {name:'name'},           {name:'descn'}       )   })   dsload({params:{start:,limit:}})      vargrid=newExtgridGridPanel({       el:'grid',       ds:ds,       cm:cm,       sm:sm,       title:'ASP>JSON',       bbar:newExtPagingToolbar({           pageSize:,           store:ds,           displayInfo:true,           displayMsg:'显示第{}条到{}条记录一共{}条',           emptyMsg:"没有记录"       }),       tbar:newExtPagingToolbar({           pageSize:,           store:ds,           displayInfo:true,           displayMsg:'显示第{}条到{}条记录一共{}条',           emptyMsg:"没有记录"       })   })   gridrender()})如何在Grid的上方添加按钮呢?添加按钮的关键之处在于tbar或bbar属性设置Toolbar工具条:vargrid=newExtgridGridPanel({   el:'grid',   ds:ds,   cm:cm,   sm:sm,   title:'HelloWorld',   tbar:newExtToolbar({       items:               {                   id:'buttonA'                   ,text:"ButtonA"                   ,handler:function(){alert("YouclickedButtonA")}               }               ,               newExtToolbarSplitButton({})               ,{                   id:'buttonB'                   ,text:"ButtonB"                   ,handler:function(){alert("YouclickedButtonB")}               }               ,               ''               ,{                   id:'buttonc'                   ,text:"Buttonc"               }                  })})将GridPanel放入一个Panel或TabPanel中vartabs=newExtTabPanel({   collapsible:true   ,renderTo:'productexceptions'   ,width:   ,height:   ,activeTab:   ,items:       {           title:'Unmatched'       },{           title:'Matched'       }   })tabsdoLayout()varpanel=newExtPanel({   renderTo:'panel',   title:'panel',   collapsible:true,   width:,   height:,   items:grid 管理grid})Panel必须有DIV存在。其包含的Component有items管理。

用户评论(0)

0/200

精彩专题

上传我的资料

每篇奖励 +2积分

资料评价:

/11
0下载券 下载 加入VIP, 送下载券

意见
反馈

立即扫码关注

爱问共享资料微信公众号

返回
顶部