6可编辑的表格.docx
《6可编辑的表格.docx》由会员分享，可在线阅读，更多相关《6可编辑的表格.docx（29页珍藏版）》请在冰豆网上搜索。
6可编辑的表格
EditorGrids
编辑表格
Inthepreviouschapterwelearnedhowtodisplaydatainastructuredgridthatuserscouldmanipulate.
在上一章中我们学习了怎样在一个用户可以熟练早在的结构化的表格中显示数据。
Butonemajorlimitationwasthattherewasnowayfortheuserstoeditthedatainthegridin-line.
但有一个很大的限制就是用户不可以在线修改表格的数据。
Fortunately,ExtprovidesanEditorGridPanel,whichallowstheuseofformfieldtypeeditingin-line—andwewilllearnaboutitinthischapter.
幸运的，ExtJs提供了一个EditorGridPanel，它允许用户在线编辑表格字段——我们将在这一章中学习它。
ThisworksmuchlikeExcel,allowingtheusertoclickonandeditcelldataimmediately.
它工作的很像Excel，允许用户单击且可以立即编辑单元格数据。
Inthischapteryouwilllearnto:
这一章中你将会学到：
●Presenttheuserwitheditablegridsthatareconnectedtoadatastore
●呈现给用户连接在数据存储器上的可编辑的表格
●Sendediteddatabacktotheserver,enablinguserstoupdateserver-sidedatabasesusingtheExtJSeditorgrid
●发送编辑过的数据给服务器，通过ExtJS编辑表格，允许用户更新服务器端的数据
●Manipulatethegridfromprogramcode,andrespondtoevents
●通过程序代码操纵表格，并且对事件做出响应
●Usetricksforadvancedformattingandcreatingmorepowerfuleditinggrids
●使用高级的格式化技巧创建更加强大的编辑的表格
Butfirst,let'sseewhatyoucandowithaneditablegrid.
但是首先，让我们先来看看你可以用一个可编辑的表格来干什么。
WhatcanIdowithaneditablegrid?
我可以对一个可编辑的表格做些什么？
TheEditorGridPanelisverysimilartotheformswewereworkingwithearlier.
EditorGridPanel跟我们早期使用的forms很相似。
Infact,aneditorgridusestheexactsameformfieldsasourform.
事实上，一个编辑表格跟form一样使用着相同的表单字段。
Byusingformfieldstoperformthegridcelleditingwegettotakeadvantageofthesamefunctionalitythataformfieldprovides.
通过使用表单字段来完成表格单元格的编辑，我们获得了表单字段提供的相同的功能。
Thisincludesrestrictinginput,andvalidatingvalues.
包括限制输入，验证值。
CombinethiswiththepowerofanExtGridPanel,andweareleftwithawidgetthatcandoprettymuchwhateverwewant.
与ExtJs的GridPanel的强大功能相结合，我们有了一个强大的小器件。
Allofthefieldsinthistablecanbeeditedin-lineusingformfieldssuchasthetextfield,datepicker,andcombobox.
通过使用表单字段如文本域，日期选择器，下拉框，在这个表格中的所有字段都是内嵌可以编辑的。
Workingwitheditablegrids
使用可编辑的表格
Thechangefromanon-editablegridtoaneditablegridisquiteasimpleprocesstostartwith.
从不可编辑的表格变成一个可编辑的表格是相当简单的一件事。
Thecomplexitycomesintothepicturewhenwestarttocreateaprocesstohandleeditsandsendthatdatabacktotheserver.
当我们开始创建一个方法来处理编辑并发送数据到服务器上，其复杂性开始引人注意了。
Butonceyoulearnhowtodoit,thatpartcanbequitesimpleaswell.
但是一旦你学会了怎样去做，这一部分将变得相当的简单。
Let'sseehowyouwouldupdatethegridwecreatedatthestartofChapter5tomakethetitle,director,andtaglineeditable.
让我们看看怎样修改我们在第五章开始时创建的表格，让它的标题，导演，还有tagline变成可编辑的。
Here'swhatthemodifiedcodewilllooklike:
下面是修改过的代码：
vartitle_edit=newExt.form.TextField（）;
vardirector_edit=newExt.form.TextField（{vtype:
'name'}）;
vartagline_edit=newExt.form.TextField（{
maxLength:
45
}）;
vargrid=newExt.grid.EditorGridPanel（{
renderTo:
document.body,
frame:
true,
title:
'MovieDatabase',
height:
200,
width:
520,
clickstoEdit:
1,
store:
store,
columns:
[
{header:
"Title",dataIndex:
'title',editor:
title_edit},
{header:
"Director",dataIndex:
'director',editor:
director_edit},
{header:
"Released",dataIndex:
'released',renderer:
Ext.util.Format.dateRenderer（'m/d/Y'）},
{header:
"Genre",dataIndex:
'genre',renderer:
genre_name},
{header:
"Tagline",dataIndex:
'tagline',editor:
tagline_edit}
]
}）;
Therearefourmainthingsthatweneedtodotomakeourgrideditable.Theseare:
我们需要做四件事情来使我们的表格变得可编辑的。
它们是：
●ThegriddefinitionchangesfrombeingExt.grid.GridPaneltoExt.grid.EditorGridPanel
●表格定义从Ext.grid.GridPanel变成了Ext.grid.EditorGridPanel
●WeaddtheclicksToEditoptiontothegridconfig—thisoptionisnotrequired,butdefaultstotwoclicks
●我们添加了clicksToEdit配置项到表格中——这个配置项不是必须的，但默认需要双击
●Createaformfieldforeachcolumnthatwewouldliketobeeditable
●为我们希望被编辑的每一列创建了表单域
●Passtheformfieldsintoourcolumnmodelviatheeditorconfig
●通过editor配置项传递表单域到列模型当中
TheeditorcanbeanyoftheformfieldtypesthatalreadyexistinExtJS,oracustomoneofyourown.
编辑器可以为ExtJs中已经存在的任何表单域类型，或者是你自己自定义的。
Westartbycreatingatextformfieldthatwillbeusedwheneditingthemovietitle.
我们从创建一个文本表单域开始，在编辑电影标题的将会用到。
vartitle_edit=newExt.form.TextField（）;
Thenaddthisformfieldtothecolumnmodelastheeditor:
然后这个表单域作为一个编辑器添加到列模型当中：
{header:
"Title",dataIndex:
'title',editor:
title_edit}
ThenextstepwillbetochangefromusingtheGripPanelcomponenttousingthe
EditorGridPanelcomponent,andtoaddtheclicksToEditconfig:
接下来就是将GridPanel组件换成EditorGridPanel组件，并且添加clicksToEdit配置项：
vargrid=newExt.grid.EditorGridPanel（{
renderTo:
document.body,
frame:
true,
title:
'MovieDatabase',
height:
200,
width:
520,
clickstoEdit:
1,
//removedextracodeforclarity
}）
Makingthesechangeshasturnedourstaticgridintoaneditablegrid.Wecanclickonanyofthefieldsthatwesetupeditorsfor,andedittheirvalues.
这些都改好之后，我们的静态表格将变成可编辑的了。
我们就可以单击我们设置了编辑器的任何字段，编辑它们的值了。
Hereweseesomechangeshavebeenmadetothetitlesofafewofthemovies,turningthemintomusicals.
现在我们看到了一些电影的标题已经变成音乐的了。
Theeditorgetsactivatedwithasingleclickonthecellofdata;pressingEnter,theTabkey,orclickingawayfromthefieldwillsavethechange,andpressingtheEscapekeywilldiscardanychanges.
单击数据单元格，编辑器便被激活了；按下回车键，Tab键，或者单击其他任何地方将会保存改后的值，按下Escape将会取消改变。
Thisworksjustlikeaformfield,because,well…itisaformfield.
它像表单域一样工作，因为，当然…它本来就是一个表单域。
Thelittleredtickthatappearsintheupper-leftcornerindicatesthatthecellis'dirty',whichwewillcoverinjustamoment.First,let'smakesomemorecomplexeditablecells.
列左上角的小小的红色记号表明了这一列是别修改过的，这个我们待会儿在涉及。
首先，让我们现在做一些更复杂的可编辑单元格。
Editingmorecellsofdata
编辑更多的单元格
Forourbasiceditorgrid,westartedbymakingasinglecolumneditable.Tosetuptheeditor,wecreatedareferencetotheformfield:
对于我们基础的编辑表格来说，我们从一个可编辑的列开始。
设置好编辑器，我们创建了一个表单域：
vartitle_edit=newExt.form.TextField（）;
Thenweusedthatformfieldastheeditorforthecolumn:
然后我们使用这个表单域作为列的编辑器：
{header:
"Title",dataIndex:
'title',editor:
title_edit}
That'sthebasicrequirementsforeachfield.Nowlet'sexpanduponthisknowledge.
这个是每个字段的基础设置。
现在让我们来展开一下。
Editmorefieldtypes
编辑更多的表单域类型
Nowwearegoingtocreateeditorsfortheotherfields.
现在我们准备创建其他字段的编辑器。
Differentdatatypeshavedifferenteditorfieldsandcanhaveoptionsspecifictothatfield'sneeds.
不同的数据类型需要不同的编辑表单域，我们可以为那个字段选择它所需要的编辑器。
Anyformfieldtypecanbeusedasaneditor.Thesearesomeofthestandardtypes:
任何表单域类型都有可能被用作编辑器。
这里有一些标准的类型：
●TextField
●NumberField
●ComboBox
●DateField
●TimeField
●CheckBox
Theseeditorscanbeextendedtoachievespecialtypesofeditingifneeded,butfornow,letsstartwitheditingtheotherfieldswehaveinourgrid—thereleasedateandthegenre.
如果需要的话，这些编辑器可以被继承来达到特殊的类型。
但是现在，让我们将我们表格中的其他字段变成可编辑的——日期跟genre。
Editingadatevalue
编辑一个日期值
ADateFieldwillworkperfectlyforeditingthereleasedatecolumninourgrid.
在我们表格中的release列，通过使用一个日期类型字段可以工作的很好。
Solet'susethat.Wefirstneedtosetuptheeditorfieldandspecifywhichformattouse:
让我们使用它吧。
我们首先需要设置编辑表单域，需要使用到一个特殊的格式化：
release_edit=newExt.form.DateField（{
format:
'm/d/Y'
}）;
Thenweapplythateditortothecolumn,alongwiththerendererthatweusedearlier:
然后我们应用这个编辑器到那个列中，同时使用了renderer，就像我们先前使用到的那样：
{header:
"Released",dataIndex:
'released',renderer:
Ext.util.Format.dateRenderer（'m/d/Y'）,editor:
release_edit}
Thiscolumnalsotakesadvantageofarenderer,whichwillco-existwiththeeditor.
这一列同时拥有了renderer的有点，它将跟编辑器共同起作用。
Oncetheeditorfieldisactivatedwithasingleclick,therendererpassestherenderingofthefieldtotheeditorandviceversa.
一旦单击一下，编辑器表单域将被激活，渲染器传递给编辑器一个渲染，反之亦然。
Sowhenwearedonewitheditingthefield,therendererwilltakeoverformattingthefieldagain.
因此，当我们编辑这个字段的时候，渲染器将再一次格式化这个字段。
EditwithaComboBox
使用一个下拉框来编辑
Let'ssetupaneditorforthegenrescolumnthatwillprovideuswithalistofthevalidgenrestoselectfrom—soundslikeaperfectscenarioforacombobox.
让我们在genres这一列上设置一个编辑器，它将提供一个有效的genres列表来供选择——听上去就像一个下拉框。
vargenre_edit=newExt.form.ComboBox（{
typeAhead:
true,
triggerAction:
'all',
mode:
'local',
store:
genres,
displayField:
'genre',
valueField:
'id'
}）;
Simplyaddthiseditortothecolumnmodel,likewedidwiththeothers:
将这个编辑器添加到列模型中，就像我们先前做的那样：
{header:
"Genre",dataIndex:
'genre',renderer:
genre_name,
editor:
genre_edit}
Nowweendupwithaneditablefieldthathasafixedselectionofoptions.
现在我们得到了一个特定选项的下拉框。
Reactingtoacelledit
单元格编辑
Ofcourse,wenowneedtofigureouthowtosaveallofthiseditingthatwehavebeendoing.
当然，现在我们需要明白怎么保存我们刚才编辑过的数据。
Iamsuretheenduserwouldnotbesohappyifwethrewawayalloftheirchanges.
我确信，如果丢到他们改变了的数据，最终用户不会感到满意。
Wecanstarttheprocessofsavingthechangesbylisteningforparticulareditevents,andthenreactingtothosewithourowncustomhandler.
我们通过对编辑事件添加监听器来保存改变的数据，然后调用我们自定义的处理器。
Beforewestartcodingthis,weneedtounderstandabitmoreabouthowtheeditorgridworks.
在我们开始编码之前，我们需要理解编辑器表格是怎么工作的。
What'sadirtycell?
什么叫做脏单元格？
Afieldthathasbeeneditedandhashaditsvaluechangedisconsideredtobe'dirty'
untilthedatastoreistoldotherwise.
一个被编辑过的字段，当它的值发生改变后，我们就认为它是脏的直到数据存储器重新加载。
This'dirty'valuehasbeensavedtoatemporarydatastorethatcontainsaversionofourdatawithallofthechangesmade.
脏数据被存储到了一个临时数据存储器当中，它包含了所有改变了的数据的版本。
Ouroriginaldatastorestaysunchanged.
我们的原始数据存储器并没发生改变。
Wecansavethechangestotheprimarydatastorebycallingthecommitfunction,
orwecandiscardthechangesbycallingtherejecthandler.
我们可以通过调用commit函数来保存我
升级会员 