src/grid/column/Number.js

   1 /**
   2  * @class Ext.grid.column.Number
   3  * @extends Ext.grid.column.Column
   4  * <p>A Column definition class which renders a numeric data field according to a {@link #format} string.</p>
   5  *
   6  * {@img Ext.grid.column.Number/Ext.grid.column.Number.png Ext.grid.column.Number cell editing}
   7  *
   8  * ## Code
   9  *     Ext.create('Ext.data.Store', {
  10  *        storeId:'sampleStore',
  11  *        fields:[
  12  *            {name: 'symbol', type: 'string'},
  13  *            {name: 'price', type: 'number'},
  14  *            {name: 'change', type: 'number'},
  15  *            {name: 'volume', type: 'number'},
  16  *        ],
  17  *        data:[
  18  *            {symbol:"msft", price:25.76, change:2.43, volume:61606325},
  19  *            {symbol:"goog", price:525.73, change:0.81, volume:3053782},
  20  *            {symbol:"apple", price:342.41, change:1.35, volume:24484858},
  21  *            {symbol:"sencha", price:142.08, change:8.85, volume:5556351}
  22  *        ]
  23  *    });
  24  *
  25  *    Ext.create('Ext.grid.Panel', {
  26  *        title: 'Number Column Demo',
  27  *        store: Ext.data.StoreManager.lookup('sampleStore'),
  28  *        columns: [
  29  *            {text: 'Symbol',  dataIndex: 'symbol', flex: 1},
  30  *            {text: 'Current Price',  dataIndex: 'price', renderer: Ext.util.Format.usMoney},
  31  *            {text: 'Change',  dataIndex: 'change', xtype: 'numbercolumn', format:'0.00'},
  32  *            {text: 'Volume',  dataIndex: 'volume', xtype: 'numbercolumn', format:'0,000'}
  33  *        ],
  34  *        height: 200,
  35  *        width: 400,
  36  *        renderTo: Ext.getBody()
  37  *    });
  38  *
  39  * @xtype numbercolumn
  40  */
  41 Ext.define('Ext.grid.column.Number', {
  42     extend: 'Ext.grid.column.Column',
  43     alias: ['widget.numbercolumn'],
  44     requires: ['Ext.util.Format'],
  45     alternateClassName: 'Ext.grid.NumberColumn',
  46
  47     /**
  48      * @cfg {String} format
  49      * A formatting string as used by {@link Ext.util.Format#number} to format a numeric value for this Column
  50      * (defaults to <code>'0,000.00'</code>).
  51      */
  52     format : '0,000.00',
  53     constructor: function(cfg) {
  54         this.callParent(arguments);
  55         this.renderer = Ext.util.Format.numberRenderer(this.format);
  56     }
  57 });