Добавить кнопку удаления extjs grid

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

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

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

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

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

РЕДАКТИРОВАТЬ:

Я пробовал следующее, но значок не отображается. Подскажите пожалуйста, в чем я не прав.

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,                   
    }]
}]

icons css extjs gridpanel
person aayush_v20    schedule 13.05.2015    source источник

Ответы (1)


arrow_upward
2
arrow_downward

Вы должны использовать класс 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

person 3rgo    schedule 13.05.2015
comment
Но когда я добавляю строку, как мне добавить это значение столбца? Как я делаю Ext.getCmp ('gridId'). GetStore (). Add ({'name': 'test}); для добавления строки. Как мне добавить значок в эту строку? Кроме того, поле «значок» в соответствии с моим css должно быть «значок-удалить», верно? - person aayush_v20; 13.05.2015
comment
Концепция actioncolumn заключается в том, что он добавляет кнопки в каждую строку в хранилище рядом с данными. Что касается CSS, я плохо, я отредактирую свой пост, так как забыл адаптировать его к вашему CSS - person 3rgo; 13.05.2015
comment
Большое спасибо за помощь. Теперь я понимаю концепцию «столбца действий». Но значок все равно не отображается. Не могли бы вы взглянуть на обновленный пост? - person aayush_v20; 13.05.2015
comment
Я думаю, вам нужно указать путь к изображению, как я делал раньше, в свойстве icon. Может быть, iconCls недостаточно. Я не уверен, так как я всегда использовал изображения без CSS - person 3rgo; 13.05.2015
comment
Я уже пробовал это, но, к сожалению, это тоже не работает. Проблема в том, что ошибки нет, поэтому я не могу понять причину проблемы. - person aayush_v20; 14.05.2015
comment
Используя инструменты разработчика вашего браузера, можете ли вы проверить, действительно ли кнопка существует (даже если изображение не отображается), и убедиться, что CSS применяется правильно? - person 3rgo; 18.05.2015