如何調用此的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); 
    } 

時linkrendrer的單擊事件函數被稱爲它給出錯誤

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 

因爲 '這個'，在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

問題是這並不指向類本身。如果您需要將一個元素呈現爲一個字符串而不是JavaScript對象，則需要調用一個全局函數來調用resellerwindow函數（獲得正確的引用之後）。但是，我相信一個更有效的方法是放棄字符串並使用JavaScript對象。如果你使用jQuery像下面這樣可以用來

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

：

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

Answer 4

，而不是建設和傳球直接HTML，嘗試這些，那麼你可以這樣做以下。

1. 創建錨對象

{標籤： 'A'， 的href： '＃'， HTML： '按我'， 的onclick：此。resellerWindow}

1. 確保，範圍，linkRenderer是網格，通過設置 '範圍：本' 在列定義。這樣this.resellerWindow引用了網格的函數。

2. 嘗試返回創建的對象。