如何在我的架构中调用这个 onclick javascript 函数

Question

我正在使用这篇架构文章http://blog.extjs.eu/know-how/writing-a-big-application-in-ext/

在我的一类 Dashboardgrid 中，我有两个功能是：

,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);
    } 

调用linkrenderr函数的点击事件时会报错

this.resellerwindow is not a function

我应该在哪里以及如何放置 resellerwindow 函数？

我的 ResellerDashBoard 类

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) {
        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);

Answer 1

你的作用域搞砸了，当你的<a>标签中的函数被调用时，这并不指向你定义函数的对象，而是指向你的<a>-dom节点。

很难从 html 片段中调用成员函数，例如网格渲染器返回的片段。我建议你看看Ext.grid.ActionColumn 来解决这个问题。当您查看此列类型中的代码时，您应该能够编写自己的列类型来呈现链接而不是像 ActionColumn 这样的图标。

另一个选项是使用我的Ext.ux.grid.ButtonColumn，它不会呈现链接，而是呈现网格中的按钮。

关于 ExtJS（和一般的 js）范围的更多信息：http://www.sencha.com/learn/Tutorial:What_is_that_Scope_all_about

Answer 2

this.resellerwindow is not a function 

因为'this'，在onclick函数中其实是对'a' dom元素的引用；

为了从 onclick 处理程序访问“resellerwindow”函数，您需要使该函数可以从执行处理程序的全局范围访问：

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);
    } 
}  

所以使用 globalObj.resellerwindow(......);

Answer 3

问题是这并不指向类本身。如果您需要将 a 元素呈现为字符串而不是 JavaScript 对象，您将需要调用一个全局函数，在该函数中调用 resellerwindow 函数（在获得正确的引用之后）。但是，我相信一种更有效的方法是放弃字符串并改用 JavaScript 对象。然后您可以执行以下操作：

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

如果您使用 jQuery，则可以使用以下内容：

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

Answer 4

尝试这些，而不是直接构建和传递 html。

1. 创建锚对象

{ 标签：'a', href: '#', html: '点击我', 点击：this.resellerWindow }

1. 通过在该列定义中设置“范围：this”，确保 linkRenderer 中的范围是网格。这样this.resellerWindow就引用了grid的函数。

2. 尝试返回创建的对象。