Extjs网格与rowbody按钮处理程序
问题描述:
我在extjs 4.2.1中有一个网格面板,我在其上使用ftype rowbody向每一行添加其他元素。在这种情况下,我正在为每行添加一行按钮(标签)。Extjs网格与rowbody按钮处理程序
features: [{
ftype: 'rowbody',
getAdditionalData: function(data, idx, record, orig) {
var headerCt = this.view.headerCt
var colspan = headerCt.getColumnCount()
var rowData = ''
record.data.tags.forEach(function(tag) {
rowData += '<button class="tagDiv">' + tag.name + '</button>'
})
// Usually you would style the my-body-class in CSS file
return {
rowBody: rowData,
rowBodyCls: 'tagRow',
rowBodyColspan: colspan
}
}
}, {
ftype: 'rowwrap'
}],
所以标签在行中正确显示,但我想添加监听器(点击处理程序)到这些单独的标签。这是可能的使用rowbody或者我应该使用其他方法添加这些标记
答
是的,您可以添加使用某些全局范围的点击处理程序。我的建议是为您的网格类定义一个静态处理程序:
Ext.define('MyApp.view.MyGrid', {
extend: 'Ext.grid.Panel',
xtype: 'orderlinesgrid',
requires: [
'Ext.grid.feature.RowBody'
],
statics: {
onTagClick: function(btn, tag) {
// Click handler code...
}
}
features: [{
ftype: 'rowbody',
getAdditionalData: function(data, idx, record, orig) {
var headerCt = this.view.headerCt
var colspan = headerCt.getColumnCount()
var rowData = ''
record.data.tags.forEach(function(tag) {
rowData += '<button class="tagDiv" onclick="MyApp.view.MyGrid.onTagClick(this,\'' + tag.name + '\')">' + tag.name + '</button>'
})
// Usually you would style the my-body-class in CSS file
return {
rowBody: rowData,
rowBodyCls: 'tagRow',
rowBodyColspan: colspan
}
}
}, {
ftype: 'rowwrap'
}],