Using Ext JS 4 widgets within the Ext JS 3 interface
Preamble
Ext JS 4 introduces many new features to developers, including, for example, a large number of new graphs and diagrams. Compare - for the fourth version, there are 22 examples of using Chart elements against all four examples for the third version. Impressive, isn't it?
However, what if there is a large application available on the third version of Ext JS and there is a need to use some of the fourth version widgets? For example, a typical situation is when new diagrams need to be added to the application, but rewriting everything into a “four” is not advisable.
Fortunately, the framework developers took care of this. Ext JS 4 is completely isolated, allowing you to use the fourth version along with the third one within one page! To demonstrate this possibility in a combat example, the authors of the framework created an example that adds new fourth version diagrams to Ext JS 3 application. So what is needed for this?
How to do?
Firstly, you need to connect the Ext JS 4 sandbox (sandbox) to the HTML page, which includes the CSS and JS file: ext-sandbox.css and ext-all-sandbox.js . Please note that connecting the sandbox is necessary after connecting the third version of the framework.
')
Secondly, the Ext.onReady (...) wrapper needs to be replaced with Ext4.onReady (...). This will allow to use the new features of the fourth Ext JS within the framework of the third version application.
Thirdly, for new widgets, you must use the new store Store. For example, ArrayStore looks like this:
myStore = Ext4.create('store.array', { idIndex: 0, fields: [ 'id', 'company', 'money', ], data: [ [ 1, ' " "', 100000 ], [ 2, ' ', 12000 ], [ 3, ' " "', 45000 ] ] }); And finally, fourth, we do not forget to write Ext4.blablabla instead of Ext.blablabla when creating new widgets.
I want an example!
As an example, insert a diagram of the fourth version of Ext JS in the old Ext JS 3 page. Create an HTML document, include the third version of Ext JS and the two Ext JS 4 sandbox files mentioned above. Then let's start writing our hybrid application - its code is below.
// 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 ''; } } }] }] }); }); The above code will create a table using Ext JS 3, and a diagram using Ext JS 4. Pay attention to the fact that when creating the fourth version of the framework widgets inside its description, you can use only the fourth version components. For example, in the example above, the description of a Chart chart cannot be written
{ ... renderTo: Ext.getBody() ... } but you can:
{ ... renderTo: Ext4.getBody() ... } Follow these rules - this will allow you to use the new Ext JS 4 functionality within the existing Ext JS 3 application.
Material used:
Source: https://habr.com/ru/post/128557/
All Articles