CODEWITHSUNDEEP
formattingextjs4.1extjs-grid
SharpCoder
SharpCoder

Reputation: 19165

Formatting ExtJS grid column

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:

  1. 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%.
  2. 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

Upvotes: 1

Views: 6236

Answers (3)

user1636522
user1636522

Reputation:

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 + '%';
}

Upvotes: 2

Hariharan
Hariharan

Reputation: 3263

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...

Upvotes: 1

existdissolve
existdissolve

Reputation: 3114

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.

Upvotes: 0

Related Questions