[CLOSED]Grid Numeric Formatting

[GordS]

I have a grid and one of the columns has a dollar value. I would like to format this column so that 10000 looks like 10,000.

My customers work in different currencies. It would be nice if we could show it as $10,000 or £10,000 or €10,000.

I think I should change the view for that column by adding 'xtype:numberfield' and 'format:????'. I am not sure what to set the format to get the desired result I am looking for.

[richard.milone]

How do you know which currency symbol you want to show? Is it included in one of the columns in the grid data?

[GordS]

Richard Currently the currency is not included in the grid. But I can add the currency symbol if it is required too make it work.

[richard.milone]

You can do any kind of formatting on a column you want by using a "renderer." Try adding something like this on you number column definition. In my example where it says "CURRENCY_FIELD_NAME" replace that with the field name in your JsonStore that contains your currency symbol. To be sure you know what this is doing please review the documentation Ext-->grid-->Column. There's an example at the top of that doc that shows how to use a renderer and provides a pretty good explanation of how it works. You can see in my example I'm also using a number formatter to give you the commas that you want. To review other formatting options, review the doc at Ext-->util-->Format and look at the number method.


renderer: function(value, metaData, record, rowIndex, colIndex, store) {
return record.get('CURRENCY_FIELD_NAME') + Ext.util.Format.number(value, '0,000');
}

[GordS]

I am trying to format the number before adding the currency symbol. When I get that working I will add the currency symbol. According to the documentation when I call Ext.util.Format.number, the first parameter needs to be the value. Being new to ExtJS and Valence I am not sure what the value syntax should be. I am certain it is a simple thing. I have spent a few hours researching with no luck to see what the exact syntax should be. I have attached my HTML file to help with this. Thanks.

[richard.milone]

Here's the syntax you should use for the renderer:


columns: [{
header: '<b>Code</b>',
width: 44,
sortable: true,
dataIndex: 'ABCODE'
}, {
header: '<b>Description</b>',
width: 225,
sortable: true,
dataIndex: 'ABDESCRIPT'
}, {
header: '<b>Potential Value</b>',
width: 165,
sortable: true,
renderer: function(value, metaData, record, rowIndex, colIndex, store) {
return Ext.util.Format.number(value, '0,000');
},
dataIndex: 'ABPTLVALUE'
}]

[GordS]

Richard. That worked. I will try and now add the currency symbol to it. Thanks

[GordS]

I decided to try the embed of vvOut to return the currency symbol. I am not sure how I should define the the symbol in the HTML.

Here is my RPG code:


vvOut.embed='"BCSYMBOL":"' + BcSymbol + '"';

Here is my Response in Firebug

{"BCSYMBOL":"$","autogrid":[{"ABCODE":1,"ABDESCRIPT":"Up to $1,000","ABPTLVALUE":1000},{"ABCODE":2,"ABDESCRIPT":"$1,001 to $2,500","ABPTLVALUE":2500},{"ABCODE":3,"ABDESCRIPT":"$2,501 to $5,000","ABPTLVALUE":5000},{"ABCODE":4,"ABDESCRIPT":"$5,001 to $10,000","ABPTLVALUE":10000},{"ABCODE":5,"ABDESCRIPT":"$10,001 to $20,000","ABPTLVALUE":20000},{"ABCODE":6,"ABDESCRIPT":"$20,001 to $50,000","ABPTLVALUE":50000},{"ABCODE":7,"ABDESCRIPT":"$50,001 to $100,000","ABPTLVALUE":100000},{"ABCODE":8,"ABDESCRIPT":"$100,001 to $250,000","ABPTLVALUE":250000},{"ABCODE":9,"ABDESCRIPT":"$250,001 to $500,000","ABPTLVALUE":500000},{"ABCODE":10,"ABDESCRIPT":"$500,001 and above","ABPTLVALUE":1000000}]}

Here is the HTML code I changed.


//### GLOBAL SETTINGS/VARIABLES ################################################## #################
var BCSYMBOL;

columns: [
{header: '<b>Code</b>',width: 44,sortable: true,dataIndex: 'ABCODE'},
{header: '<b>Description</b>',width: 225,sortable: true,dataIndex: 'ABDESCRIPT'},
{header: '<b>Potential Value</b>',width: 165,sortable: true,
renderer: function(value, metaData, record, rowIndex, colIndex, store) {
return BCSYMBOL + Ext.util.Format.number(value, '0,000');},dataIndex: 'ABPTLVALUE'}
],

The BCSYMBOL shows as undefined on the grid displayed. Obviously I have not defined this field properly or in the right place.

[richard.milone]

Take a look at the variables that are passed into the renderer function. One of them is the "store" object. You should be able to pull that BCSYMBOL variable out of the root of the store object by the syntax store.data.BCSYMBOL.

[GordS]

Richard I made the change you suggested. It still shows as undefined and then the number. In Firebug, when I click on the JSON tab it shows BCSYMBOL and its value. I have attached the HTML file. We also need to right justify this column. I am starting to research that.

[GordS]

I changed the HTML I just posted to right justify the Potentail Value column but it does not work. I got it right from the EXTJS examples page. Here is the code I just changed. I added "align:'right'".


{header: '<b>Potential Value</b>',
dataIndex: 'ABPTLVALUE',
width: 165,
sortable: true,
align: 'right',
renderer: function(value, metaData, record, rowIndex, colIndex, store) {
return store.data.BCSYMBOL + Ext.util.Format.number(value, '0,000');}
}

[sean.lanktree]

What does not work? It does not right justify or are you getting some sort of error?

[GordS]

Sorry I was not clear. It does not right justify. I am not getting an error.

Code Description Potential Value
1 Up to $1,000 undefined1,000
2 $1,001 to $2,500 undefined2,500

This is a small example of what my grid looks like.

[sean.lanktree]

Try changing your renderer to :


{header: '<b>Potential Value</b>',
dataIndex: 'ABPTLVALUE',
width: 165,
sortable: true,
align: 'right',
renderer: function(value, metaData, record, rowIndex, colIndex, store) {
return store.reader.jsonData.BCSYMBOL + Ext.util.Format.number(value, '0,000');}
}

[GordS]

Sean That worked even the align:right. Thanks for your help. It was timely I have just written another program that will require the same logic.