Пост из серии «не забыть как делать».
Мне последнее время приходится достаточно плотно заниматься разработкой на отличном javascript-фреймворке ExtJS и, в частности, много работать с таблицами. Чтобы визуально приукрасить и сделать таблицы более юзабельными я сделал для них т.н. «зебру», т.е. чересстрочную раскраску. Далее я расскажу как это сделать.
Я не буду приводить полный код таблицы, только тот кусок, который отвечает за «зебру»:
Example.grid = Ext.extend(Ext.grid.GridPanel, {
initComponent:function() {
Ext.apply(this, {
store:....,
columns:...,
viewConfig: {forceFit: true}
});
Example.grid.superclass.initComponent.apply(this, arguments);
},
onRender:function() {
Example.grid.superclass.onRender.apply(this, arguments);
this.getView().getRowClass = function(record,index) {
return (index%2)?'odd':'even';
}
}
});За создание «зебры», собственно, отвечает код, расположенный в обработчике события «onRender». Этот код определяет функцию «getRowClass» объекта GridView нашей таблицы. Определяемая функция должна возвращать название css-класса, которое будет присвоено текущей строке. Эта функция будет вызвана для каждой строки, а на вход ей будет переданы текущая запись и номер строки. Для зебры достаточно знать номер строки и в зависимости от четности этого номера вернуть то или иное название класса. Не забудьте определить эти классы в своем файле стилей, иначе никаких визуальных изменений не увидите.
