[SOLVED] How can I have the handler call my function?

[VinylFox]

Also, if you are passing the same arguments through to your function, then you don't need to wrap it in an anon function.

So this...

rowcontextmenu: function(thisGrid, rowIndex, evtObj){
        doRowCtxMenu(thisGrid, rowIndex, evtObj);
} 

Could be simply...

rowcontextmenu: doRowCtxMenu 

[VinylFox]

The following example might help you understand this concept.

http://github.com/VinylFox/JSConf/bl.../2010/app-a.js

Check out line 47, which calls a function on line 76

[Elijah]

Well its a bit of an overhead I guess but each area that I have made is mostly self contained. They only require information from ExtJS library and from the GLOBAL functions that I have made. I could probably if given time thin out all of my areas to use generic functions but as it stands right now each area has alot of the same code. So i can just pull them out without breaking anything else.

For any grids I add they would have their own context menu handler and not a shared one.

each grid I use is wrapped in a format such as

    var myFn1 = function(){
        var self = new Object;
        self.getDisplayItem = function(argCnfg){return createGP(argCnfg)};

        function createGP(argCnfg){
            // Create a new configuration object of a grid panel for displaying information
            return {
                // Set the ID to this grid panel
                    id:argCnfg.id,
                // Set the title to this grid panel
                    title: argCnfg.title,
                // Set the datastore to this grid panel
                    ds: argCnfg.dataStore,
                xtype:'grid',
                ...
        
                listeners:{
                    // prevent right clicking menus
                    contextmenu: function(evtObj){
                        evtObj.stopEvent();
                    },
                    // custom right clicking menus
                    rowcontextmenu: function(thisGrid, rowIndex, evtObj){
                        // todo check to see if the user is an admin
                        if(3 == 3){
                            doRowCtxMenu(thisGrid, rowIndex, evtObj);
                        }
                    }, // rowselect
                    rowdblclick: function(argGrid, rowIndex, e) {
                        GLOBAL_EXTJS.popupUrl({url:argGrid.getStore().getAt(rowIndex).data.productURL, winName:'ptsWin', options:'width=800,height=600,top=65,left=65,menubar=yes,resizable=yes,scrollbars=yes,toolbar=yes,location=yes'});
                    },
                    // once the panel is displayed call to get the store loaded
                    show: function(argGrid){
                        this.doLayout();
                        // Call to load the data store only load the store if it is empty
                        if(this.getStore().getCount() == 0){
                            refreshGrid(argGrid);
                        } // if
                    }
                } //listeners
            };
        }

    return self;
    };

[Elijah]

Vinyl, thanks for the tip. However in my situation it would not apply because I need to have it conditional where if the user is not an admin, I do not want them to get the menu.

Also, if you are passing the same arguments through to your function, then you don't need to wrap it in an anon function.

So this...

rowcontextmenu: function(thisGrid, rowIndex, evtObj){
        doRowCtxMenu(thisGrid, rowIndex, evtObj);
} 

Could be simply...

rowcontextmenu: doRowCtxMenu 

[VinylFox]

It always applies, you just need to think a little further ahead. Your code structure does not lend itself to being extended or programatically modified, it will just end up being a huge copy & paste festival.

[Animal]

That's a weird construct.

If you really want some single function object, then create a constructor for it:

MyFn = Ext.extend(Object, {
    getDisplayItem: createGP(argCnfg){
            // Create a new configuration object of a grid panel for displaying information
            return {
                // Set the ID to this grid panel
                    id:argCnfg.id,
                // Set the title to this grid panel
                    title: argCnfg.title,
                // Set the datastore to this grid panel
                    ds: argCnfg.dataStore,
                xtype:'grid',
                ...
        
                listeners:{
                    // prevent right clicking menus
                    contextmenu: function(evtObj){
                        evtObj.stopEvent();
                    },
                    // custom right clicking menus
                    rowcontextmenu: function(thisGrid, rowIndex, evtObj){
                        // todo check to see if the user is an admin
                        if(3 == 3){
                            doRowCtxMenu(thisGrid, rowIndex, evtObj);
                        }
                    }, // rowselect
                    rowdblclick: function(argGrid, rowIndex, e) {
                        GLOBAL_EXTJS.popupUrl({url:argGrid.getStore().getAt(rowIndex).data.productURL, winName:'ptsWin', options:'width=800,height=600,top=65,left=65,menubar=yes,resizable=yes,scrollbars=yes,toolbar=yes,location=yes'});
                    },
                    // once the panel is displayed call to get the store loaded
                    show: function(argGrid){
                        this.doLayout();
                        // Call to load the data store only load the store if it is empty
                        if(this.getStore().getCount() == 0){
                            refreshGrid(argGrid);
                        } // if
                    }
                } //listeners
            };
        }
});

But I don't think that's what you want. It's what you ended up with.

Maybe you in fact want a GridPanel subclass with some extra functions.

[Elijah]

I have no doubt that both of you are correct. I have been meaning to look into the whole extend and other features i have seen people implementing in their code I just have not had time.
Background of this app.
1. None of the developers had a clue what we were doing with ExtJS
2. Told to get the desktop example up and running with some customized links etc ASAP.
3. Instead of giving us time to actually read and figure out what were doing with this library we have been just making things work.
4. Just recently bought book ExtJS in Action so far very good but left off at around pg 180 due to being pulled off onto other tasks, deadlines and family health issues.
5. So much code was built up to make things work that the unfortunate path ahead is to at some point go back and restructure section by section, which lends to the copy and paste. This will allow us to drastically change sections without affecting other areas until we have time to address them.

I am assuming that the book I purchased will also address Extend and other features I SHOULD know of to help with the development.

[VinylFox]

...I am assuming that the book I purchased will also address Extend and other features I SHOULD know of to help with the development.

Without a doubt. That book lays down a very solid code structure that will make your life much easier.