Learning EXT 翻译(十).doc

《Learning EXT 翻译(十).doc》由会员上传分享，免费在线阅读，更多相关内容在行业资料-天天文库。

1、第五章使用grid显示数据（2）使用cellrenderer（单元格渲染器）：我们可以使用单元格渲染来干一些漂亮活。对于如何使得单元格变漂亮以及让它包含更多我们想要的东西来说，几乎没有任何阻碍。我们需要做的，只是定义好ExtJS为我们提供的单元格内置格式化函数。如usMoney，或者建立我们自己的cellrenderer（单元格渲染器）。让我们先看下如何使用内置的cellrenderer，接下来再建立自己的cellrenderer。利用内置的cellrenderer格式化数据：很多内置的格式化函数是用来满足通

2、常的渲染需求的。其中我常常用到的是daterenderer：renderer:Ext.util.Format.dateRenderer('m/d/Y')          还有一些renderer包含了一些常用的格式化功能，如货币（这里指的是格式化为货币符号），大写，小写。               这里给出一些人们经常要用到的renderer：               Renderer说明用途dateRenderer格式化用来显示的日期格式化该列日期为你喜欢的形式，所有心事的日期都可以被转化。uppe

3、rcaselowercase大写和小写转化转化字符串为完全大写或者小写。Capitalize美化文本格式化文本，让它的大小写都正确。 建立可查询的datastore——自定义单元格渲染：我们将重点聚焦到’genre’一列上，它里面的值都是数值，我们现在的需求是，能够通过查询在“表单”一章中的datastore来找到genre数字对应的文本信息。首先，我们需要往columnmodel中添加一个renderer配置，告诉表格在单元个渲染的时候使用哪个函数：{header:'Genre',dataIndex:'ge

4、nre',renderer:genre_name}现在，我们来写这个函数。这个函数传递了单元格中的值作为第一个参数。第二个参数是单元格对象本身，第三个参数是该表格的datastore——这两个我们都不需要，所以让我们先不去管它们。functiongenre_name(val){               //genres就是之前第三章中的那个simpleStore               returngenres.queryBy(function(rec){                       

5、        if(rec.data.id==val){                                               returntrue;                               }else{                                               returnfalse;                               }               //如果匹配，则返回相应的文本内容          

6、     }).itemAt(0).data.genre;}renderer函数传递了单元格当前的数值。这个数值可以被检验并且可以被修改——任何return回来的数值都会被渲染在单元格上。queryBy的作用是从store中过滤数据，它接收一个函数来比较每一行的数据，当return为true时，它就使用匹配的行。为了方便考量，我们现在提供这个函数的另一个版本，它和上面的函数功效相同，但是不如第一个易读：functiongenre_name(val){               returngenres.qu

7、eryBy(function(rec){                               returnrec.data.id==val;               }).itemAt(0).data.genre;}合并两列数据：上面介绍的能够查询datastore的renderder很有用。但是，更为经常使用的一个功能是，我们会合并两列为一个单元格，例如，相加两列数值，求平均，求差值，或者合并两列字符串。以电影标题（tilte）列举例，我们可以把tagline和它合并，这样我们就不需要tagli

8、ne这一列了。首先，我们需要在columnmodel中把tagline这一列的hidden属性设置为true，即隐藏该列。{header:'Tagline',dataIndex:'tagline',hidden:true}接下来配置renderer函数，让它来完成合并列的工作：functiontitle_tagline(val,x,store){               return''+