Как вызвать эту функцию 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);
    } 

при вызове события click для функции linkrendrer выдает ошибку

this.resellerwindow is not a function

где и как мне установить функцию посредника?

Мой 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) {
        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

вместо построения и передачи прямого HTML, попробуйте это.

1. Создать объект привязки

{tag: 'a', href: '#', HTML: «нажмите меня», onclick: this.resellerWindow}

1. Убедитесь, что область действия в linkRenderer является сеткой, в соответствии с настройками «область действия: это» в определении этого столбца. Так что this.resellerWindow ссылается на функцию сетки.

2. попробуйте вернуть созданный объект.

Answer 2

this.resellerwindow is not a function 

потому что «this» в функции onclick фактически является ссылкой на элемент «a» dom;

Чтобы получить доступ к функции resellerwindow из обработчика onclick, вам нужно сделать функцию доступной из глобальной области видимости, где выполняется ваш обработчик:

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. Затем вы можете сделать что-то вроде следующего:

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

Если вы используете jQuery, можно использовать что-то вроде следующего:

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

Answer 4

Ваша область действия испорчена, когда вызывается функция в вашем теге <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