Formatting ExtJS grid column - formatting

Question

I know I can format an ExtJs grid's column by using Ext.Util.Format class.
I want to know how can I apply following format types:
Showing percent symbol for a number without multiplying it by 100. So If the value is 10.34 it should show 10.34% and now 1034%.
If the number is negative it should be shown in red color insde brackets. so -23 should be shown in red color as (23).
Thank you

Answer 1

I would have liked to have some more details :
Do you want to apply both renderings to a single column?
Could you provide a concise code sample of what you have already tried (store/model bound to the grid panel, raw data to feed the store, column configuration(s))?
Anyway, I can give it a try (you should read the doc first).
Renderer 1 :
renderer: function (value) {
return value + '%';
}
Renderer 2 :
renderer: function (value) {
return value < 0
? '<span style="color:red">(' + Math.abs(value) + ')</span>'
: value;
}
Frankenstein's monster :
renderer: function (value) {
return value < 0
? '<span style="color:red">(' + Math.abs(value) + '%)</span>'
: value + '%';
}

Answer 2

Yes, you can achieve through renderer concept, please refer below sample for your queries.
{
text : 'Number (Percentage)',
width : 80,
sortable : true,
renderer : function(val) {
if (val > 0) {
return '<span style="color:green;">' + val + '</span>';
} else if (val < 0) {
return '<span style="color:red;">' + val + '</span>';
}
return val+"%";
},
dataIndex: 'numberChange' // place your dataindex binding here
}
Thanks, Hope this will help you...

Answer 3

You could easily implement a renderer for the columns, and transform the results however you'd like. All you have to do is return the transformed string from the renderer; plus, you have access to the full Ext.data.Record for the grid row (as well as the store, for that matter), so you can also easily do custom renderings based on other data within the record, if needed.