【问题标题】:Extjs 3.4 add buttons (Edit, Delete) to the grid rowExtjs 3.4 向网格行添加按钮(编辑、删除)
【发布时间】:2014-09-25 14:07:39
【问题描述】:

我有 Grid,每行必须是带有编辑/删除按钮的列。当我单击“编辑”时,它必须打开弹出窗口,并且在此弹出窗口中必须是一个带有来自网格行的对象字段的表单。当我单击删除按钮时,它必须删除对象(行)。我找不到简单的解决方案...

我做了什么:

columns: [
{
    header: 'Action',
    width: 145,
    sortable: false,
    renderer: function (value, metaData, record, rowIndex, colIndex, store) {

        function createGridButton(value, id, record, handlerFunc, rowIndex) {
            new Ext.Button({
                text: value,
                value: rowIndex,
                handler: handlerFunc
            }).render(document.body, id);
        }

        var id = 'x-btn-container-' + rowIndex;

        createGridButton.defer(1, this, ['Edit', id, record, function (btn, e) {
            openWindowWithForm();
        }, rowIndex]);

        createGridButton.defer(2, this, ['Delete', id, record, function (btn, e) {
            alert('Row was deleted');
        }, rowIndex]);
        return ('<div id="' + id + '"></div>');
    },
    dataIndex: 'action'
},
{
    header: 'Login',
    dataIndex: 'login'
},
{
    header: 'Email',
    dataIndex: 'email'
},
{
    header: 'FirtsName',
    dataIndex: 'firstName'
},
{
    header: 'LastName',
    dataIndex: 'lastName'
},
{
    header: 'Birthday',
    dataIndex: 'birthday',
    xtype: 'datecolumn',
    format: 'd/m/Y'
}
]

我已经在第一列中添加了按钮,但是如何删除和编辑行,我无法让 RowIndex 来执行此操作。 请帮助解决这个问题。

【问题讨论】:

  • 请输入您的完整代码,是完整的网格对象及其列模型、存储和选择模型。如果可能的话,提供一个 jsfiddle。
  • 对不起,我的表“样式”找不到 3.4 extjs 样式的 cdn

标签: javascript extjs


【解决方案1】:

人们通常会这样做:

  • 他们使用具有特定类的渲染器创建链接/按钮,如下所示:
  • 他们使用网格rowclick 事件并检查用户点击的位置
  • 如果用户单击具有目标类的项目,宾果游戏:)

在此处查看更正的小提琴:

http://jsfiddle.net/bubbliscious/4x8LJ/1/

【讨论】:

  • 谢谢!这正是我所需要的。
猜你喜欢
  • 2015-07-24
  • 1970-01-01
  • 1970-01-01
  • 1970-01-01
  • 1970-01-01
  • 2019-09-03
  • 1970-01-01
  • 1970-01-01
  • 1970-01-01
相关资源
最近更新 更多