Cannot understand the renderer of field ExtJS6.2

Question

I'm quite new in ExtJS and JS both.

I have an Ext.Grid and the column that should display the month and year e.g. "august 2019".

By adding a new column the month should decrement, so the result should be: 1st add: august 2019 2nd add: july 2019 3d add: june 2019 ...

I also have a widget for choosing data by only month and a year from here: EXTJS 5 - Date picker year and month only

Maybe I should provide a bit more code or can you advice what I should learn ?

 dataIndex: 'picker',
...

renderer: function (value, cell, record) {
            if (!value && record.get('year') && record.get('month')) {
                value = new Date(record.get('year'), record.get('month') - 1);
                record.set('picker', value);
            }
            return Ext.Date.format(value, 'M, Y');

Now months are incrementing,instead of decrementing.

Can you attach an example on fiddle? – norbeq Aug 01 '19 at 20:56 — norbeq, Aug 01 '19 at 20:56

score 0 · Answer 1 · answered Aug 02 '19 at 08:05

The renderer function in ExtJS is merely a function that, for the given column, is called for every row in the grid. The output of this function is used to render the text inside that particular cell of the grid.

If what you want to do is allow to dynamically add columns to the grid, with the new columns having the value of month "decremented by 1" compared to the previous month, what you have to do is to build a renderer that has some specific additional parameter attached to it, which you can do for example by using JavaScript's bind method. Every time you add the column, you'll create an instance of such renderer passing a different value.

The following StackOverflow post will give you a hint on how to make columns dynamic:

How to dynamically add columns for Grid ExtJs

As for the renderer function and its usage, it goes more or less as follows:


function customRenderer(value, cell, record) {
    var result = value - this.index;
    return value + " - " + this.index + ' = ' + result;
}

var columns = [];
for(var i = 0; i < 10; i++) {
    var column = {};
    column.dataIndex = 'column' + i;
    column.text = 'Column ' + i;
    column.renderer = customRenderer.bind({ index: i, column: column });
}

reconfigureExtJSColumnsPseudoFunction(columns);

The above code, which you will of course have to tune based on your needs, takes the customRenderer function and changes its scope, thus allowing you to provide it with additional context. Each iteration in the for loop will create a new "version" of that function running in a different scope (through the bind method) thus ensuring that each column will receive a different value for the index property, allowing you to dynamically change the amount you will then subtract based on the column index itself.

Cannot understand the renderer of field ExtJS6.2

1 Answers1