Javascript对象是不确定的

Question

这是代码片段我：

var records = Ext.data.Record.create([{name: 'msgId', type:'string', mapping: 'msgId'},]); 
... 
... 
var detailGrid = new Ext.grid.GridPanel({ 
    id:'detailGrid', 
    store: dataStore, 
    cm: new Ext.grid.ColumnModel({ 
    columns: [ 
     {id:'msgId',hidden: true, dataIndex: 'msgId'}, 
     {header: 'info',xtype: 'templatecolumn',tpl: '<a href="#" onClick = "viewMessage(records)">View Message Details</a>'} 
    ] 
}), 

当谈到onClick = "viewMessage(records)"，我得到：'records' is undefined. 这里有什么问题？

编辑：给出的解决方案的工作，以消除错误。但是，当我把这样的功能：

function viewMessage(records){ 
alert(Ext.util.JSON.encode(records)); 
} 

我得到{}为警报，即没有数据。

Answer 1

也许这样的事情

'<a href="#" onClick = "viewMessage('+records+')">View Message Details</a>' 

Answer 2

这与Ext.data.Record.create返回值的问题，如果你能提供什么Ext.data.Record.create不正是那我能够帮助您解决更多的上下文。

尝试在分配records变量后立即设置console.log(records);。

Answer 3

基本上你只需要有一些方法来获得records的范围。

根据您的意见，这听起来像你有这样的结构 - 包含一个脚本文件：

function creategrid(){ 
    var records = Ext.data.Record.create.... 
    var detailGrid = new Ext.grid.GridPanel({... 
    {header: 'info',xtype: 'templatecolumn',tpl: '<a href="#" onClick = "viewMessage(records)">View Message Details</a>'} 
    ...}); 
} 

代码被执行，电网呈现后，你将有HTML相似，这对您的页：

<tr><td class="templatecolumncssclass"><a href="#" onClick="viewMessage(records)">View Message Details</a></td></tr> 

当你点击的锚标记，该viewMessage函数被调用，全局变量records作为其参数。这是行不通的，因为在你的代码片段中，记录不会被设置为全局变量。

你需要让records可以在页面的范围：

var GridCreation = {}; 
GridCreation.records = {}; 
GridCreation.creategrid = function(){ 
    var records = Ext.data.Record.create.... 
    GridCreation.records = records; 
    var detailGrid = new Ext.grid.GridPanel({... 
    {header: 'info',xtype: 'templatecolumn',tpl: '<a href="#" onClick = "viewMessage(GridCreation.records)">View Message Details</a>'} 
    ...}); 
}; 

Answer 4

其他人已经解释了为什么它不工作...您的处理器期望的记录是一个全局变量，处理程序被调用，不知道从哪里得到记录。

你真正应该做的是设置一个监听你的数据模型的一个'headerclick就像

// EXT 4 version: wrap with Ext.onReady 
Ext.create('Ext.data.Store', { 
    storeId:'simpsonsStore', 
    fields:['name', 'email', 'phone'], 
    data:[ 
     { 'name': 'Lisa', "email":"lisa@simpsons.com", "phone":"555-111-1224" }, 
     { 'name': 'Bart', "email":"bart@simpsons.com", "phone":"555-222-1234" }, 
     { 'name': 'Homer', "email":"home@simpsons.com", "phone":"555-222-1244" }, 
     { 'name': 'Marge', "email":"marge@simpsons.com", "phone":"555-222-1254" } 
    ] 
}); 

Ext.create('Ext.grid.Panel', { 
    title: 'Simpsons', 
    store: Ext.data.StoreManager.lookup('simpsonsStore'), 
    colModel: { 
     listeners: { 
      headerclick: function(container, column, e, target, options) { 
       if (column.id == 'col-name') { 
        alert('Anything you want'); 
       } 
      } 
     }, 
     items: [ 
      { header: 'Name', dataIndex: 'name', id: 'col-name', sortable: false}, 
      { header: 'Email', dataIndex: 'email', flex: 1 }, 
      { header: 'Phone', dataIndex: 'phone' } 
     ]}, 
    height: 200, 
    width: 400, 
    renderTo: Ext.getBody() 
}); 

你提到你使用分机3，headerclick略有不同，它应该是设置在网格本身上，而不是在标题容器（列模型）中。喜欢的东西

var records = Ext.data.Record.create([{name: 'msgId', type:'string', mapping: 'msgId'},]); 
... 
... 
var detailGrid = new Ext.grid.GridPanel({ 
    listeners: { 
    headerclick: function(grid, index, e) { 
     if (index == 1) { 
     alert('Clicked Grid'); 
     } 
    } 
    }, 
    id:'detailGrid', 
    store: dataStore, 
    cm: new Ext.grid.ColumnModel({ 
    columns: [ 
     {id:'msgId',hidden: true, dataIndex: 'msgId'}, 
     {header: 'info',xtype: 'templatecolumn',tpl: '<a href="#">View Message Details</a>'} 
    ] 
}),