CODEWITHSUNDEEP
extjs
Victor
Victor

Reputation: 17107

extjs apply formatting to grid column

In extjs, if I have a grid definition like this:

xtype: 'grid',
store: 'someStore',
flex: 1,
frame: true,
loadMask: true,
titleCollapse: true,
cls: 'vline-on',
ref: '../someGrid',
id: 'someGrid',
columns: [
           {
             xtype: 'gridcolumn',
             header: 'ID',
             dataIndex: 'someID',
             sortable: true,
              width: 100
            }

Is there a way to apply some formatting to this column? For example, this field is a number and if i wish to set a decimal precision..can I do it? Or do I need to apply formatting when the store is being loaded in my java file? My guess is the latter??

Upvotes: 2

Views: 12305

Answers (4)

Forcom
Forcom

Reputation: 21

I tried the renderer config KomarSerjio suggested and it worked brilliantly for me when using Sencha Ext JS 6. I used it to zero fill some time data I was receiving which was missing the prefix zero to make it a 24 hour time. So I tried the following and it worked great! Thank you. 

Ext.define('ViewLL.view.main.List', {
    extend: 'Ext.grid.Panel',
    xtype: 'mainlist',
    reference: 'mainList',
    flex: 1,


    requires: [
        'ViewLL.store.Datastore'
    ],

    title: 'Records',

    store: {
        type: 'datastore'

    },

    columns: 
        { text:'Pln On Site Time', 
          dataIndex:'plnOnSiteTime', 
          renderer: function (number) {
          if (number<=2400) { number = ("000"+number).slice(-4); }
          return number;
          }
        }

});

Prior to renderer config my grid was displaying values e.g. 926, 800, 1000. Post adding function via renderer config my grid displayed values e.g. 0926, 0800, 1000

Upvotes: 0

Ravi Raj
Ravi Raj

Reputation: 73

For formatting your grid decimal value to restrict after point to two number or till you want simply use below code to your column : renderer: Ext.util.Format.numberRenderer('00.00')

Upvotes: 0

Impiastro
Impiastro

Reputation: 858

If you want to show decimal precision inside a grid column you should define the dataindex in your store of "float" type:

...
, {name: 'column_data_name', type: 'float'}
...

Then inside the grid column definition you should specify a renderer, as suggested by KomarSerjio, and use it.

function floatRenderer(value) {
    if (value) {
        var val = value.toFixed(2);

        return addSeparatorsNF(val, '.', ',', '.');
    }
    else return "";
}
...
, { id:'column_data_name', header: 'label', dataIndex: 'column_data_name' , renderer: floatRenderer ,  align: 'right' }
...

The function addSeparatorsNF has been suggested here.

Upvotes: 1

KomarSerjio
KomarSerjio

Reputation: 2911

Use "renderer" option. You can define you function there. For example i want to show someID wrapped in some tag: 

columns: [
       {
         xtype: 'gridcolumn',
         header: 'ID',
         dataIndex: 'someID',
         sortable: true,
         width: 100,
         renderer: function(value) {
             // your logic here
             return "<b>" + value + "</b>";
         }
        }

Upvotes: 9

Related Questions