Блог

Как отобразить дату в столбце ExtJS Gridpanel (дата со временем)

Пожалуйста, укажите синтаксис.

ExtJS предоставляет отдельный класс для обработки дат и их форматирования. Взгляните на класс даты. Существует достаточно примеров и объяснений того, как форматировать заданную дату или время.

Для отображения дат в таблицах в соответствии с желаемым форматированием вам придется использовать renderer метод. В вашей конфигурации столбца даты вам необходимо добавить метод визуализации следующим образом:

 renderer: function(date){
    // process you date to your required format and return it
}
  

Важный момент: возвращаемое значение из метода визуализации отображается в столбце.Итак, убедитесь, что вы вернули отформатированную дату или время.

1) Создайте свою модель

 Ext.define('App.model.DataWithDate', {
    extend: 'Ext.data.Model',

    fields: [
//...
        {
            name: 'yourDate',
            type: 'date', //or Ext.data.Types.DATE
            dateFormat: 'time' //if you have standart json object with date value like timestamp 1387481693994
        }
//...
    ]
});
  

2) Для вашей конфигурации grid

 {
    columns: [
        {
            header: 'Date',
            dataIndex: 'yourDate',
            xtype:'datecolumn',
            renderer: Ext.util.Format.dateRenderer('d/m/Y H:i')
        }
    ]
}
  

Я сделал аналогичный подход, как показано выше Кинджейро, но мне пришлось опустить xtype:'datecolumn' , чтобы заставить его работать. Итак, в моем случае это сработало с этим кодом:

1. Модель

    this.store = new Ext.data.JsonStore({
           proxy:new Ext.data.ScriptTagProxy({
               url: "php/resource.php"
           }),
       root: 'result',
       autoLoad: true,
       fields: [
               {name:'Name',type:'string',mapping:'NAME'},
               {name:'Date',type:'date',dateFormat: 'd/m/Y H:i:s',mapping:'DT_ORDER'},
               ]
   });
     

2. Конфигурация сетки

    {
     columns: [
       { header:'<b>Name</b>',width:70,sortable:true,dataIndex:'NAME',align:'left'},
       {
         header:'<b>Date</b>',
         width:150,
         sortable:true,
         dataIndex:'DT_ORDER',
        align:'left',
        renderer: Ext.util.Format.dateRenderer('d/m/Y H:i:s')
       }
    ]
   }