天天看点

ExtJS 插件 --- RowExpander 格式化模板的数据

定义模板:

this.expander = new Ext.ux.grid.RowExpander({

            tpl : new Ext.Template(

                '<table cellspacing="1" cellpadding="0" class="area-text-tab">',

                  '<tr>',

                    '<th>特征特性:</th>',

                    '<td>{feature:ellipsis(1000)}</td>',

                  '</tr><tr>',

                    '<th>蛋白质:</th>',

                    '<td>{protein:ellipsis(1000)}</td>',

                  '</tr><tr>',

                    '<th>组织来源:</th>',

                    '<td>{organism:ellipsis(1000)}</td>',

                  '</tr></table>'

                )

        });

使用插件:

this.cm = new Ext.grid.ColumnModel({

            defaults: {

                locked: false,

                sortable: true

            },

            columns:[this.expander,{

                locked: true,

                width:210,

                dataIndex:"gi",header:"gi"

            }

                ...

            ]

})

plugins: this.expander,

 {feature:ellipsis(1000)} 截取1000字

tpl : new Ext.Template(

                    '<table cellspacing="1" cellpadding="0" class="area-text-tab">',

                    '<tr>',

                    '<th>采集人</th><td>{gatherer}</td><th>采集日期</th><td>{collectionDate:date("Y-m-d")}</td>',

                    '<th>采集地点</th><td colspan="3">{collectionLocation}</td><th>年龄</th><td>{age}</td><th>器官</th><td>{organ}</td>',

                    '</tr>',

                    '<tr>',

                    '<th>保存组织</th><td>{storageOrganization}</td><th>保存温度</th><td>{storageTemperature}</td>',

                    '<th>保存方法</th><td>{storageMethods}</td><th>实物状态</th><td>{physicalStatus}</td>',

                    '<th>共享方式</th><td>{shareMode}</td><th>雌雄</th><td>{maleorFemale:this.fmMOrF}</td>',

                    '</tr>',

                    '<tr>',

                    '<th>托管人姓名</th><td>{trusteePerson}</td><th>托管人单位</th><td>{trusteeUnits}</td>',

                    '<th>托管人所在单位</th><td>{trusteeSubject}</td><th>托管人联系电话</th><td>{trusteePhone}</td>',

                    '<th>托管人联系方式</th><td width="430" colspan="3">{trusteeContact}</td>',

                    '</tr>',

                    '</table>',

                    {fmMOrF  : function(value) {

                        return value=='M' ? '雌' : '雄';

                    }}

            )

自定义格式化'雌' : '雄'

格式化日期:{collectionDate:date("Y-m-d")}

这是一份格式化函数的列表,可用于模板

ellipsis(length) - 对大于指定长度部分的字符串,进行裁剪,增加省略号(“...”)的显示。适用于只显示前N位的字符,然后提供详细页面的场合。

undef -检查一个值是否为underfined,如果是的转换为空值

htmlEncode - 转换(&, <, >, and ') 字符

trim - 对一段文本的前后多余的空格裁剪

substr(start, length) - 返回一个从指定位置开始的指定长度的子字符串。

lowercase - 返回一个字符串,该字符串中的字母被转换为小写字母。

uppercase - 返回一个字符串,该字符串中的字母被转换为大写字母。

capitalize - 返回一个字符串,该字符串中的第一个字母转化为大写字母,剩余的为小写。

usMoney - 格式化数字到美元货币。如:$10.97

date[(format)] - 将一个日期解析成为一个特定格式模式的日期。如日期字符串不输入,默认为“月/日/年”

stripTags - 剥去变量的所有HTML标签