Лобач.info

Пост из серии “не забыть как делать”.

Мне последнее время приходится достаточно плотно заниматься разработкой на отличном 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-класса, которое будет присвоено текущей строке. Эта функция будет вызвана для каждой строки, а на вход ей будет переданы текущая запись и номер строки. Для зебры достаточно знать номер строки и в зависимости от четности этого номера вернуть то или иное название класса. Не забудьте определить эти классы в своем файле стилей, иначе никаких визуальных изменений не увидите.

Популярность: 21%

Метки: extjs, js, советы

Запись создана: Вторник, 8 Июль 2008 в 11:09 и находится в рубриках javascript. Вы можете следить за комментариями к этой записи через ленту RSS 2.0. Вы можете оставить отзыв, или trackback с вашего собственного сайта.