Использование Ext JS 4 виджетов в рамках Ext JS 3 интерфейса / Хабр

Преамбула

Ext JS 4 представляет разработчикам много новых возможностей, в числе которых, например, большое количество новых графиков и диаграмм. Сравните — для четвертой версии приведено 22 примера использования элементов Chart против всего четырех примеров для третьей версии. Внушающе, не правда ли?

Однако что, если в наличии есть большое приложение, реализованное на третьей версии Ext JS и возникает необходимость использования некоторых виджетов четвертой версии? Например, типична ситуация, когда в приложение нужно добавить новые диаграммы, но переписывать всё на «четверку» нецелесообразно.

К счастью, разработчики фреймворка позаботились об этом. Ext JS 4 полностью изолирован, что позволяет использовать четвертую версию наравне с третьей в пределах одной страницы! Чтобы продемонстрировать эту возможность на боевом примере, авторами фреймворка был создан пример, добавляющий в Ext JS 3 приложение новые диаграммы четвертой версии. Итак, что для этого нужно?

Как сделать?

Во-первых, необходимо подключить к HTML странице так называемую песочницу (sandbox) Ext JS 4, включающую в себя CSS и JS файл: ext-sandbox.css и ext-all-sandbox.js. Обратите внимание, что подключение песочницы необходимо проводить после подключения третьей версии фреймворка.

Во-вторых, обертку Ext.onReady(...) необходимо заменить на Ext4.onReady(...). Это позволит использовать новые возможности четвертого Ext JS в рамках приложения третьей версии.

В-третьих, для новых виджетов необходимо использовать новые хранилища Store. Например, так выглядит ArrayStore:

 myStore = Ext4.create('store.array', {
    idIndex: 0,
    fields: [
        'id', 'company', 'money',
    ],
    data: [
        [
            1, 'ЗАО "Рога и копыта"', 100000
        ],
        [
            2, 'ИП Пупкин', 12000
        ],
        [
            3, 'ООО "Вася и компания"', 45000
        ]
    ]
    });

И, наконец, в-четвертых, не забываем при создании новых виджетов писать Ext4.blablabla вместо Ext.blablabla.

Пример хочу!

В качестве примера вставим диаграмму четвертой версии Ext JS в старую Ext JS 3 страницу. Создадим HTML документ, подключим третью версию Ext JS и два файла песочницы Ext JS 4, указанные выше. Затем приступим к написанию нашего гибридного приложения — его код ниже.

// Ext4.onReady(...), не Ext.onReady(...)
Ext4.onReady(function(){
 // конфигурируем хранилище, которое
 // будет использовать Grid (Ext JS 3) и Chart (Ext JS 4)
 var companiesStoreConfig = {
  idIndex: 0,
  fields: [ 'id', 'company', 'money' ],
  data: [
   [ 1, 'ЗАО "Рога и копыта"', 51000 ],
   [ 2, 'ИП Пупкин', 12000 ],
   [ 3, 'ООО "Вася и компания"', 43000 ],
   [ 4, 'ОАО "Зеленые перцы"', 31000 ],
   [ 5, 'ООО "Рьяные программисты"', 9000 ]
  ]
 };
 
 // обратите внимание - для создания хранилища используем Ext4, 
 // так как хранилище будет использоваться виджетами
 // и третьей, и четвертой версии. Если хранилище используется
 // виджетами только третьей версии - можно оставить Ext.
 var companiesStore = new Ext4.data.ArrayStore(companiesStoreConfig);
  
 // определяем таблицу (Ext JS 3)
 var grid = new Ext.grid.GridPanel({
  store: companiesStore, // хранилище для таблицы
  columns: [       // колонки таблицы
   {
    id       :'company',
    header   : 'Компания',
    sortable : true, 
    dataIndex: 'company'
   },
   {
    header   : 'Деньги', 
    width    : 70, 
    sortable : true, 
    dataIndex: 'money'
   }
  ],
  renderTo: 'gridDiv',
  autoExpandColumn: 'company',
  width: 350, autoHeight: true,
  border: false, frame: false,
  title: 'Компашки'
 });
 
 // определяем диаграмму (Ext JS 4)
 var chart = Ext4.createWidget('panel', {
  width: 795, height: 440,
  renderTo: 'chartDiv',
  border: false, frame: false,
  layout: 'fit',
  items: [{
   xtype: 'chart',
   store: companiesStore,
   legend: { field: 'company', position: 'right' },
   theme: 'Base:gradients',
   series: [{
    type: 'pie', donut: 35,
    field: 'money',
    showInLegend: true,
    label: {
     field: 'company',
     display: 'rotate', contrast: true, font: '12px Arial',
     renderer: function(v){ return ''; }
    }
   }]
  }]
 });
});

Приведенный код создаст таблицу, используя Ext JS 3, и диаграмму, используя Ext JS 4. Обратите внимание на тот факт, что при создании виджетов четвертой версии фреймворка внутри его описания можно использовать только компоненты четвертой версии. Например, в приведенном примере внутри описания диаграммы Chart нельзя написать

{
 ...
  renderTo: Ext.getBody()
...
}

но можно:

{
 ...
  renderTo: Ext4.getBody()
...
}

Соблюдайте эти правила — это позволит вам использовать новый функционал Ext JS 4 в пределах существующего Ext JS 3 приложения.

Используемый материал: