Exportation de grille générée dynamiquement ExtJS4 vers Excel example

Exportation de grille générée dynamiquement ExtJS4 vers Excel example_extjs

WBOY

Libérer： 2016-05-16 16:50:32

original

1858 Les gens l'ont consulté

Après avoir longuement cherché, j'ai trouvé quelques exemples. La plupart d'entre eux ne savent pas comment les utiliser car je suis débutant. .

J'ai étudié le code source et j'ai finalement réalisé le téléchargement de base. Résolution d'un petit BUG empêchant le téléchargement de la table à plusieurs reprises et d'un BUG survenu lors de l'utilisation de l'initialisation de la grille

Les étapes sont enregistrées ci-dessous. Peut-être que cela sera utile la prochaine fois

1. Le téléchargement nécessite du code js, je l'ai téléchargé

2. Ajoutez une référence à votre fichier html, le problème de chemin est. le vôtre Remarque, voici mon chemin

Copier le code Le code est le suivant :

< ;script type ="text/javascript" src="../export/export-all.js" >;

3. souhaitez utiliser. Ajoutez

au début de onReady() Copiez le code .

Ext.Loader.setConfig ({ activé : true }); 
Ext.Loader.setPath('Ext.ux.exporter', '../export/exporter'); .require([ 
'Ext.ux .exporter.Exporter' 
]); 

 
Définissez l'espace de noms. . Faites attention au chemin 

4. Utilisez-le dans le code et ajoutez

à l'endroit approprié dans la grille où vous devez télécharger la fonction. Copiez le code Le code est le suivant :

xtype : 'exporterbutton',

// store : store 
component : Ext.getCmp( 'gird_a') 

 
Il existe deux façons d'initialiser Excel. La première consiste à initialiser avec le magasin, en utilisant les champs et les données du magasin, car les noms des champs de mon magasin sont en anglais et ceux exportés. les noms de colonnes sont en anglais, je n'ai pas utilisé cette méthode, mais initialisez directement avec la grille. 

Ce qui suit est ce que j'ai modifié en fonction du code d'autres personnes

1 Dans la ligne 40 de exporter.js, il a été remplacé par

<.>Copier le code Le code est le suivant : var columns = Ext.Array.filter(grid.columnManager.columns,

 
 Le code d'origine avait grid.columns dans le premier paramètre. Plus tard, j'ai découvert que les colonnes de la grille générée dynamiquement étaient placées dans columnManager.columns après la reconfiguration, donc je l'ai changé comme ceci 

2 . Dans workbook.js A la ligne 77.78, ajoutez deux phrases

Copiez le code Le code est le suivant : this.styles =[];

this.worksheets=[];

 
Les 2 lignes de code ci-dessus effectuent une initialisation, sinon Excel provoquera une erreur de format à chaque fois. est généré car les données précédentes ne sont pas effacées 

Après les simples modifications ci-dessus, une grille peut être exportée à volonté et l'exportation de table de champs personnalisés est prise en charge, c'est-à-dire les colonnes affichées dans la table d'exportation

Le rendu est ici :