DataGrid内Button的onClick事件答案

【问题标题】：onClick event of Button inside DataGridDataGrid内Button的onClick事件
【发布时间】：2012-06-20 21:45:31
【问题描述】：

这是我的数据网格：

// $ is a reference to `this` as it lies in an anonymous function
$.grid = new DataGrid({
    store : $.dataStore,
    query : {id : "*"},
    structure : [
        { 
            noscroll : true,
            cells : [{ name : "Recipe", field : 'name', width : '200px' }],
        },
        {
            cells : [
                [
                 { name : 'ID#', field : 'id', width : '50px'},
                 { name : 'Category', field : 'category', width : '100px'},
                 { name : 'Status', field : 'status', width : '100px'},
                 { name: "Actions", width : '200px', type: dojox.grid.cells._Widget, formatter : $._actionButtons}
                ]
            ] // end cells
        }
    ]
}, $.targetNode)
$.grid.startup();

$.grid.on("RowClick", function(e){
    console.log(this.getItem(e.rowIndex))
})

还有我的formatter Actions 单元格对象：

_actionButtons : function(){
    var _self = this;
    var _args = arguments;
    this.group = new Pane()

    var full = new Button({ 
        label: 'View Full',
        style : { fontSize : '80%'},
        onClick : function(){
            try {
                _self.grid.onRowClick.apply(this, arguments)
            }catch(e){}
        }
    });
    full._destroyOnRemove = true;

    var edit = new Button({
        label : 'Edit',
        style : {fontSize: '80%'}
    });
    edit._destroyOnRemove = true;

    construct.place(full.domNode, this.group.containerNode)
    construct.place(edit.domNode, this.group.containerNode)

    return this.group;
}

我正在尝试访问将由 DataGrid 上的普通 onRowClick 事件传递的事件对象。就目前而言，这有点工作，但在on("RowClick"...) 块上，我得到了多个日志。如果没有try...catch 块，我会收到一个错误，因为e 中不存在rowIndex，然后还有2 个存在它的日志。

这是我包含 pub/sub、emit() 等的第四个左右的想法。我感觉多个日志是由冒泡行为引起的（按钮 -> 行 -> 数据网格或类似的），但是让 onRowClick 的事件对象传递到格式化程序中创建的按钮中似乎是不可能的。

我只想从 Button 小部件的 onClick 事件中访问 rowIndex（和其他 DataGrid-esque 属性）以根据按下的按钮进行处理。

【问题讨论】：

标签： javascript dojo dojox.grid.datagrid

【解决方案1】：

沿着同样的思路，但这是我想出的，似乎正在朝着我所设想的方向发展。调整按钮所在的单元格：

{ name: "Actions", width : '200px', type: dojox.grid.cells._Widget, formatter : 
    function(){
        return $._actionButtons.call($, arguments);
    }
}

在返回的 Button 小部件中调整了 onClick 函数：

_actionButtons : function(){
    var _index = arguments[0][1],
        _item  = this.grid.getItem(_index)
        _self  = this;

    // some code removed

    onClick : function(){
        console.log(_self.dataStore.getValue(_item, 'name'), "clicked")
    }
}

我可能最终会扩展 Button 以更好地处理这个问题，但现在，瞧！

有时，把它写下来并把它放在那里让你的大脑恐慌并在其他人之前找出解决方案会有所帮助:)

小更新...

DataGrid 有formatterScope 参数，但它适用于所有formatter，因此会弄乱任何需要单元格范围而不是DataGrid 范围的东西。上面的方法让我可以访问我需要的一切。

【讨论】：