👨‍🔬 👕 🗒️ Ext JS 3インターフェースの一部としてExt JS 4ウィジェットを使用する 👨🏾‍🎤 🤸🏿 🤦🏽

前文

Ext JS 4は、多数の新しいグラフやチャートなど、多くの新機能を開発者に提供します。比較-4番目のバージョンには、3番目のバージョンの4つの例だけに対してChart要素を使用した22の例があります。印象的ですね。

ただし、Ext JSの3番目のバージョンに実装されている大規模なアプリケーションがあり、4番目のバージョンのウィジェットを使用する必要がある場合はどうなりますか？たとえば、一般的な状況では、アプリケーションに新しい図を追加する必要がありますが、すべてを「4」に書き換えるのは実用的ではありません。

幸いなことに、フレームワークの開発者がこれを処理しました。 Ext JS 4は完全に分離されているため、同じページ内で4番目のバージョンと3番目のバージョンを使用できます。戦闘の例でこの機能を実証するために、フレームワークの作成者は、 Ext JS 3アプリケーションに4番目のバージョンの新しい図を追加する例を作成しました。それで、これには何が必要ですか？

作り方

最初に、いわゆるサンドボックス（サンドボックス）Ext JS 4をHTMLページに接続する必要があります。HTMLページにはCSSおよびJSファイルが含まれます： ext-sandbox.cssおよびext-all-sandbox.js 。フレームワークの3番目のバージョンを接続した後、サンドボックスを接続する必要があることに注意してください。

次に、ラッパーExt.onReady（...）をExt4.onReady（...）に置き換える必要があります。これにより、3番目のバージョンのアプリケーションの一部として4番目のExt JSの新機能を使用できるようになります。

第三に、新しいウィジェットには、新しいストアリポジトリを使用する必要があります。たとえば、ArrayStoreは次のようになります。

myStore = Ext4.create('store.array', { idIndex: 0, fields: [ 'id', 'company', 'money', ], data: [ [ 1, ' "  "', 100000 ], [ 2, ' ', 12000 ], [ 3, ' "  "', 45000 ] ] });

最後に、第4に、新しいウィジェットを作成するときは、Ext.blablablaではなくExt4.blablablaを記述することを忘れないでください。

例が欲しい！

例として、Ext JSの4番目のバージョンの図を古いExt JS 3ページに挿入します。 HTMLドキュメントを作成し、Ext JSの3番目のバージョンと上記の2つの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を使用してチャートを作成します。フレームワークの4番目のバージョンのウィジェットを作成する場合、4番目のバージョンのコンポーネントのみが説明内で使用できることに注意してください。たとえば、上記の例では、次のように書くことはできません。

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

ただし、次のことができます。

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

これらのルールに従ってください-これにより、既存のExt JS 3アプリケーション内で新しいExt JS 4機能を使用できます。

使用材料：

Ext JS 3インターフェースの一部としてExt JS 4ウィジェットを使用する

前文

作り方

例が欲しい！

More articles: