ext js行扩展器日期格式渲染

ozg*_*urc 2 javascript extjs date extjs4.2

我需要在网格上显示4个不同的日期字段.其中2个将直接显示为列,并且在展开行时所有这些都将可见.

我正在使用ExtJS 4.2.1

网格以我想要的格式显示日期(如27-12-2013 11:30),但我不能使扩展区域显示格式化日期.

  • 我试图将渲染器添加到模型字段
  • 我试图添加dateFormat/dateReadFormat + dateWriteFormat
  • 如果我不添加类型作为日期它写入java格式,否则标准日期格式如Fri Dec 20 2013 11:51:00 GMT + 0200(GTB标准时间)

我从java添加日期到Json,如下所示.

if(account.getCreated() != null)
                accountJson.put("created", new  SimpleDateFormat("yyyy/MM/dd hh:mm").format(account.getCreated()));

            if(account.getModified() != null)
                accountJson.put("modified", new  SimpleDateFormat("yyyy/MM/dd hh:mm").format(account.getModified()));

            if(account.getBeginDate() != null)
                accountJson.put("beginDate", new  SimpleDateFormat("yyyy/MM/dd hh:mm").format(account.getBeginDate()));

            if(account.getEndDate() != null)
                accountJson.put("endDate", new  SimpleDateFormat("yyyy/MM/dd hh:mm").format(account.getEndDate()));
Run Code Online (Sandbox Code Playgroud)

我的ext js字段:

........
{name: "created", type: 'date'},
{name: "modified", type: 'date'},
{name: "beginDate", type: 'date'},
{name: "endDate", type: 'date'} 
Run Code Online (Sandbox Code Playgroud)

网格列:

{text: 'Ba?lang?ç Tarihi',      sortable: true, dataIndex: 'beginDate', renderer: Ext.util.Format.dateRenderer('d-m-Y H:i')},
{text: 'Biti? Zaman?',          sortable: true, dataIndex: 'endDate', renderer: Ext.util.Format.dateRenderer('d-m-Y H:i')}
Run Code Online (Sandbox Code Playgroud)

rowexpander - rowBodyTpl:

'<table class="infoTable">' +  
                "<tr><th>Olu?turma Tarihi</th><td>{created}</td><th>Ba?lang?ç Tarihi</th><td>{beginDate}</td></tr>" + 
                "<tr><th>De?i?tirme Tarihi</th><td>{modified}</td><th>Biti? Tarihi</th><td>{endDate}</td></tr>" + 
             "</table>"
Run Code Online (Sandbox Code Playgroud)

为了表明我的意思,这里有一些截图

网格列日期数据的图像

扩大区域的图像..对不好的标记

在第二张图片中,您还可以看到我需要将一些int值转换为String.我试图将它们发送到像扩展的..Tpl这样的函数......"+ myFormatter("{beginDate}")+"...扩展后的Tpl ...... 但这也不起作用:

wee*_*dev 5

重新格式化日期的方法date来自Ext.util.Format.例:

Ext.util.Format.date( myDateValue, 'm/d/Y' );

另外,我相信渲染器应该是功能:

renderer: function(value){
        return Ext.util.Format.date( value, 'm/d/Y' );;
    }
Run Code Online (Sandbox Code Playgroud)

另一种选择可能是修改中的值Ext.data.Model field.Ext.data.Field有一个config选择convert.

{ name: "createdStringFormat", convert: function (value, record) {
            var created = record.data.created;
            //convert created to string rep you want
            var createdString = '';
            createdString = Ext.util.Format.date(created, 'm/d/Y');
            return createdString;
        }
}
Run Code Online (Sandbox Code Playgroud)

您可以转换特定字段上的值,也可以使用转换后的值添加另一个字段.