Преамбула
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 приложения.
Используемый материал:
