Попытка перехода на ExtJS 4.2.1 с 4.1.3

Заказчик последнее время жалуется на великие тормоза нашей системы, а так как работают они сейчас только с одной страницей («Расчетный Документ» далее  просто РД), то и оптимизировать следовало ее в первую очередь.

Прежде всего мы задумались о переходе на новую версию ExtJS в надежде улучшения производительности, ведь это (казалось бы 😉 ) наиболее быстрое решение, если предположить, что разработчики постоянно совершенствуют свой продукт. Когда-то я уже задумывался об этом, когда делал страницу заводов, на которой отображалось сразу несколько тысяч записей, сгруппированных по одному из полей. И вот оно первое нововведение этой версии — возможность использования BufferedRenderer.

Плагин BufferedRenderer для вывода таблиц с тучей строк

В таком варианте (с группировкой по одному из полей) старый метод постраничной подгрузки не работал — если были свернуты верхние группы, включающие некоторое количество заводов, то скроллинг вниз показывал пустую область экрана, на которой данные никогда бы не загрузились. А вот в новой версии ExtJS 4.2 реализована более плавная работа с реально большими табличками с помощью крутого плагина BufferedRenderer (по ссылке очень клёво расписаны все подробности). Но тогда еще версия была нестабильной, поэтому переход отложили до лучших времен.

Беглый осмотр интернета на предмет нововведений в версии 4.2.1 показал, что теперь скрытые колонки не хранятся в DOM-дереве и это следующее открытие.

Скрытые колонки Grid’а удаляются из DOM-дерева таблицы

И это замечательно! Опять же, на первый взгляд. Ранее я натыкался на баг, когда картинка в содержимом скрытой ячейки присутствовала в документе, ибо у нее был position: absolute. Я даже спрашивал об этом на stackoverflow. А происходило это потому, что скрытые колонки имели ячейки td с шириной, равной нулю. Теперь все круто изменилось и скрытых ячеек в DOM’е нет совсем.

И сразу подкрадываются другие косяки — раньше я часто использовал в событиях типа cellclick или dblclick обращение к шапке таблицы, чтобы узнать какую-нибудь информацию о колонке примерно таким образом:

 'celldblclick': function (grid, td, cellIndex, record, e, er, we, wer) {
     if (gridResources.columns[cellIndex].dataIndex == "PlantName") {
           ...

Теперь же, если у меня имеются скрытые колонки, вовсе нет гаратний, что gridResources.columns[cellIndex] попадет именно туда, куда нужно мне. Я вынужден использовать gridResources.columnManager.columns[cellIndex], а вот в нем уже все как раньше, то есть без учета скрытых колонок. На самом деле я наверняка не дочитал мануалы ExtJS на Сенче и получаю инфу о колонке как-то не так, напишите в комментах, если кто-то знает более правильный вариант 🙂

Призрачное окошко

Следующим камешком на моем пути было внезапное полу-исчезновение окошка при перетаскивании. В ExtJS 4.2.1 теперь у window по умолчанию есть параметр ghost: true, обозначающий, что при перетаскивании окно будет полупрозрачным. Когда вы отпустите мышь, оно скорее всего должно вернуться в обычное состояние, но только не у меня… Мое окно заполнялось динамически, то есть в первоначальном варианте не имеет ни одного item. Когда я нажимаю на иконку, оно отправляет get-запрос на хэндлер и собирает в себе небольшую табличку из полученного JSON. Так вот, при переключении в режим ghost оно, по всей видимости, теряет информацию и, увы, уже не возвращается обратно. И самое забавное, что я обнаружил, при попытке закрытия окна оно не закрывалось! Мне пришлось добавить такие вот две строчки в описание окошка:

    window.mpwin = Ext.create('Ext.window.Window', {
        ...
        closeAction: 'hide',
        ghost: false,
        ...
    });

Есть еще небольшое изменение с иконками кнопок — создатели Сенчи изменили зачем-то содержимое генерируемых button’ов и мой класс, задающий background, перестал работать. Но это такая мелочь, что скорее всего найдется мало людей, кто наступит на эти же грабли.

Проблема с отображением FieldContainer в сочетании с плагином CellEditing

Возможно я что-то делаю не совсем правильно, но работавшие прекрасно в 4.1.3 кастомные наборы полей при редактировании определенных ячеек, в версии 4.2.1 стали съезжать то выше, то ниже. Я очень подробно описал ситуацию на стэковерфлоу и на форуме сенчи (пока не прошла модерацию), проблема до сих пор не решена и я буду очень признателен, если сможете мне с этим помочь.

Итак, какие отличия в версиях мне удалось заметить:

  • Замечательный плагин BufferedRenderer для табличек с тучей строк.
  • Удаление из DOM-дерева скрытых колонок
  • Окошко становится полупрозрачным при перетаскивании навсегда
  • Проблема с позиционированием созданных Editor’ов и FieldContainer’ов.
  • Изменена структура создаваемых button

По поводу увеличения производительности — к сожалению, два рабочих дня мороки абсолютно не дали никаких результатов в этом плане. Обновление версии должно было значительно уменьшить DOM-дерево на клиенте (ведь некоторые скрытые колонки удалятся оттуда), но на практике эти изменения оказались настолько малы, что я предпочел искать оптимизацию в другом месте, о чем и расскажу чуть позже.

Критика кода и подхода приветствуется! 🙂

Добавить комментарий

Ваш e-mail не будет опубликован. Обязательные поля помечены *