ExtJs Format Date dans le panneau Grille

Question

Comment afficher la date dans la colonne ExtJS GridPanel (date avec le temps)

S'il vous plaît fournir la syntaxe.

Answer 1

ExtJs fournit une classe distincte pour gérer les dates et leur formatage. Jetez un oeil à Date class. Il y a suffisamment d'exemples et d'explications sur la façon de formater une date ou une heure donnée.

Pour afficher les dates dans les grilles en fonction de la mise en forme souhaitée, vous devez utiliser la méthode renderer. Lors du paramétrage de la colonne date vous devez ajouter méthode renderer comme suit:

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

Point important: La valeur de retour de la méthode de renderer est affiché sur le column.So, assurez-vous de retourner votre date ou l'heure au format .

Answer 2

1) Créez votre modèle

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) Pour votre grille config

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

Answer 3

J'ai fait une aproche similaire a montré ci-dessus par Kinjeiro, mais je devais Omettre le xtype:'datecolumn' pour le faire fonctionner. Donc, dans mon cas, il a travaillé avec ce code:

1. Modèle

   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. config Grille

   { 
       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') 
       } 
   ] 
   }