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!
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!
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.
Tim Ryan
Read BEFORE posting a question / BEFORE posting a Bug
Use Google to Search - API / Forum
API Doc (4.x | 3.x | 2.x | 1.x) / FAQ / 1.x->2.x Migration Guide / 2.x->3.x Migration Guide
Yea, I've been searching all of this morning and still no luck :\
To add a read-only column:
formatAge should go something like:Code:{header: "Age", width: 30, editable: false, renderer: formatAge},
Note, I haven't test this, just google Javascript calculate ageCode: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; };
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
However this gives me the error:PHP Code:
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'
}
)
)
format has no properties --- ext-all-debug.js (line 5088)
Tis surely, I modified the edit-grid example and it worked fine:
Note: I'm using the stable release btw.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' })) }, // ...
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(); });
Thanks fay for all your help.
One of my problems was malformed data that I was reading from the database, doh! lol
Anyways, thanks!
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