ExtJS4 で動的に生成されたグリッドを Excel にエクスポート example

ExtJS4 で動的に生成されたグリッドを Excel にエクスポート example_extjs

WBOY

リリース： 2016-05-16 16:50:32

オリジナル

1858 人が閲覧しました

長い間検索した結果、いくつかの例を見つけましたが、初心者のため使い方がわかりません。。

ソースコードを勉強して、ようやく基本的なダウンロードが完了しました。テーブルを繰り返しダウンロードできない小さなバグと、グリッド初期化を使用するときに発生するバグを解決しました

手順を以下に記録します。次回役立つかもしれません

1. ダウンロードには js コードが必要です。すでにアップロードしています

2. HTML ファイルへの参照を追加します。パスの問題です。以下はあなたのパスです。

コードをコピーコードは次のとおりです:

;

3. JS コードの Ext

を onReady() の先頭に追加します。コードは次のとおりです。 > Ext.Loader.setConfig ({ 有効: true }); Ext.Loader.setPath('Ext.ux.exporter', '../export/exporter'); Ext.require([

'Ext.ux .exporter.Exporter'

]); 

名前空間を設定します。 。パス 

 に注意してください。コード内でそれを使用し、関数をダウンロードする必要があるグリッド内の適切な場所に

を追加します。コードをコピーします

コードは次のとおりです: xtype: 'exporterbutton', // store: store component: Ext.getCmp( 'gird_a')

 
Excel を初期化するには 2 つの方法があります。1 つはストアのフィールドとデータを使用して初期化する方法です。ストアのフィールド名は英語であり、エクスポートされたものであるためです。列名は英語ですが、私はこの方法を使用せず、グリッドで直接初期化しました。 

以下は他の人のコードを元に修正したものです

1.exporter.js の 40 行目を

コードをコピー

コードは次のとおりです: var columns = Ext.Array.filter(grid.columnManager.columns, 元のコードでは最初のパラメータにgrid.columnsがありましたが、再構成後に動的に生成されたグリッドの列がcolumnManager.columnsに配置されることがわかりましたので、次のように変更しました

2 workbook.js の 77.78 行目に、

コードをコピーします

コードは次のとおりです。 > this.styles =[]; this.worksheets=[]; 上記の 2 行のコードは初期化を実行します。そうしないと、Excel が生成されるたびに、以前のデータがクリアされていないため、フォーマットエラーが発生しました

上記の簡単な変更後、グリッドを自由にエクスポートできるようになり、カスタマイズされたフィールド、つまりエクスポートテーブルに表示される列のテーブルエクスポートがサポートされます

レンダリングは次のとおりです: