View Full Version : To Keep precision in column value to 2 digits

22 Jul 2008, 2:24 AM
I have a gridpanel. In the column model, i want to display the values of a column precision upto 2 digits like 12.22 I Used editor: new Ext.form.NumberField({ decimalPrecision: 2}) for the column but it didnot worked. The column still shows the values as 12.222222

I tried to use renderer : Ext.util.Format.usMoney . This gives the precision to 2 digits but $ symbol was coming. So, is there any other method so that we can display the precision to 2 digits?

22 Jul 2008, 2:29 AM
Is your grid an editor grid panel? Is the value showing in the column, or inside a field inside the column?

22 Jul 2008, 3:28 AM
Thanks for the reply. I am using a editor grid panel. And in the column model, for a column, am using editor: new Ext.form.NumberField({ }). When i enter any value suppose 12in the column field, and tab out, it needs to be displayed as 12.00. similarly if i enter the value as 12.33333, It should get displayed as 12.33.

I tried using like this editor: new Ext.form.NumberField({ allowDecimals: true, decimalPrecision: 2}) for the column. But it is not restricting the precision to 2 digits as 12.33 . Instead it is showing what user enters like 12.3333333.

22 Jul 2008, 3:55 AM
Yes, you need to use a renderer then.

Except don't use usMoney (as you found it, it puts a $ symbol).

You'll have to write your own to format it to 2 decimal places.

22 Jul 2008, 4:33 AM
a simple renderer (http://extjs.com/docs/?class=Ext.grid.ColumnModel&member=renderer) using the native js toFixed() method will do the trick:

22 Jul 2008, 5:18 AM
I tried using like this editor: new Ext.form.NumberField({ allowDecimals: true, decimalPrecision: 2}) for the column. But it is not restricting the precision to 2 digits as 12.33 . Instead it is showing what user enters like 12.3333333.

I think you have something else going on. If you enter 12.33333333 it should only accept 12.33. If you enter 12 and want it to show 12.00 then that needs to be done via renderer. I would look to correct this because the renderer just displays the underlying data in the format you tell it to, it does not change the underlying value. So you might enter 12.334 which will display via your renderer as 12.33 but then when you store the value you would have potential precision errors because it would try to store 12.334.

Anyway, this works if you drop it into array-grid.js in your examples (see the Change column):

* Ext JS Library 2.0 Beta 1
* Copyright(c) 2006-2007, Ext JS, LLC.
* [email protected]
* http://extjs.com/license
Ext.BLANK_IMAGE_URL = '../../resources/images/default/s.gif';


Ext.state.Manager.setProvider(new Ext.state.CookieProvider());

var myData = [
['3m Co',71.72,0.02,0.03,'9/1 12:00am'],
['Alcoa Inc',29.01,0.42,1.47,'9/1 12:00am'],
['Altria Group Inc',83.81,0.28,0.34,'9/1 12:00am'],
['American Express Company',52.55,0.01,0.02,'9/1 12:00am'],
['American International Group, Inc.',64.13,0.31,0.49,'9/1 12:00am'],
['AT&T Inc.',31.61,-0.48,-1.54,'9/1 12:00am'],
['Boeing Co.',75.43,0.53,0.71,'9/1 12:00am'],
['Caterpillar Inc.',67.27,0.92,1.39,'9/1 12:00am'],
['Citigroup, Inc.',49.37,0.02,0.04,'9/1 12:00am'],
['E.I. du Pont de Nemours and Company',40.48,0.51,1.28,'9/1 12:00am'],
['Exxon Mobil Corp',68.1,-0.43,-0.64,'9/1 12:00am'],
['General Electric Company',34.14,-0.08,-0.23,'9/1 12:00am'],
['General Motors Corporation',30.27,1.09,3.74,'9/1 12:00am'],
['Hewlett-Packard Co.',36.53,-0.03,-0.08,'9/1 12:00am'],
['Honeywell Intl Inc',38.77,0.05,0.13,'9/1 12:00am'],
['Intel Corporation',19.88,0.31,1.58,'9/1 12:00am'],
['International Business Machines',81.41,0.44,0.54,'9/1 12:00am'],
['Johnson & Johnson',64.72,0.06,0.09,'9/1 12:00am'],
['JP Morgan & Chase & Co',45.73,0.07,0.15,'9/1 12:00am'],
['McDonald\'s Corporation',36.76,0.86,2.40,'9/1 12:00am'],
['Merck & Co., Inc.',40.96,0.41,1.01,'9/1 12:00am'],
['Microsoft Corporation',25.84,0.14,0.54,'9/1 12:00am'],
['Pfizer Inc',27.96,0.4,1.45,'9/1 12:00am'],
['The Coca-Cola Company',45.07,0.26,0.58,'9/1 12:00am'],
['The Home Depot, Inc.',34.64,0.35,1.02,'9/1 12:00am'],
['The Procter & Gamble Company',61.91,0.01,0.02,'9/1 12:00am'],
['United Technologies Corporation',63.26,0.55,0.88,'9/1 12:00am'],
['Verizon Communications',35.57,0.39,1.11,'9/1 12:00am'],
['Wal-Mart Stores, Inc.',45.45,0.73,1.63,'9/1 12:00am']

/*ArrayReader needs a recordType object
This could be defined inline, but this enables us to add records dynamically
pass in an array of field definition objects specifying how
to reference the data in myData
'generate a constructor for a specific record layout'*/
var rt = Ext.data.Record.create([
{name: 'company'}, //name = name by which the field is referenced within the Record
//use mapping: 'reference' if name != mapping
{name: 'price', type: 'float'}, //type = how the data should be displayed
{name: 'change', type: 'float'},
{name: 'pctChange', type: 'float', sortDir: 'ASC'},
{name: 'lastChange', type: 'date', dateFormat: 'n/j h:ia'}

/*the reader will extract the field's value from the data object
Use the ArrayReader class to create an Array of Ext.data.Record objects
from an array*/
var myReader = new Ext.data.ArrayReader({
//record: 'ID',
//totalRecords: "recCount",
id:0 //could have maybe used 'recordID' (some unique key to the data)
rt //the recordType object containing the field mapping

/*Set up the store
A 'Store' is a client side cache of Ext.data.Record objects which
provide input data for widgets.
Basically you create this representation of your server side data
by defining the objects which specify:
1. where to access data
2. the Store object doesn't know what the data looks like or or what
format it is in, so a 'reader' is used to read the data into Records
var ds = new Ext.data.Store({
/*there are a few options for pulling the data you'd use
HttpProxy to pull data from the same server

/*Ext needs to know how to 'read' the data that is being returned
The reader object defined here will process the data object and return
an array of Ext.data.Record objects which are cached and
keyed per their id property mapping the data we need*/
reader: myReader
/*Load data from a passed data block. The reader which understands the format
of the data must have been configured in the constructor already*/

// example of custom renderer function
function italic(value){
return '<i>' + value + '</i>';

// example of custom renderer function
function change(val){
if(val > 0){
return '<span style="color:green;">' + val + '</span>';
}else if(val < 0){
return '<span style="color:red;">' + val + '</span>';
return val;
// example of custom renderer function
function pctChange(val){
if(val > 0){
return '<span style="color:green;">' + val + '%</span>';
}else if(val < 0){
return '<span style="color:red;">' + val + '%</span>';
return val;

/*Set up the ColumnModel object to define the initial layout of the grid.
The order specified here defines the order of initial column display.
We also define how each column in the grid correlates (maps) to our DataStore with dataIndex
It can be extended to provide custom or reusable ColumnModels */
var colModel = new Ext.grid.ColumnModel([ //instantiate ColumnModel
id: 'company',//by placing an id on this column we can later reference the column specifically
header:"Company",//header = text that appears at top of column
width: 160, //column width
sortable: true,//false (default) to disable sorting by this column
locked: false,
//resizable: false, //disable column resizing (can also used fixed = true)
dataIndex: 'company'//the field name in the DataStore this column draws its data from
//dataIndex = rt name
header: "Price",
width: 75,
sortable: true,
hidden: true, //true to hide the column
renderer: Ext.util.Format.usMoney,//optional rendering function to provide customized data formatting
dataIndex: 'price'
header: "Change",
width: 75,
sortable: true,
renderer: change,
dataIndex: 'change',
editor: new Ext.form.NumberField({
//specify options
allowBlank: false, //default is true (nothing entered)
allowNegative: false, //could also use minValue
maxValue: 100,
renderer: function(data, metadata, record, rowIndex, columnIndex, store){
return data.toFixed(2);
}//optional rendering function to provide customized data formatting
{header: "% Change", width: 75, sortable: true, renderer: pctChange, dataIndex: 'pctChange'},
{header: "Last Updated", width: 85, sortable: true, renderer: Ext.util.Format.dateRenderer('m/d/Y'), dataIndex: 'lastChange'}

// create (instantiate) the Grid
var grid = new Ext.grid.EditorGridPanel({
el:'grid-example', //html element (id of the div) where the grid will be rendered
store: ds, //the DataStore object to use (ds: is shorthand)
colModel: colModel, //the ColumnModel object to use (cm: is shorthand)
autoExpandColumn: 'company',
//footer: true,
selModel: new Ext.grid.RowSelectionModel(),
title:'Array Grid',
bbar: new Ext.PagingToolbar({
pageSize: 25,
store: ds,
displayInfo: true,
displayMsg: 'Displaying topics {0} - {1} of {2}',
emptyMsg: "No topics to display",
'-', {
pressed: true,
text: 'Show Preview',
cls: 'x-btn-text-icon details'
//toggleHandler: toggleDetails
var rz = new Ext.Resizable("grid-example",{
pinned: true,
rz.on("resize", grid.autosize, grid);