Question

我需要在editorgridpanel中为每一行显示一个“删除”链接如何创建此链接;因为它未映射到商店中的任何特定列？我尝试了以下操作，但它没有显示添加记录的链接：

 var sampleRecord = new Ext.data.Record.create([
        {mapping: 'organizationId',name:'organizationId', type:'int'},
        {mapping: 'name',name:'name', type:'string'},
        {mapping: 'address',name:'address' , type:'int'}
        ]);

    var s_grid= new Ext.grid.EditorGridPanel ({
        .........
            columns: [
                  {header: 'id', width: 120, sortable: false, dataIndex: 'organizationId'},
                  {header: 'name',width: 120, sortable: false, dataIndex: 'name'},
                  {header: 'address', sortable: false,width: 45, dataIndex: 'address'},
                  {header: '',width: 50, sortable: false, renderer:this.delRenderer }
             ],
            .....
,
            delRenderer:function (val, meta, rec, rowIdx) {
                var tempStr="<div onclick=\"javascript:Ext.getCmp('" +"s_grid" + "').deAllocate(" + rowIdx + ");\" class='pointer'><span style='color:#0000FF'><u>Delete</u></span></div>";
                return tempStr ;
            },
            deAllocate:function (rowIdx ) {
                Ext.getCmp('s_grid').getStore().removeAt(rowIdx);
                Ext.getCmp('s_grid').getView().refresh();
            }

            });

非常感谢帮助。

Answer 1

您可以通过添加删除字段来更改模型：

    {
      name: 'delete',
      convert: function () {
        return '<a href="#">delete</a>';
    }

然后，您可以在网格中添加额外的列，并通过网格的“cellclick”事件检查链接是否有一些修改。这是工作示例： Working Fiddle

度过愉快的一天： - ）

Answer 2

你最好使用ActionColumn。无论如何，您还可以使用cellclick事件围绕自定义元素（链接...）包装解决方案。这是一个显示两种方法的example：

var grid = new Ext.grid.GridPanel({
    renderTo: Ext.getBody()
    ,height: 300

    ,store: new Ext.data.JsonStore({
        fields: ['id', 'name']
        ,data: [
            {id: 1, name: 'Foo'}
            ,{id: 2, name: 'Bar'}
            ,{id: 3, name: 'Baz'}
        ]
    })

    ,columns: [
        {dataIndex: 'name'}
        ,{
            xtype: 'actioncolumn'
            ,icon: 'http://images.agoramedia.com/everydayhealth/gcms/icon_delete_16px.gif'
            ,handler: function(grid, row) {
                grid.store.removeAt(row);
            }
        }
        ,{
            renderer: function(value, md, record, row, col, store) {
                return '<a class="delete-link" href="#delete-record-' + record.id + '">Delete</a>';
            }
        }
    ]

    ,listeners: {
        cellclick: function(grid, row, col, e) {
            var el = e.getTarget('a.delete-link');
            if (el) {
                e.preventDefault();
                grid.store.removeAt(row);
            }
        }
    }
});

var lastId = 3;    
setInterval(function() {
    var store = grid.store,
        record = new store.recordType({id: ++lastId, name: 'New record #' + lastId}, lastId);
    store.add(record);
}, 3000);

<强>更新

仅仅因为我可能完全不在你的问题上，我认为你的代码不起作用，因为你打电话给我：

renderer: this.delRenderer

您不在this指向您的网格的范围内（因为此时甚至尚未创建...）。你想做的就是这样：

var s_grid = new Ext.grid.EditorGridPanel ({
    ...
    columns: [..., {
        ...
        renderer: delRenderer
    }]
});

function delRenderer() {
    // FYI, `this` will be the column here
    ...
}

或者将函数内联在网格定义中......

Answer 3

您的列上需要dataIndex配置，因此只需提供任何字段（例如id），并在渲染器函数中忽略value参数（正如您已经在做的那样）。 / p>

为网格中的每一行添加链接

3 个答案: