5使用Grids显示数据.docx
- 文档编号:17501989
- 上传时间:2023-07-26
- 格式:DOCX
- 页数:54
- 大小:525.05KB
5使用Grids显示数据.docx
《5使用Grids显示数据.docx》由会员分享,可在线阅读,更多相关《5使用Grids显示数据.docx(54页珍藏版)》请在冰点文库上搜索。
5使用Grids显示数据
DisplayingDatawithGrids
使用Grids显示数据
Thegridis,withoutdoubt,oneofthemostwidely-usedcomponentsofExt.
毫无疑问,grid是Ext中使用最广泛的组件之一。
Weallhavedata,andthisneedstobepresentedtotheenduserinaneasy-to-understandmanner.
我们的数据需要以一种易于理解的方式呈现在最终用户眼前。
Thespreadsheet(a.k.a.:
grid)istheperfectwaytodothis—theconcepthasbeenaroundforquiteawhilebecauseitworks.
电子数据表就是使用这一方式的完美体现——应为它做到了,这一观点已经被接纳很久了。
Exttakesthatconceptandmakesitflexibleanddownrightamazing!
Ext接受了这种观点,并且让它更加灵活、完全令人惊讶。
Inthischapterweshallbe:
在这一章中我们将会:
●UsingaGridPaneltodisplaystructureddatainauser-friendlygrid
●使用GridPanel以一种用户友好的表格来显示结构化的数据
●Readingdatafromtheserver(ordatabase)todisplayinthegrid
●从服务器(或数据库)读取数据来显示在表格中
●Workingwithagrid’seventsandmanipulatingthegrid’sfeatures
●使用表格的事件来巧妙的处理表格的显示细节
●Usingsomeadvanceddataformattingtechniquesforgrids
●为表格使用一些高级的数据格式化技术
●Pagingdatainagrid
●对表格中的数据进行分页
Wewillcoverhowtodefinetherowsandcolumns,butmoreimportantly,
我们将涉及怎样来定义表格行跟列,但更重要的,
wewilllearnhowtomakethegridflashier.
我们将会学习怎样来使表格更美观漂亮。
Wecandothisbyaddingcustomrenderedcellsthatcontainimages,andchangestylesbasedondatavalues.
我们可以通过添加包含图片的自定义渲染的单元格,以改变传统的基于数据值的显示样式。
Indoingthisweareaddingrealvaluetoourgridbybreakingoutoftheboundariesofspreadsheets!
在做到这个效果的过程中,我们将添加真实的数据到我们的表格中,彻底摆脱电子数据表的束缚!
Whatisagridanyway?
一个表格应该是什么样的呢?
Extgridsaresimilartoaspreadsheet;therearetwomainpartstoeachspreadsheet:
Ext的表格跟电子表格很相似;每一个电子表格有两个重要的部分:
●Columns列
●Rows行
HereourcolumnsareTitle,Released,Genre,andPrice.
在这里,我们的列是:
Title,Released,Genre,和Price.
EachoftherowscontainsmoviessuchasTheBigLebowski,SuperTroopers,andsoon.
每一行包含像TheBigLebowski,SuperTroopers这样的电影,等等。
Therowsarereallyourdata;eachrowinthegridrepresentsarecordofdata.
这些行都是我们的数据;表格中的每一行象征着数据中的一条记录。
DisplayingstructureddatawithaGridPanel
在GridPanel中显示结构化的数据
DisplayingdatainagridrequirestwoExtcomponents:
在表格中输出数据需要两个Ext组件:
●Astorethatactslikeanin-memorydatabase,keepingtrackofthedatawewanttodisplay
像内存中的数据库一样的store存储器,明确我们需要显示的数据
●Agridpanelthatprovidesawaytodisplaythedatastoredinadatastore
一个规定显示存储在数据存储器中的数据的方式的表格面板
Beforewestarttocreateeachofthese,let'slookatsomeoftheterminologythatwillbeused,becausethiscanbeconfusingatfirst:
在我们开始来实现这些之前,让我们先来看看一些将被我们使用到的技术术语,因为这些术语可能刚开始会把我们搞糊涂:
●Columns:
Thisreferstoawholecolumnofdata,andwouldcontaininformationonlyrelevanttothedisplayofdatadownthroughtheentirecolumn,includingtheheading.表格列:
它引用整个数据列,包含显示数据有关的信息,包括标题。
InExtJS,thisinformationispartoftheColumnModel.在ExtJS中,这些信息是列模型的一部分。
●Fields:
Thisalsoreferstoanentirecolumnofdata,butisreferstotheactualdatavalues.字段:
它也引用了整个数据列,但是引用了整个真实的数据值。
WithExtJS,thisisusedinthereader,forloadingdata.通过ExtJs,它用在渲染上,用来加载数据。
Settingupadatastore
设置数据存储器
Thefirstthingweneedtodoissetupourdata,whichwillbeplacedintoadatastore.
我们需要做的第一件事就是装配我们的数据,它将会被放到数据存储器之中。
ThedatastoretypesavailableinExtgiveusaconsistentwayofreadingdifferentdataformatssuchasXMLandJSON,andreadingthisdatainaconsistentwaythroughoutalloftheExtwidgets.
在Ext中可用到的数据存储类型给我们一致的方式读取不同的数据格式,例如XML和JSON,以一致的方式读取数据贯穿整个Ext小器件中。
RegardlessofwhetherthisdataitisJSON,XML,anarray,orevenacustomdatatypeofyourown,it'sallaccessedinthesamewaythankstothedatastore.
不管数据是JSON,XML,数组,甚至是我们自己自定义的数据类型,它总是通过相同的方式,感谢数据存储器。
Somedatastoresavailable,bydefault,inExtare:
在Ext中一些默认支持的数据存储:
●Simple(Array)
●XML
●JSON
Acustomdatastorecouldbecreatedtoreaddatathatdoesnotfitintothesecategories.
可以创建自定义的数据存储器来读取不符合这些类别的数据。
TheExtJSforumsprovideuser-contributeddatareadersforthingssuchasCSVandColdFusionformatsofdata.
ExtJs论坛提供了一些用户贡献的数据读取器,例如CSV和ColdFusion形式的数据。
Addingdatatoourdatastore
添加数据到我们的数据存储器中
Inourfirstattempt,wearegoingtocreateagridthatusessimplelocalarraydata.
在我们的第一次尝试中,我们打算创建一个使用简单本地数组格式的数据来创建一个表格。
Thedatawe'reusingbelowistakenfromaverysmallmoviedatabaseofsomeofmyfavoritemovies,
接下来我们使用到的数据来自一个小的电影数据库,其中包含了一些我最喜爱的电影,
andissimilartothedatathatwillbepulledfromanactualdatabaselaterinthischapter.
与这章后面会用到的来自真实数据库的数据很相似
Thedatastoreneedstwothings:
thedataitself,andadescriptionofthedata—or
whatcouldbethoughtofasthefields.
数据存储器需要两个东西:
数据本身,和数据描述——或者像字段一样可以被想到的
Areaderwillbeusedtoreadthedatafromthearray,andthisiswherewedefinethefieldsofdatacontainedinourarray.
读取器将被用来读取来自数组的数据,一个包含我们数据字段定义的数组。
Thereaderactsasaninterpreterofsorts;
读取器当当一个解释器
itknowshowtointerpretastringofdataasrowsofdatatobeusedwithExtJS.
它知道怎样来解释一段可以被ExtJs使用的字符数据作为表格行。
ThefollowingcodeshouldbeplacedinsidetheExtOnReadyfunction:
接下来的代码应该被放到Ext的OnReady函数内部。
varstore=newExt.data.Store({
data:
[
[1,"84m.jpg","OfficeSpace","MikeJudge","1999-02-19",1,"WorkSucks",19.95,true],
[3,"42m.jpg","SuperTroopers","JayChandrasekhar","2002-02-15",1,"AlteredStatePolice",14.95,1],
[4,"12m.jpg","AmericanBeauty","SamMendes","1999-10-01",2,"...LookCloser",19.95,true],
[5,"49m.jpg","TheBigLebowski","JoelCoen","1998-03-06",1,"The\"Dude\"",21.9,'true'],
[6,"94m.jpg","FightClub","DavidFincher","1999-10-15",3,"Howmuchcanyouknowaboutyourself...",19.95,true]
],
reader:
newExt.data.ArrayReader({id:
'id'},[
'id',
'coverthumb',
'title',
'director',
{name:
'released',type:
'date',dateFormat:
'Y-m-d'},
'genre',
'tagline',
{name:
'price',type:
'float'},
{name:
'available',type:
'bool'}
])
});
Ifweviewedthiscodeinabrowserwewouldnotseeanything—that'sbecauseadatastoreisjustawayofloadingandkeepingtrackofyourdata.
如果我们在浏览器中浏览这段代码,我们不会看到任何东西——因为数据存储器只是用来加载并且保存你数据的一种方式。
Thewebbrowser'smemoryhasourdatainit.Nowweneedtodecidehowtodisplayittotheuser.
浏览器的内存中已经有我们的数据了。
现在我们需要决定怎样将它显示给你的用户。
Definingyourdataforthedatastore
为数据存储器定义数据
Thereaderneedstoknowwhichfieldstoreadinasdataforourdatastore,sowewillneedtodefinethese.
读取器需要知道从数据存储器中读取哪些字段,所以我们需要定义这些字段。
Fieldsaredefinedusinganarrayofobjects—orifthedataistobereadverbatim,justastringspecifyingthefieldname.
字段使用对象数组来定义——或者如果数据将被挨个的读取,那么只需要指定这个字段的名称就可以了。
Allexceptoneofourfieldsinthisexamplecanbedefinedwithasimplename.
在这个例子中,除了一个外,其他的都可以通过简单的名称来定义。
Forexample,thetitlefieldcouldbedefinedusinganobjectlikethis:
举个例子,标题字段可以像这样被用一个对象来定义:
{name:
'title'}
However,inourcase,becausewearejustreadinginthedataasastring,
然而,在我们的用例中,因为我们仅仅把这个字段以一个字符串的形式读取,
wecansimplypassthefieldnameandsavesometyping:
我们可以简单的定义这个字段的名称以减少一些输入:
'title'
Thereleasedfieldisdifferentbecausewewanttotreatitsdataappropriately,asadatetype.
剩下的那个字段很特殊是因为我们以日期的类型来对它进行想适当的处理。
Foreachfieldformattype,theremaybeoptionstodefinetheformatofthedatamoreexplicitly.
对于每个字段格式类型,都有一些选项来更明确的定义它的格式。
Withthedatetype,thereisadateFormatstringthatneedstobedefined.
使用日期类型时,将需要一个定义时间格式的dateFormat字符串。
IfyouhaveusedPHP,thesedateformatstringswilllookfamiliar,becauseExtusesthesamedateformatstringsthatPHPdoes.
如果你用过PHP的话,数据格式化字符串看起来很熟悉,因为Ext使用了与PHP相似的数据格式化字符串。
{name:
'released',type:
'date',dateFormat:
'Y-m-d'}
Specifyingdatatypes
详细的数据类型
ExtJShasmanywaystoproperlyreadinparticulardatatypes.Theyareshownhere:
ExtJs有许多方式以特殊的数据类型来适当的读取。
他们都列在这儿:
FieldTypeDescriptionInformation
stringStringdata
intNumberUsesJavaScriptsparseIntfunction
floatFloatingpointnumberUsesJavaScriptsparseFloatfunction
booleanTrue/Falsedata
dateDatedatadateFormatconfigneeded
BelowareafewusefuldatatypesthatItakeadvantageofveryoften:
FieldTypeDescriptionUsage
dateData
containinga
date
YoualsohavetospecifythedateFormat.ThistellsExt
howtoturntextdataintodates
Y-m-dmeans'full4digityear-numbered
month-numberedday'
dateFormatinExtisthesameasinPHP,andthere's
ahandyreferencetodifferentdateformatsonlinehere:
intNumericdataTreatsthevalueasaninteger—thisisusefulwhenyou
planonmakingcomparisonsofyourdatatoperformother
actions,suchasaddingtwocolumnstogether
boolean
orbool
True/False
data
Takescareofreadingthedifferentideasofwhatboolean
valuesare,suchasconvertingastringtoanactualboolean
value,ortranslatingzeroandonetobooleanvalues
Ifweweretodisplaythedatajustasthereaderseesit,wewouldendupwithsomethinglikethis:
如果我们仅仅用刚才看到的读取器来显示数据的话,我们最终看到的将会像这样:
Nowthatisugly—here'sabreakdownofwhathappened:
现在它看上去很丑陋——刚才发生的有点令人感到崩溃
Thereleaseddatehasbeentypesetproperlyasadate,andinterpretedfromthevalueinourdata.
发布日期已经从我们的数据中被解析成了日期格式。
It'sprovidedinthestandarduglyJavaScriptdateformat—luckilyExthaswaystomakethislookpretty.
以标准但丑陋的JavaScript日期格式显示了出来——幸运的,Ext有使它看上去漂亮的方法。
ThePricecolumnhasbeentypesetasafloatingpointnumber.
价格列被设置成了一个浮点数。
Notethatthereisnoneedtospecifythedecimalprecision.
注意到这儿并不需要指定小数进度。
TheAvailcolumnhasbeeninterpretedasatruebooleanvalue,eveniftherawdatawasnotatruebooleanvalue.
Avail列被解析成了boolean值,甚至如果原始的数据并不是一个true值。
Thisiswhyit'susefultospecifythetypeofdatathatisbeingread,andapplyanyspecialoptionsthatareavailable.
这就是为什么指定已经读取数据的类型,并且应用一些特殊的可用到的选项是很有帮助的。
DisplayingtheGridPanel
显示表格面板
Thethingthatpullseve
- 配套讲稿:
如PPT文件的首页显示word图标,表示该PPT已包含配套word讲稿。双击word图标可打开word文档。
- 特殊限制:
部分文档作品中含有的国旗、国徽等图片,仅作为作品整体效果示例展示,禁止商用。设计者仅对作品中独创性部分享有著作权。
- 关 键 词:
- 使用 Grids 显示 数据