将 Ext.Button 添加到 ExtJS 列模型答案

【问题标题】：Add Ext.Button to ExtJS columnmodel将 Ext.Button 添加到 ExtJS 列模型
【发布时间】：2013-03-13 15:37:04
【问题描述】：

我正在创建一个 Ext.grid.GridPanel。我正在尝试将带有xtype: button 的列添加到列模型中。我不确定，如果我能做到这一点。下面是我的代码，也是 jsfiddle http://jsfiddle.net/bXUtQ/

的链接

我使用的是 extjs 3.4

Ext.onReady(function () {
  var myData = [[ 'Lisa', "lisa@simpsons.com", "555-111-1224"],
                [ 'Bart', "bart@simpsons.com", "555-222-1234"],
                [ 'Homer', "home@simpsons.com", "555-222-1244"],
                [ 'Marge', "marge@simpsons.com", "555-222-1254"]];

  var store = new Ext.data.ArrayStore({
    fields:[ {
      name: 'name'
    },
    {
      name: 'email'
    },
    {
      name: 'phone'
    }],
    data: myData
  });
  var grid = new Ext.grid.GridPanel({
    renderTo: 'grid-container',
    columns:[ {
      header: 'Name',
      dataIndex: 'name'
    },
    {
      header: 'Email',
      dataIndex: 'email'
    },
    {
      header: 'Phone',
      dataIndex: 'phone'
    },
    {
        header: 'action',
        xtype: 'actioncolumn',
        iconCls: 'delete-icon'
        text: 'Delete',
        name: 'deleteBtn',
        handler: function(grid, rowIndex, colIndex, item, e) {
            alert('deleted');
        }      
    },             

    //////////////////////////////
    //I cannot add this column
    {
        header: 'action',
        xtype: 'button',
        text: 'update',
        name: 'btnSubmit'
    }
    ],
    store: store,
    frame: true,
    height: 240,
    width: 500,
    title: 'Framed with Row Selection',
    iconCls: 'icon-grid',
    sm: new Ext.grid.RowSelectionModel({
      singleSelect: true
    })
  });
});

【问题讨论】：

您正在为删除“按钮”使用actioncolumn。为什么不将它也用于您的提交按钮？
actioncolumn 用于测试 xtype。谢谢。

标签： extjs extjs3 extjs-grid

【解决方案1】：

您不能像那样将按钮用作列。我们正在使用以下 UX 来实现您的要求。不幸的是，这是针对 ExtJS 4.1 的：

http://www.sencha.com/forum/showthread.php?148064-Component-Column-Components-in-Grid-Cells

【讨论】：

我发现了这个techmix.net/blog/2010/11/25/…，所以我稍微修改了我的代码，你可以看这里jsfiddle.net/bXUtQ/1。它似乎臃肿。但按钮现在在那里。
你有解决方案吗？如果是这样，您可以将修改后的代码放在这里并接受它作为答案。因此，深入了解已接受的答案会很有帮助。

【解决方案2】：

你可以试试GridRowActions。

【讨论】：

【解决方案3】：

您会尝试将其作为您的操作列

{
    xtype: 'actioncolumn',
    width: 50,
    items: 
    [
        {
            icon: 'app/resources/images/cog_edit.png', // Use a URL in the icon config
            tooltip: 'Edit',
            handler: function (grid, rowIndex, colIndex) {
                var rec = grid.getStore().getAt(rowIndex);
                alert("Edit " + rec.get('name'));
            }
        }, 
        {
            icon: 'app/resources/images/delete.png',
            tooltip: 'Delete',
            handler: function (grid, rowIndex, colIndex) {
                var rec = grid.getStore().getAt(rowIndex);
                alert("Terminate " + rec.get('name'));
            }
        }
    ]
}

或者你可以试试这个插件actioncolumnbutton

【讨论】：