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

其他人已经解释了为什么它不起作用...你的处理程序希望记录是一个全局变量，你的处理程序被调用，并且不知道从哪里获取记录。

你真正应该做的是为你的列模型设置一个'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()
});

你提到你正在使用Ext 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>'} 
    ]
}),

Answer 2

也许是这样的

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

Answer 3

这是Ext.data.Record.create的返回值的问题，如果您可以提供更多关于Ext.data.Record.create完成的内容的上下文，那么我可以帮助您排查问题。

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

Answer 4

基本上你只需要一些方法来获得范围内的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>'}
    ...});
};

Javascript对象未定义

4 个答案: