“Зебра” в таблице ExtJS

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

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

google.com bobrdobr.ru del.icio.us technorati.com linkstore.ru news2.ru rumarkz.ru memori.ru moemesto.ru

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

Метки: , ,

Leave a Reply


FireStats icon Работает с FireStats