Results 1 to 4 of 4

Thread: Destroying Menu doesnt work.

  1. #1

    Default Answered: Destroying Menu doesnt work.

    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.
    Code:
                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.
    Code:
                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.

  2. 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:
    PHP Code:
    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(viewmodelrowindexevt) {
            
    evt.stopEvent();
            
    this.menu.showAt(evt.getXY());
        },

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

    usage:
    PHP Code:
    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
                        
    }
                    ]
                }
            ]
        }; 

  3. #2
    Sencha User jay@moduscreate.com's Avatar
    Join Date
    Mar 2007
    Location
    DC Area =)
    Posts
    16,364
    Answers
    102

    Default

    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:
    PHP Code:
    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(viewmodelrowindexevt) {
            
    evt.stopEvent();
            
    this.menu.showAt(evt.getXY());
        },

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

    usage:
    PHP Code:
    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
                        
    }
                    ]
                }
            ]
        }; 

  4. #3

    Default

    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.

  5. #4

    Default

    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.

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •