Как добавить сетку кнопок изображений в ExtJS

Question

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

Answer 1

Во-первых, добавление ExtJS Component внутри сеток не поддерживается по умолчанию, и уроки, которые я там видел, довольно хакерские.Так что это то, что я бы сделал.

1. Я предполагаю, что ваша сетка привязана к магазину, и каждая запись в магазине - это строка в вашей сетке.
2. Я предполагаю, что у вас есть поле в каждой записи, которое представляет статус "fav" этой записи, возможно, логическое значение.

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

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

{
    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' насетка, проверьте, является ли ячейка, на которую вы щелкаете, предпочтительной ячейкой, и переключите значение fav записи, сетка будет автоматически перерисована при изменении данных в хранилище

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.
    }
}