Question

I created link in the grid panel, so that when I click on the link and it will open another tab in the tab panel. Currently I render the column cell output into html href with onClick event. But it seems that got error when the renderer method openrender() call the other method newtab(), which showing error function newtab() cannot be found. It maybe because of the onClick event can only call to methods/functions outside “Ext.onReady(function(){“ block? Does anyone know solution for this, any help is much appreciated thanks.

Or if you have other ways to achieve the same purpose also feel free to share. Thanks.

function newtab(state,ptt,status){
    tabs.add({
        title: 'Order List Detail',
                iconCls: 'tabs',
                items: [
                new Ext.Panel({
                    height: 40,
                    html: 'some html'
                })
                ,layout: 'fit'
        }).show();

}

function openrender(value, p, record){
    return String.format('<a <href="#" onClick="newtab(\'{1}\',\'{2}\',\'{3}\')">{0}</a></b>',value, record.data.state, record.data.ptt, 'Open');
}

var grid = new Ext.grid.GridPanel({
frame:true,
title: 'Pending Orders',
layout: 'fit',
store: catstore,
stripeRows: true,
loadMask: true,
iconCls: 'grid',
tbar: [{
        text: 'Category',
        xtype: 'label'
    }
],
columns: [
{header: "State Name", dataIndex: 'state', sortable: true},
{header: "PTT Name", dataIndex: 'ptt', sortable: true},
{header: "Open", dataIndex: 'openstatus', sortable: true, renderer: openrender}
]
});

Answer 1

well I just found out another workaround by using grid cellclick listener

var grid = new Ext.grid.GridPanel({
frame:true,
title: 'Pending Orders',
layout: 'fit',
store: catstore,
stripeRows: true,
loadMask: true,
iconCls: 'grid',
tbar: [{
text: 'Category',
xtype: 'label'
}
],
columns: [
{header: "State Name", dataIndex: 'state', sortable: true},
{header: "PTT Name", dataIndex: 'ptt', sortable: true},
{header: "Open", dataIndex: 'openstatus', sortable: true, renderer: openrender}
],
listeners:{
cellclick: function(grid, rowIndex, columnIndex) {
// Get the Record for the row
var record = grid.getStore().getAt(rowIndex);
// Get field name for the column
var fieldName = grid.getColumnModel().getDataIndex(columnIndex);

if(fieldName == 'openstatus')
newtab(record.data.state, record.data.ptt, 'Open');
}
}
});