Блог

Я новичок в ExtJS, и я хочу добавить что-то вроде кнопки избранного в каждую строку таблицы данных. Я просмотрел почти все источники после долгих поисков в Google, но ничего не нашел. Если у кого-нибудь есть четкое представление о том, как это можно сделать, пожалуйста, дайте мне знать.

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

1. Я предполагаю, что ваша сетка привязана к хранилищу, и каждая запись в хранилище представляет собой строку в вашей сетке.
2. Я предполагаю, что у вас есть поле в каждой записи, которое представляет статус «избранное» этой записи, возможно, логическое значение.

если приведенные выше предположения верны, я уже делал что-то подобное раньше:

• добавьте столбец в свою сетку с идентификатором «fav-col», который имеет dataIndex, указывающий на поле избранного вашего магазина.

 
{
    id : 'fav-column', 
    dataIndex : 'fav',
    sortable : true,
    hideable : false,
    menuDisabled : true,
    fixed : true,
    width : 20, 
    renderer : renderFav
}
 

• добавьте средство визуализации в этот столбец, которое отображает разные HTML-коды в зависимости от того, выбрана ли строка.

 function renderFav(favAdded, metaData, record){
    if (favAdded === true){
        return 'fav added'; //something to represent already added to favourite  ;
    }else{
        return 'fav not added'; //something to represent non-fav'ed row;
    }
} 

• добавьте прослушиватель к событию ‘cellclick’ в сетке, проверьте, является ли щелкаемая ячейка избранной ячейкой, и переключите значение избранного для записи, сетка будет автоматически перерисовываться при изменении данных в хранилище

 
cellclick : function(grid, cellEl, cellIdx, record, rowEl, rowIdx, evtObj){
    if (this.columns[cellIdx].getId() === 'fav-col'){
        record.set('fav', !record.get('fav')); //toggle the fav state
        grid.getStore().sync(); //if the store is a REST store, update backend
        record.commit(); //commit the record so the red triangle doesn't show
        this.doLayout(); //might not need this.
    }
}