В сетке Extjs нам часто нужно добавить статус или кнопку изображения, чтобы суммировать методы, которые мы использовали:
1. Представление статуса:
Кода -копия выглядит следующим образом:
рендерер: function (значение) {
if (value == 0) {
вернуть "<img src = 'Images/icons/cancel.png'>";
} else if (value == 1) {
вернуть "<img src = 'Images/icons/Accept.png'>";
}
возвращаемое значение;
}
Добавить статус идентификации рендеринга в столбцах столбцов, рендеринг заключается в следующем:
http://images.cnitblog.com/blog/489550/201304/19103818-94991D9869A6458E8A568EFDEA6081B5.png
2. Обработка событий:
Добавьте Onclick Event в IMG напрямую:
Кода -копия выглядит следующим образом:
<img style = "cursor: pointer;" Onclick = " ctx}/img/edit.png/ 'alt =/' Подробное обслуживание/'title =/' Подробное обслуживание/'>'
События передают необходимые данные.
Другой способ - добавить событие щелчка ячейки в сетку:
Кода -копия выглядит следующим образом:
Слушатели: {
Cellclick: ViewDoc
}
функция ViewDoc (Grid, Rowidx, Colidx, E) {
var action = e.getTarget ().
}
Таким образом, вы можете получить Clicked Cell и добавить обработку событий.
3. Вы можете использовать «ActionColumn», чтобы добавить кнопку изображения
Кода -копия выглядит следующим образом:
{заголовок: «Сертификат соответствия», сортируемый: false, ширина: 80, выравнивание: «Центр», Область: это,
xtype:
«ActionColumn»,
предметы: [{
Значок: '$ {ctx }/img/details.png',
Подсказка инструментов: «Показать сертификат соответствия»,
обработчик: функция (Grid, Rowindex, Colindex) {
var record = grid.getStore (). getAt (rowIndex);
//. Полем Полем
}
]}
Это также позволяет добавлять изображения в ячейку сетки.