PDA

View Full Version : Open tab through clicking on link in GridPanel (column renderer)



tsubasa85
30 Oct 2010, 10:05 PM
Hi, 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}
]
});

tsubasa85
31 Oct 2010, 10:04 PM
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');
}
}
});

Condor
31 Oct 2010, 11:24 PM
Much better! In Ext 3.3 you could also have used an ActionColumn for this.