Question

is there a way to pass external parameter into Grid renderer function?

For example, considering..

function excelRenderer(value, p,record){
  return String.format('<a href="excel.jsp?view=aging&prod_type={0}&value={1}" target="_blank"><img src="images/excel.png" border="0"/></a>',record.data.prod_type,value);
} 

function newtab(status){
//add tab
  tabs.add({ 
  ...
  items: new Ext.grid.GridPanel({
                region:'center',
                frame: true,
                title: 'testing',
                store: new Ext.data.Store({
                    ...
                }),
                columns: [
                {header: "Column 2", dataIndex: 'col2', sortable: true, renderer: excelRenderer},
                {header: "Column 1", dataIndex: 'col1', sortable: true, renderer: excelRenderer}
                ]
            }
}

now I want to add external parameter status into the renderer so that the URL rendered will look like

excel.jsp?view=aging&prod_type=data&value=testing&status=pending

Any help is much appreciated. Thanks

Answer 1

Move the renderer function definition inside the newTab() function body:

function newtab(status){
    var excelRenderer = function(value, p,record){
        return String.format('<a href="excel.jsp?view=aging&prod_type={0}&value={1}&status={2}" target="_blank"><img src="images/excel.png" border="0"/></a>',record.data.prod_type,value, status);
    } 

    //add tab
    tabs.add({ 
        ...
        items: new Ext.grid.GridPanel({
            region:'center',
            frame: true,
            title: 'testing',
            store: new Ext.data.Store({
                ...
            }),
            columns: [
                {header: "Column 2", dataIndex: 'col2', sortable: true, renderer: excelRenderer},
                {header: "Column 1", dataIndex: 'col1', sortable: true, renderer: excelRenderer}
            ]
        }
    });
}

There are some other ways (e.g. creating a function callback to excelRenderer that’s being bound to a supplemental parameter status), but this seems to be the easiest way.

EDIT (second option using bound parameters):

var excelRenderer = function(v, m, r, ri, ci, s, status){
    return String.format('<a href="excel.jsp?view=aging&prod_type={0}&value={1}&status={2}" target="_blank"><img src="images/excel.png" border="0"/></a>',r.data.prod_type, v,  status);
} 

function newtab(status){
    var statusExcelRenderer = excelRenderer.createDelegate(null, [ status ], true);

    //add tab
    tabs.add({ 
        ...
        items: new Ext.grid.GridPanel({
            region:'center',
            frame: true,
            title: 'testing',
            store: new Ext.data.Store({
                ...
            }),
            columns: [
                { header: "Column 2", dataIndex: 'col2', sortable: true, renderer: statusExcelRenderer },
                { header: "Column 1", dataIndex: 'col1', sortable: true, renderer: statusExcelRenderer }
            ]
        }
    });
}