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

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

      0  

    Default


    Hi fay,

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

    Quote Originally Posted by fay View Post
    Code:
    // ...
        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?

  8. #8
    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


    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:

    Code:
    /*
     * 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();
    });

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

      0  

    Default


    Thanks fay for all your help.

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

    Anyways, thanks!

  10. #10
    Ext User
    Join Date
    Jun 2007
    Posts
    98
    Vote Rating
    0
    ajaxE is on a distinguished road

      0  

    Default Can a column value dynamically change according to another column value change

    Can a column value dynamically change according to another column value change


    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