Column values dependent on other column values

[funcman]

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!

[tryanDLS]

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.

[funcman]

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

[fay]

To add a read-only column:

{header: "Age", width: 30, editable: false, renderer: formatAge},

formatAge should go something like:

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

[funcman]

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

header: 'Date of Birth',
                        width: 250,
                        sortable: true,
                        dataIndex: 'dob',
                        id: 'dobCol',
                        renderer: function(data, cell, record, rowIndex, columnIndex, store) {
                            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)

[fay]

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

// ...
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.

[funcman]

Hi fay,

I appreciate your help. However I am having problems getting your code to work.

// ...
    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'
    }))
   },
// ...

Firebug throws an error:

Ed is not defined
editor: new Ed(new fm.DateField({

I think I am using version 1.0 of Ext, how can I check to make sure?

[fay]

I'm using 1.0.1a - I'd always recommend using a *stable* version.

I modified the edit-grid.js example - this is located in the examples\grid folder. In my code snippet I only included the changes I made to that file. In the file itself:

var fm = Ext.form, Ed = Ext.grid.GridEditor;

The whole modified (1.0.1a) file is:

/*
 * Ext JS Library 1.0.1
 * Copyright(c) 2006-2007, Ext JS, LLC.
 * licensing@extjs.com
 * 
 * http://www.extjs.com/license
 */

Ext.onReady(function(){

    function formatBoolean(value){
        return value ? 'Yes' : 'No';  
    };
    
    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;
    };     
   
    function formatDate(value){
        return value ? value.dateFormat('M d, Y') : '';
    };
    // shorthand alias
    var fm = Ext.form, Ed = Ext.grid.GridEditor;

    // the column model has information about grid columns
    // dataIndex maps the column to the specific data field in
    // the data store (created below)
    var cm = new Ext.grid.ColumnModel([{
           header: "Common Name",
           dataIndex: 'common',
           width: 220,
           editor: new Ed(new fm.TextField({allowBlank: false}))
        },
        {
           header: "Price",
           dataIndex: 'price',
           width: 70,
           align: 'right',
           renderer: 'usMoney',
           editor: new Ed(new fm.NumberField({
               allowBlank: false,
               allowNegative: false,
               maxValue: 10
           }))
        },{
           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'
            }))           
        },{
           header: "Indoor?",
           dataIndex: 'indoor',
           width: 55,
           renderer: formatBoolean,
           editor: new Ed(new fm.Checkbox())
        }]);

    // by default columns are sortable
    cm.defaultSortable = true;

    // this could be inline, but we want to define the Plant record
    // type so we can add records dynamically
    var Plant = Ext.data.Record.create([
           // the "name" below matches the tag name to read, except "availDate"
           // which is mapped to the tag "availability"
           {name: 'common', type: 'string'},
           {name: 'botanical', type: 'string'},
           {name: 'light'},
           {name: 'price', type: 'float'},             // automatic date conversions
           {name: 'availDate', mapping: 'availability', type: 'date', dateFormat: 'm/d/Y'},
           {name: 'indoor', type: 'bool'}
      ]);

    // create the Data Store
    var ds = new Ext.data.Store({
        // load using HTTP
        proxy: new Ext.data.HttpProxy({url: 'plants.xml'}),

        // the return will be XML, so lets set up a reader
        reader: new Ext.data.XmlReader({
               // records will have a "plant" tag
               record: 'plant'
           }, Plant)
    });

    // create the editor grid
    var grid = new Ext.grid.EditorGrid('editor-grid', {
        ds: ds,
        cm: cm,
        //selModel: new Ext.grid.RowSelectionModel(),
        enableColLock:false
    });

    var layout = Ext.BorderLayout.create({
        center: {
            margins:{left:3,top:3,right:3,bottom:3},
            panels: [new Ext.GridPanel(grid)]
        }
    }, 'grid-panel');


    // render it
    grid.render();

    
    var gridHead = grid.getView().getHeaderPanel(true);
    var tb = new Ext.Toolbar(gridHead, [{
        text: 'Add Plant',
        handler : function(){
            var p = new Plant({
                common: 'New Plant 1',
                light: 'Mostly Shade',
                price: 0,
                availDate: new Date(),
                indoor: false
            });
            grid.stopEditing();
            ds.insert(0, p);
            grid.startEditing(0, 0);
        }
    }]);

    // trigger the data store load
    ds.load();
});

[funcman]

Thanks fay for all your help.

One of my problems was malformed data that I was reading from the database, doh! lol

Anyways, thanks!

[ajaxE]

I am wondering if when the date of birth changes, will the age value automatically change accordingly? How to achive the dynamic change. That's what I need.

Thanks