How to call this onclick javascript function in my architecture

I am using this article of architecture http://blog.extjs.eu/know-how/writing-a-big-application-in-ext/

In my one class of Dashboardgrid i have two functions are :

,linkRenderer : function (data, cell, record, rowIndex, columnIndex, store) {
        if  (data != null)  {
            return '<a href="javascript:void(0)" onclick="this.resellerwindow(\'' +record.data.cityname+'\')">'+ data +'</a>';
        }
        return data;
    },
    resellerwindow : function (cityname) {
        // render the grid to the specified div in the page
        // resellergrid.render();
        resellerstore.load();
        wingrid.show(this);
    } 

when the click event of linkrendrer function is called it gives error

this.resellerwindow is not a function

where and how should i put resellerwindow function ?

My ResellerDashBoard Class

Application.DashBoardGrid = Ext.extend(Ext.grid.GridPanel, {
     border:false
    ,initComponent:function() {
        var config = {
            store:new Ext.data.JsonStore({
                // store configs
                autoDestroy: true,
                autoLoad :true,
                url: 'api/index.php?_command=getresellerscount',
                storeId: 'getresellerscount',
                // reader configs
                root: 'cityarray',
                idProperty: 'cityname',
                fields: [
                    {name: 'cityname'},
                    {name: 'totfollowup'},
                    {name: 'totcallback'},
                    {name: 'totnotintrested'},
                    {name: 'totdealsclosed'},
                    {name: 'totcallsreceived'},
                    {name: 'totcallsentered'},
                    {name: 'totresellerregistered'},
                    {name: 'countiro'},
                    {name: 'irotransferred'},
                    {name: 'irodeferred'}
                ]
            })
            ,columns: [
                {
                    id       :'cityname',
                    header   : 'City Name', 
                    width    : 120, 
                    sortable : true, 
                    dataIndex: 'cityname'
                },
                {
                    id       :'countiro',
                    header   : ' Total Prospect', 
                    width    : 100, 
                    sortable : true, 
                    dataIndex: 'countiro'
                },
                 {
                    id       :'irotransferred',
                    header   : 'Calls Transfered By IRO', 
                    height : 50,
                    width    : 100, 
                    sortable : true, 
                    dataIndex: 'irotransferred'
                },
                {
                    id       :'irodeferred',
                    header   : ' Calls Deferred By IRO', 
                    width    : 100, 
                    sortable : true, 
                    dataIndex: 'irodeferred'
                },
                {
                    id       :'totcallsentered',
                    header   : ' Total Calls Entered', 
                    width    : 100, 
                    sortable : true, 
                    dataIndex : 'totcallsentered',
                    renderer : this.linkRenderer
                },
                {
                    id       :'totfollowup',
                    header   : ' Follow Up', 
                    width    : 100, 
                    sortable : true, 
                    dataIndex: 'totfollowup'
                },
                {
                    id       :'totcallback',
                    header   : ' Call Backs', 
                    width    : 100, 
                    sortable : true, 
                    dataIndex: 'totcallback'
                },
                {
                    id       :'totnotintrested',
                    header   : ' Not Interested', 
                    width    : 100, 
                    sortable : true, 
                    dataIndex: 'totnotintrested'
                },
                {
                    id       :'totdealsclosed',
                    header   : ' Deals Closed', 
                    width    : 100, 
                    sortable : true, 
                    dataIndex: 'totdealsclosed'
                },
                 {
                    id       :'totresellerregistered',
                    header   : ' Reseller Registered', 
                    width    : 100, 
                    sortable : true, 
                    dataIndex: 'totresellerregistered'
                }
            ]
          ,plugins :[]
          ,viewConfig :{forceFit:true}
          ,tbar :[]
          ,bbar :[]
          ,height : 350
          ,width : 1060
           ,title : 'Reseller Dashboard'

        }; // eo config object

        // apply config
        Ext.apply(this, Ext.apply(this.initialConfig, config));

        Application.DashBoardGrid.superclass.initComponent.apply(this, arguments);
    } // eo function initComponent
    /** 
    * It is the renderer of the links of cell 
    * @param data  value of cell 
    * @param record  object of data has all the data of store and record.id is unique 
    **/
    ,linkRenderer : function (data, cell, record, rowIndex, columnIndex, store) {
  开发者_Python百科      if  (data != null)  {
            return '<a href="javascript:void(0)" onclick="DashBoardGrid.resellerwindow(\'' +record.data.cityname+'\')">'+ data +'</a>';
        }
        return data;
    },
    resellerwindow : function (cityname) {
        // render the grid to the specified div in the page
        // resellergrid.render();
        resellerstore.load();
        wingrid.show(this);

    }
    ,onRender:function() {
        // this.store.load();
        Application.DashBoardGrid.superclass.onRender.apply(this, arguments);
    } // eo function onRender
});

Ext.reg('DashBoardGrid', Application.DashBoardGrid);

Your scope is messed up, when the function in your <a> tag is called this does not point to your object where you defined the function but to your <a>-dom node.

It's pretty hard to call member functions from within a html fragment like the fragment returned by a grid renderer. I suggest you take a look at Ext.grid.ActionColumn to solve this problem. When you look at the code in this column type you should be able to write your own column type that renders a link instead of an icon like the ActionColumn.

Another option is using my Ext.ux.grid.ButtonColumn which doesn't render links but buttons in your grid.

more info on scope in ExtJS (and js in general): http://www.sencha.com/learn/Tutorial:What_is_that_Scope_all_about

this.resellerwindow is not a function 

because 'this', in the onclick function is in fact a reference to the 'a' dom element;

In order to access the 'resellerwindow' function from the onclick handler, you need to make the function accessible from the global scope, where your handler is executed:

var globalObj = 
{
    linkRenderer : function (data, cell, record, rowIndex, columnIndex, store) 
    {
        if  (data != null)              
            return '<a href="javascript:void(0)" onclick="globalObj.resellerwindow(\''  +record.data.cityname+'\')">'+ data +'</a>';        
        return data;
    },
    resellerwindow : function (cityname) 
    {
        // render the grid to the specified div in the page
        // resellergrid.render();
        resellerstore.load();
        wingrid.show(this);
    } 
}  

so use the globalObj.resellerwindow(......);

The problem is that this does not point to the class itself. Should you need to render the a element as a string instead of JavaScript object you will need to call a global function in which to call the resellerwindow function (after obtaining correct reference). However, I believe a much more efficient way would be to abandon the string and use JavaScript object instead. Then you can do something like the following:

    var a = document.createElement("a");
    a.onclick = this.resselerwindow;

If you use jQuery something like the following can be used:

return $("<a />").click(this.resselerwindow)[0];

instead of building and passing direct html, try these.

1. Create Anchor object

{ tag: 'a', href: '#', html: 'click me', onclick: this.resellerWindow }

1. Make sure that, scope in linkRenderer is grid, by settings 'scope: this' in that column definition. So that this.resellerWindow refers to grid's function.

2. try returning created object.