Добавить Удалить кнопка extjs grid

Question

У меня есть панель сетки, в которой я хочу добавить кнопку удаления для каждой строки. Когда пользователь нажимает кнопку, эта строка удаляется. Также я хотел иметь кнопку сохранения внизу, которая помогает пользователю добавить строку в сетку. Проблема в том, что я динамически добавляю строки. Поэтому для каждой строки также должен быть добавлен значок удаления.

Мои требования предназначены только для 2-х столбцов. Один отображает имя, а другой отображает значок для удаления.

Просьба посоветовать мне, как добавить динамическую иконку в каждую строку. У меня уже есть CSS, который выглядит примерно так:

.icon-delete { 
    background-image: url(../images/delete.png) !important; 
} 

Этот CSS-файл находится в другом файле. Я новичок в extjs, поэтому у меня нет большого опыта работы с такими функциями.

EDIT:

Я попытался следующие, но не отображается значок. Скажите, пожалуйста, где я ошибаюсь.

 columns : [ 
         { 
          text : 'Name', 
          dataIndex : 'name', 
          width : '50%' 
         }, 
         { 
          xtype : 'actioncolumn', 
          draggable : false, 
          hideable : false, 
          menuDisabled : true, 
          width:'50%', 

          items : [ { 
           iconCls: 'icon-delete', 
           tooltip: 'Delete', 
           scope: this, 

           } 
          ] 
         } 
        ] 

Answer 1

Вы должны использовать Ext.grid.column.Action класс, как это:

{ 
    xtype:'actioncolumn', 
    width:20, 
    items: [{ 
     iconCls: 'icon-delete', 
     tooltip: 'Delete', 
     handler: function(grid, rowIndex, colIndex) { 
      grid.getStore().removeAt(rowIndex); 
     }, 
     scope: this 
    }] 
} 

Документация для класса: http://docs.sencha.com/extjs/4.2.2/#!/api/Ext.grid.column.Action