Results 1 to 6 of 6

Thread: Date column does not render / format on data load

  1. #1
    Sencha User
    Join Date
    Apr 2010
    Posts
    40
    Vote Rating
    1
      0  

    Default Date column does not render / format on data load

    Hi,
    I have a kind of generic grid which is configured via an remote config call. The config response then builds columns and a generic model. Unfortunately the date columns are only displaying the data after it has been updated (inline or by gridediting plugin, doesn't make a difference).

    Do I have to trigger some update on the grid after setting the new columns?

    Here is how I configure the grid / store:

    Code:
    { // Iterating over config array
      var col = {};
      var field = {};
    
      col.editable = true;
      col.dataIndex = item.dataindex;
      field.name = item.dataindex;
      field.type = item.datatype;
      ... some more stuff
      modelFields.push(field);
      col.xtype = 'datecolumn';
      col.format = Ext.Date.patterns.DateOnly;
      col.text = item.text;
      col.hidden = !item.visible;
      col.width = 'auto';
      customColumns.push(col);
    }
    
    this.store.reconfigure(modelFields);
    this.setColumns(customColumns);
    this.setStore(this.store);

  2. #2
    Sencha User yeghikyan's Avatar
    Join Date
    Mar 2009
    Location
    München
    Posts
    569
    Answers
    96
    Vote Rating
    46
      0  

    Default

    Strange I have created fiddle instead of you to check the bug but it works:
    Can you reproduce the issue in the following fiddle?

    The competent programmer is fully aware of the strictly limited size of his own skull; therefore he approaches the programming task in full humility, and among other things he avoids clever tricks like the plague.

  3. #3
    Sencha User
    Join Date
    Apr 2010
    Posts
    40
    Vote Rating
    1
      0  

    Default

    Hi,
    thanks for your time. I tried to put that in a fiddle yesterday but it simply did not show any grid at all. Now I can't find the fiddle anymore although I have saved it. Is there any way to find my fiddles??

    I have some different setup as I do not have a static store, it is being loaded via AJAX proxy and the models are created on the fly after a config call. What you did was create two stores already containing the correct models etc.

    After some digging I found out that the date string is not being converted to a Date object which causes the return value to be empty string.

    The code in the datecell is this:

    Code:
    formatValue: function(value) {
      return value ? Ext.Date.format(value, this.getFormat()) : '';
    }
    with value a string like "2018-06-20".

    The format Ext.Date.format function then does:

    Code:
    format: function(date, format) {
      var formatFunctions = utilDate.formatFunctions;
       if (!Ext.isDate(date)) {
         return '';
       }
       if (formatFunctions[format] == null) {
         utilDate.createFormat(format);
       }
       return formatFunctions[format].call(date) + '';
    }
    and returns an empty string because the date is not a date object.

    I am not quite sure wether this is a bug or not as I could not find any API documentation about the formatValue function.

    Right now I am simply using a default text cell with a date renderer which works fine.

  4. #4
    Sencha Premium Member
    Join Date
    Mar 2010
    Posts
    150
    Answers
    2
    Vote Rating
    19
      0  

    Default

    You have to define a model for your store, then in that model you need to specify the fields that are representing dates as type: 'date' and dateFormat: 'Y-m-d' for example, it needs to match the format of the date that you are feeding it.


    I wanted to post some code here as example but the board capabilities in this regard are without comment.

    The information that you need is here:

    http://docs.sencha.com/extjs/6.5.2/c...ata.Model.html

    http://docs.sencha.com/extjs/6.5.2/c...eld.Field.html

    http://docs.sencha.com/extjs/6.5.2/c...ield.Date.html


    The point is that when you specify the field as date type in the model, the framework will take care of creating the date object.

    Also there is a Ext.Date helper class with some handy methods related to dates:

    http://docs.sencha.com/extjs/6.5.2/c.../Ext.Date.html

  5. #5
    Sencha User
    Join Date
    Apr 2010
    Posts
    40
    Vote Rating
    1
      0  

    Default

    Hi, thanks for your answer.

    Quote Originally Posted by predator View Post
    You have to define a model for your store, then in that model you need to specify the fields that are representing dates as type: 'date' and dateFormat: 'Y-m-d' for example, it needs to match the format of the date that you are feeding it.
    I am setting the model field to "date" and I don't think I need to define a format. See the apidocs:

    http://docs.sencha.com/extjs/6.5.3/m...cfg-dateFormat

    It is quite important to note that while this config is optional, it will default to using the base JavaScript Date object's parse function if not specified, rather than Ext.Date.parse.
    As the date comes either as "2018-01-01" string or some ISO8601 string the parse function should do it.

    Anyway I think it has something to do with the model / proxy / store definition on the fly. Some initialization of the model does not work. Thanks for your time again. If I find something out, I will post it here.

  6. #6
    Sencha User
    Join Date
    Apr 2010
    Posts
    40
    Vote Rating
    1
      0  

    Default

    I found it out now!

    Previously I was creating a new model for the store and setting in in the store.reconfigure() method using the model fields. That didn't seem to work as the store still used my dummy model after loading the data via ajax proxy and json reader.

    Now I create a comeplete new model and store instance and it works.

    Looks like this now:

    Code:
    // Iterating over config array  
    for (var i = 0; i < columnConfig.length; i++) {
      var item = columnConfig[i];var col = {};
      var field = {};
    
    
      col.editable = true;
      col.dataIndex = item.dataindex;
      field.name = item.dataindex;
      field.type = item.datatype;
      ... some more stuff
      modelFields.push(field);
      col.xtype = 'datecolumn';
      col.format = Ext.Date.patterns.DateOnly;
      col.text = item.text;
      col.hidden = !item.visible;
      col.width = 'auto';
      customColumns.push(col);
    }
    
    // previously did this, but it did not work: this.store.reconfigure(modelFields);
    // in reconfigure method the model was set in the store but seems the store needed a little bit more than just this.model = model;
    
    var model = Ext.define('MyGenericModel' + Ext.id(), {
      extend: 'Ext.data.Model',
      fields: modelFields
    });
    
    var store = Ext.create('MyGenericStore', {
      endpointUrl: this.getEndpointUrl(),
      model: model
    });
    
    this.setColumns(customColumns);
    this.setStore(store);
    Thanks again yeghikyan for pushing me to the right direction as I saw that basically the approach using setColumns() and setStore() works.

Similar Threads

  1. Replies: 3
    Last Post: 17 May 2013, 8:52 AM
  2. Applying a date format to a grouped date column
    By mazukas in forum Sencha GXT Discussion
    Replies: 0
    Last Post: 17 Jan 2013, 6:35 AM
  3. Replies: 9
    Last Post: 21 Oct 2012, 8:50 PM
  4. Date Format + Date Column on Grid
    By smichels in forum Ext 3.x: Help & Discussion
    Replies: 1
    Last Post: 22 Jul 2010, 8:25 PM

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •