Hybrid View

  1. #1
    Ext User
    Join Date
    Jun 2007
    Posts
    21
    Vote Rating
    1
    funcman is on a distinguished road

      1  

    Question Column values dependent on other column values

    Column values dependent on other column values


    Hello all,

    I have an EditableGrid and I have a column called Date of Birth. I would like to create a new column that is NOT editable called age which is calculated based off of the corresponding Date of Birth cell value.

    Is this possible?

    Thanks!

  2. #2
    Sencha User
    Join Date
    Mar 2007
    Posts
    7,854
    Vote Rating
    4
    tryanDLS is on a distinguished road

      0  

    Default


    You could add a column for age and then in renderer fn calculate the value based on the other column value. I think there's a thread somewhere with an example of this.

  3. #3
    Ext User
    Join Date
    Jun 2007
    Posts
    21
    Vote Rating
    1
    funcman is on a distinguished road

      0  

    Default


    Yea, I've been searching all of this morning and still no luck :\

  4. #4
    Sencha User fay's Avatar
    Join Date
    Apr 2007
    Location
    Ireland
    Posts
    1,750
    Vote Rating
    9
    fay will become famous soon enough fay will become famous soon enough

      1  

    Default


    To add a read-only column:

    Code:
    {header: "Age", width: 30, editable: false, renderer: formatAge},
    formatAge should go something like:

    Code:
    function formatAge(value, p, record){
      var now = new Date();
      var dob = record.data['dob'];
      var years = Math.floor((now.getTime() - dob.getTime()) / (365.25 * 24 * 60 * 60 * 1000));
          
      return years;
    };
    Note, I haven't test this, just google Javascript calculate age

  5. #5
    Ext User
    Join Date
    Jun 2007
    Posts
    21
    Vote Rating
    1
    funcman is on a distinguished road

      0  

    Default


    Is it possible for the Date of Birth column to render the age (calculated from m/dY), and then when it is double clicked on, it brings up the regular datefield editor?

    I have the following code:

    Column Model
    PHP Code:
    header'Date of Birth',
                            
    width250,
                            
    sortabletrue,
                            
    dataIndex'dob',
                            
    id'dobCol',
                            
    renderer: function(datacellrecordrowIndexcolumnIndexstore) {
                                var 
    dob Date.parseDate(record.data['dob']);
                                var 
    years Math.floor(Date.getElapsed(dob) / (365.25 24 60 60 1000));
                                return 
    years;
                            },
                            
    editor: new Ext.grid.GridEditor(
                                new 
    Ext.form.DateField(
                                    {
                                        
    format'm/d/Y'
                                    
    }
                                )
                            ) 
    However this gives me the error:

    format has no properties --- ext-all-debug.js (line 5088)

  6. #6
    Sencha User fay's Avatar
    Join Date
    Apr 2007
    Location
    Ireland
    Posts
    1,750
    Vote Rating
    9
    fay will become famous soon enough fay will become famous soon enough

      0  

    Default


    Tis surely, I modified the edit-grid example and it worked fine:

    Code:
    // ...
    function formatAge(value, p, record){
      var now = new Date();
      var dob = record.data['availDate'];
      var years = Math.floor((now.getTime() - dob.getTime()) / (365.25 * 24 * 60 * 60 * 1000));
          
      return years;
    };
    
    // ...    
      {
        header: "Available",
        dataIndex: 'availDate',
        width: 95,
        renderer: formatAge, //formatDate,
        editor: new Ed(new fm.DateField({
          format: 'm/d/y',
          //minValue: '01/01/06',
          disabledDays: [0, 6],
          disabledDaysText: 'Plants are not available on the weekends'
        }))
       },
    // ...
    Note: I'm using the stable release btw.