ExtJs 4.2 Изменения компонента Grid

Перевод http://www.sencha.com/blog/first-look-at-ext-js-4-2-grid

В предыдущих сообщениях о ExtJS 4.1 разработчики отмечали улучшенные возможности буферизации у компонента Grid. В Ext Js 4.2 также были произведены улучшения возможностей буферизации компонента Grid. В приложениях с большими наборами данных заметно резкое увеличение производительности благодаря этой оптимизации.

Сравнение компонента Grid в ExtJS 4.1 и ExtJS 4.2

В ExtJs 4.1 компонент Grid перерисовывал все строки таблицы, каждый раз когда пользователь прокручивал буферные зоны. Например, представьте Grid который отрисовал 50 строк за раз и показывал бы он сейчас строки со 100-150, и если мы прокрутим Grid вниз, чтобы отображались строки со 105-155, то Grid перерисует опять все строки.

Все строки в Ext JS 4,1 в Grid заново пересоздаются в буфере при прокрутке

В Ext JS 4.2, строки добавляются / удаляются из Grid при прокрутке

 

В ExtJS 4.2 изменен подход к отображению строк в таблице. Grid удаляет строки 100-104 (более не видимые) и добавляет строки 151-155 как новые элементы. Такая оптимизация приводит  к существенному уменьшению времени рендеринга (отображения) и к увеличению производительности в целом.

Разработчики использовали тест производительности, который заключался в автоматической прокрутке (скроллинге) 2000 строк сверху вниз. Измерения проводились на IE8 (Windows XP 1.8GHz CoreDuo Thinkpad с 1 Гб RAM). Изменения в ExtJs 4.2 привели к 2х (и более) снижению латентности, которые позволили сделать прокрутку более плавной, гладкой.

Ext.grid.plugin.BufferedRenderer

 

Чтобы получить доступ к рендерингу Grid-a через буфер в ExtJS 4.1, приходилось вручную определять strore в конфиге и указывать “buffered”=true. Это выглядело примерно так:

 
// Ext JS 4.1 style buffering on the store
var store = Ext.create('Ext.data.Store', {
    // allow the grid to interact with the paging scroller by buffering
    buffered: true,
    pageSize: 50,
    data: dataJson,
    model: 'Employee',
    proxy: {
        type: 'memory'
    }
});

var grid = Ext.create('Ext.grid.Panel', {
    store: store,
    loadMask: true,
    //etc...
});

Конфигурация с “buddered” была удобным способом, чтобы оптимизировать производительность store (хранилища данных), так же «store» всегда знал какие данные отображаются в данный момент на экране. А так как один «store» могут использовать несколько компонентов, то определение функции буферизации на уровне «store» было  проблематичным. Также у буферизированных «store» в ExtJS 4.1 возникали проблемы, если пользователь редактировал записи в таблице, потому что в «store» содержаться только те строки, которые отображаются на экране (неотображаемые записи будут недоступны) в связи с чем редактирование и синхронизация таких наборов данных была сложна в реализации.   Ext JS 4.2 решает эту проблему путем введения плагина Ext.grid.plugin.BufferedRenderer. С этим плагином «store» ничего не знает про записи, отображаемые на экране. Теперь компонент Grid несет полную ответственность за буферизацию.

// new Ext JS 4.2 Ext.grid.plugin.BufferedRenderer
Ext.require([
    'Ext.grid.plugin.BufferedRenderer'
]);
var store = Ext.create('Ext.data.Store', {
    pageSize: 50,
    data: dataJson,
    model: 'Employee',
    proxy: {
        type: 'memory'
    }
});

var grid = Ext.create('Ext.grid.Panel', {
    store: store,
    loadMask: true,
    plugins: 'bufferedrenderer',
    //etc...
});

Этот Grid отобразит лишь часть таблицы – тот же путь, как это реализовано в ExtJS 4.1.x, но теперь не надо указывать дополнительных опции в конфигурации sore. Это также означает, что все функции grid/store (например, группировка и редактирование) будут без проблем работать с этим плагином. В связи с тем что функции буферизации теперь не определяются в конфигурации store, нормальное функционирование store (редактирование, сохранение, синхронизация) может быть достигнута путем конфигурирования компонента Grid.

Однако store с буферизацией все еще существует в ExtJS 4.2. Буферизированный store всё еще очень важен для многих задач и и приложений. Новый плагин просто альтернативный вариант с улучшенной производительностью, специфичные для компонента Grid.

 

Конфигурация

 

BufferedRenderer может быть легко настроен для контроля общего количества строк, а также кол-ва страниц для отображения данных из источников данных, как локальных так и удаленных.

Конфигурации «trailingBufferZone» и «leadingBufferZone» работают таким же образом, как они работали в ExtJS 4.1, но эти конфигурации теперь расположены в конфигурации плагина а не store.

Плагин BufferedRenderer может также быть сконфигурирован с «variableRowHeight» свойством в том случае, если данные могут быть непредсказуемых размеров ( в тех случаях, когда пользователь переопределит отрисовку ячейки или реализует перенос текста ). Это свойство по умолчанию установлено в «false», чтобы оптимизировать производительность таблицы.