如何在我的架构中调用这个 onclick javascript 函数 [英] How to call this onclick javascript function in my architecture
本文介绍了如何在我的架构中调用这个 onclick javascript 函数的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！
问题描述
我正在使用这篇架构文章http://blog.extjs.eu/know-how/writing-a-big-application-in-ext/
在我的一类 Dashboardgrid 中，我有两个功能:
,linkRenderer : function (data, cell, record, rowIndex, columnIndex, store) {如果(数据！= null){return '<a href="javascript:void(0)" onclick="this.resellerwindow(\'' +record.data.cityname+'\')">'+ data +'</a>';}返回数据；},经销商窗口:功能(城市名称){//将网格渲染到页面中指定的div//resellergrid.render();resellerstore.load();wingrid.show(this);}调用linkrendrer函数的点击事件时报错
this.resellerwindow 不是函数我应该在哪里以及如何放置 resellerwindow 功能?
我的 ResellerDashBoard 类
Application.DashBoardGrid = Ext.extend(Ext.grid.GridPanel, {边框:假,initComponent:function() {变量配置 = {商店:新 Ext.data.JsonStore({//存储配置自动销毁:真，自动加载:真，url: 'api/index.php?_command=getresellerscount',storeId: 'getresellerscount',//阅读器配置根:'cityarray'，idProperty: '城市名',字段: [{名称:'城市名称'}，{name: 'totfollowup'},{名称:'totcallback'}，{name: 'totnotintrested'},{name: 'totdealsclosed'},{name: 'totcallsreceived'},{name: 'totcallsentered'},{name: 'totresellerregistered'},{名称:'countiro'}，{name: 'irotransferred'},{名称:'irodeferred'}]})，列: [{id :'城市名',标题:'城市名称'，宽度 : 120,可排序:真实，数据索引:'城市名称'},{id :'countiro',标题:'总前景'，宽度 : 100,可排序:真实，数据索引:'countiro'},{id :'irotransferred',header : '由 IRO 转移的呼叫',高度:50，宽度 : 100,可排序:真实，数据索引:'irotransferred'},{id :'irodeferred',标头:'由IRO延迟的调用'，宽度 : 100,可排序:真实，数据索引:'irodeferred'},{id :'totcallsentered',header : '输入的总呼叫数',宽度 : 100,可排序:真实，数据索引:'totcallsentered'，渲染器:this.linkRenderer},{id :'totfollowup',标题:'跟进'，宽度 : 100,可排序:真实，数据索引:'totfollowup'},{id :'totcallback',标题:'回调'，宽度 : 100,可排序:真实，数据索引:'totcallback'},{id :'totnotintrested',标题:'不感兴趣'，宽度 : 100,可排序:真实，数据索引:'totnotintrested'},{id :'totdealsclosed',标题:'交易结束'，宽度 : 100,可排序:真实，数据索引:'totdealsclosed'},{id :'totresellerregistered',header : '经销商注册',宽度 : 100,可排序:真实，dataIndex: 'totresellerregistered'}],插件:[],viewConfig :{forceFit:true},tbar :[],bbar :[],高度:350,宽度 : 1060,title : '经销商仪表板'};//eo配置对象//应用配置Ext.apply(this, Ext.apply(this.initialConfig, config));Application.DashBoardGrid.superclass.initComponent.apply(this, arguments);}//eo 函数 initComponent/*** 它是单元格链接的渲染器* @param 单元格数据值* @param 数据的record 对象拥有store 的所有数据并且record.id 是唯一的**/,linkRenderer : 函数(数据、单元格、记录、行索引、列索引、存储){如果(数据！= null){return '<a href="javascript:void(0)" onclick="DashBoardGrid.resellerwindow(\'' +record.data.cityname+'\')">'+ data +'</a>';}返回数据；},经销商窗口:功能(城市名称){//将网格渲染到页面中指定的div//resellergrid.render();resellerstore.load();wingrid.show(this);},onRender:function() {//this.store.load();Application.DashBoardGrid.superclass.onRender.apply(this, arguments);}//eo 函数 onRender});Ext.reg('DashBoardGrid', Application.DashBoardGrid); 解决方案
与其直接构建和传递 html，不如试试这些.
- 创建锚对象
<块引用>
{ 标签:'a',href: '#',html: '点击我',onclick: this.resellerWindow }
通过在该列定义中设置scope: this"，确保linkRenderer中的范围是网格.这样 this.resellerWindow 就引用了 grid 的函数.
尝试返回创建的对象.
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) {
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);
解决方案
instead of building and passing direct html, try these.
- Create Anchor object
{ tag: 'a', href: '#', html: 'click me', onclick: this.resellerWindow }
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.
try returning created object.
这篇关于如何在我的架构中调用这个 onclick javascript 函数的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
查看全文
