PDA

View Full Version : Destroying Menu doesnt work.



Huggybaer
27 Jan 2012, 6:54 AM
Hey,

I'm quite new to Ext JS 4 and so to this forum, too.
I've got a problem when using a ContextMenu within a GridPanel. The ContextMenu refers to a delete-function which should delete an 'article' with an 'article-index' from the grid. All works fine so far. The problem appears, when I try to open the ContextMenu a second time. Then it still has the same 'article-index' from the 'article' which has been deleted before.
I then tried to destroy the whole ContextMenu, to get rid of that old record too. But it doesnt work. Error is: "me.dom is undefined".

This doCellCtxMenu-function is triggered by the itemcontextmenu-Listener of the grid.


var doCellCtxMenu = function(editorGrid, record, cellIndex, rowIndex, evtObj) {
evtObj.stopEvent();
if (! editorGrid.rowCtxMenu) {
editorGrid.rowCtxMenu = Ext.create('Ext.menu.Menu',{
autoDestroy: true,
id : 'rowCtxMenu',
items : [
{
text : 'Insert Record',
handler : onInsertRecord
},
{
text : 'Delete Record',
data : record,
handler : doDelete
}
],
listeners: {
hide: function(){

}
}
});

}
editorGrid.getSelectionModel().select(rowIndex,cellIndex);
editorGrid.rowCtxMenu.showAt(evtObj.getXY());
};


This doDelete-function is triggered by using the Delete-Button of the ContextMenu.


var doDelete = function(record){
var grid = Ext.getCmp('artikelliste');
var recordToDelete = record.data.data.AINDEX;
if (recordToDelete.phantom){
artikelstore.remove(record.data);
return;
}

grid.el.mask('Updating','x-mask-loading');

Ext.Ajax.request({
url : 'r_artikel/dataDelete.php',
params : {
records : recordToDelete
},
success : function(){
grid.el.unmask();
artikelstore.remove(record.data);

}
});
};


Does anyone have an idea how I can remove the old record?
Or does anyone have a better way to implement such a contextmenu?

Thanks for your help,
Huggy.

jay@moduscreate.com
27 Jan 2012, 1:44 PM
Huggy,

Some things alarm me.
- Static ids.
- Functions declared that should be reusable.


That said, i do not believe autoDestroy is working like you think it is.

You must destroy the instance of menu. To remove the record, you should do something like:
recordToDelete.store.remove(recordToDelete);
Feel free to use this menu plugin that I provide in my book:


Ext.define('MyApp.plugins.ViewContextMenu', {
extend : 'Ext.AbstractPlugin',
alias : 'plugin.viewcontextmenu',

init : function() {
if (this.menu) {
if (! (this.menu instanceof Ext.menu.Menu)) {
this.menu = this.buildMenu(this.menu);
}

this.cmp.on({
scope : this,
itemcontextmenu : this.onItemContextMenu
});
}
},

buildMenu : function(menuCfg) {
if (Ext.isArray(menuCfg)) {
menuCfg = {
items : menuCfg
};
}

return Ext.create('Ext.menu.Menu', menuCfg);
},

onItemContextMenu : function(view, model, row, index, evt) {
evt.stopEvent();
this.menu.showAt(evt.getXY());
},

destroy : function() {
if (this.menu && this.menu.destroy) {
this.menu.destroy();
}
}
});




usage:


var grid = {
xtype : 'grid',
store : remoteJsonStore,
columns : [
{
header : 'Last Name',
dataIndex : 'lastname',
flex : 1
},
{
header : 'First Name',
dataIndex : 'firstname',
flex : 1
}
],
plugins : [
{
ptype : 'viewcontextmenu',
menu : [
{
text : 'Add Record',
handler : onMenuItemClick
},
{
text : 'Update Record',
handler : onMenuItemClick
},
{
text : 'Delete Record',
handler : onMenuItemClick
}
]
}
]
};

Huggybaer
29 Jan 2012, 3:49 AM
Thanks for your reply.
You're right. The use of autoDestroy was just a last ditch-attempt.
Didn't really believe that it would work, but forgot to remove it.
At the moment, I'm unluckily not able to try your sourcecode, but I will as soon as possible. ;)

Huggybaer
30 Jan 2012, 5:31 AM
Hey,

okay, I tried to use your plugin. Thx so far ;)
My problem now is, how the function "onMenuItemClick" can use the params from onItemContextMenu (view, model, row, index, evt). Because this function needs to know what row has been clicked on.

Greetz, Huggy.