Добавление ссылки на каждую строку в сетке

Question

Мне нужно отобразить ссылку «Удалить» для каждой строки в панели editorgrid.
Как создать эту ссылку, так как она не сопоставлена ​​ни одному конкретному столбцу в хранилище?
Я попытался следующие, но не отображает ссылку против добавленных записей:

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

Вам будет лучше использовать 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); 

Update

И только потому, что я могу быть полностью вне темы на ваш вопрос, я думаю, что ваш код не работает, потому что когда вы вызываете этот:

renderer: this.delRenderer 

Ваш не в области, где this указывает на вашу сетку (так как она даже не была создана на этом этапе ...). То, что вы хотите сделать, это скорее что-то вроде этого:

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

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

Или поставить функцию инлайн в определении сетки ...

Answer 2

Вы можете изменить модель, добавив удаление поля:

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

Вы можете добавить дополнительный столбец в сетке и проверить для связи нажмите на «cellclick» случае сетки с некоторым modifications.Here является рабочий пример: Working Fiddle.

Иметь хороший день :-)

Answer 3

dataIndex конфигурации требуется на столбце, так просто обеспечить любое поле там (например, идентификатор) и в функции визуализатора просто игнорировать value аргумент (как вы уже делают).