row Attachment Action uses same instance of custom grid panel

[Rishi7]

When my form has more than one custom grid then the rowAttachmentActions's on event always fires for last grid in the form.

Below is custom grid code.


function renderLinkAttachment(val) {
return '<a class="gridlink" href="#">' + val + '</a>';
}

var rowAttachmentActions = new Ext.ux.grid.RowActions({
header: 'Actions',
autoWidth: false,
width: 15,
actions: [{
name: 'delete',
iconCls: 'tDelete',
style: 'width:15px',
tooltip: 'Delete File'
}]
});

var attachmentColModel = new Ext.grid.ColumnModel([new Ext.grid.RowNumberer(),
{
header: "File Name",
width: 70,
sortable: true,
dataIndex: 'Name',
renderer: renderLinkAttachment
},
rowAttachmentActions]);

Ext.ux.grid.Attachment = Ext.extend(Ext.grid.GridPanel, {
// constructor function
constructor: function (config) {
Ext.apply(this, {
id: this.id,
recordId: this.recordId,
attachmentTypeId: this.attachmentTypeId,
processId: this.processId,
colModel: attachmentColModel,
plugins: [rowAttachmentActions],
frame: true,
loadMask: false,
viewConfig: {
forceFit: true
},
autoHeight: true,
autoWidth: true,
columnLines: true,
enableHdMenu: false,
sm: new Ext.grid.RowSelectionModel({
singleSelect: true
}),
tbar: [{
ref: '../addBtn',
text: 'Add',
id: 'grdAttachmentBtnAdd',
iconCls: 'tNew',
handler: function () {
var attachmentFileDialog = new FileUploadDialog({
owner: this.refOwner
});
attachmentFileDialog.on('close', function (p) {
this.owner.getStore().load();
});
Ext.getCmp('hidRecordId').setValue(this.refOwner.recordId);
Ext.getCmp('hidProcessId').setValue(this.refOwner.processId);
if (Ext.isDefined(this.refOwner.attachmentTypeId)) Ext.getCmp('hidAttachmentTypeId').setValue(this.refOwner.attachmentTypeId);
attachmentFileDialog.show();
}
}],
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 == 'Name') FileDownload(record.data);
}
}
});
Ext.ux.grid.Attachment.superclass.constructor.apply(this, arguments);
}
});




rowAttachmentActions.on('action', function (grid, record) {
Ext.MessageBox.show({
title: 'Confirm',
msg: 'Are you sure to delete the selected file?',
buttons: Ext.Msg.YESNOCANCEL,
icon: Ext.Msg.QUESTION,
fn: function (btn) {
if (btn == 'cancel') {
//do something
}
if (btn == 'yes') {
//do something
FileDelete(record.data, grid);
}
}
});

});


Grid code used in the form.


var grdAttachment = new Ext.ux.grid.Attachment({
id: "grdAttachment",
store: smrAttachmentStore,
processId: $Constants.ProcessCode,
recordId: Ext.get('id').dom.value,
attachmentTypeId: $Constants.defaultGuid
});

[skirtle]

This forum is for ExtJS 4, not 3.

I'm not familiar with Ext.ux.grid.RowActions but from a quick look at your code it seems that you are sharing the same instance of this plugin between all instances of your grid. Each grid will initialize itself with the plugin. My guess would be that this plugin is not intended to be shared in this way and each time it is initialized it overwrites internal references to the grid with the new grid.

Take a look at the plugin's init() method, I imagine it'll reveal all pretty quickly.