Home Web Front-end JS Tutorial ExtJS4 dynamically generated grid export to excel example_extjs

ExtJS4 dynamically generated grid export to excel example_extjs

May 16, 2016 pm 04:50 PM
grid

After searching for a long time, I found some examples. Most of them don't know how to use them because I am a beginner. .

I studied the source code and finally achieved basic downloading. Solved a small BUG that the table cannot be downloaded repeatedly, and a BUG that occurred when using grid initialization

The steps are recorded below. Maybe it will be useful next time

1. Downloading requires js code, I have already uploaded it

2. Add a reference to your html file, the path problem is yours Note, the following is my path

Copy code The code is as follows:

;

3. In the Ext of the JS code you want to use. Add

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

Set the namespace. . Pay attention to the path

4. Use it in the code and add

xtype: 'exporterbutton',
// store: store
component: Ext.getCmp('gird_a')

These are two ways to initialize excel. One is to initialize with store, using the fields and data of the store. Because the fields names in my store are in English and the exported column names are in English, I did not use this method, but Initialize directly with grid.

The following is what I modified based on other people’s code

1. In line 40 of exporter.js, it was changed to
Copy code The code is as follows:

var columns = Ext.Array.filter(grid.columnManager.columns,

The original code had grid.columns in the first parameter. Later I found that the columns of the dynamically generated grid were placed in columnManager.columns after reconfigure, so I changed it like this


2. In workbook.js In line 77.78, add two sentences
Copy the code The code is as follows:

this.styles =[];
this.worksheets=[];

The above 2 lines of code perform some initialization, otherwise every time excel is generated, it will cause a format error because the previous data is not cleared

After the above simple modifications, a grid can be exported at will, and table export of customized fields is supported, that is, the columns displayed in the export table

The rendering is here:
ExtJS4 dynamically generated grid export to excel example_extjs
ExtJS4 dynamically generated grid export to excel example_extjs
Statement of this Website
The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn

Hot AI Tools

Undresser.AI Undress

Undresser.AI Undress

AI-powered app for creating realistic nude photos

AI Clothes Remover

AI Clothes Remover

Online AI tool for removing clothes from photos.

Undress AI Tool

Undress AI Tool

Undress images for free

Clothoff.io

Clothoff.io

AI clothes remover

AI Hentai Generator

AI Hentai Generator

Generate AI Hentai for free.

Hot Article

R.E.P.O. Energy Crystals Explained and What They Do (Yellow Crystal)
1 months ago By 尊渡假赌尊渡假赌尊渡假赌
R.E.P.O. Best Graphic Settings
1 months ago By 尊渡假赌尊渡假赌尊渡假赌
Will R.E.P.O. Have Crossplay?
1 months ago By 尊渡假赌尊渡假赌尊渡假赌

Hot Tools

Notepad++7.3.1

Notepad++7.3.1

Easy-to-use and free code editor

SublimeText3 Chinese version

SublimeText3 Chinese version

Chinese version, very easy to use

Zend Studio 13.0.1

Zend Studio 13.0.1

Powerful PHP integrated development environment

Dreamweaver CS6

Dreamweaver CS6

Visual web development tools

SublimeText3 Mac version

SublimeText3 Mac version

God-level code editing software (SublimeText3)

Take you step by step to implement 3D dice using CSS Flex and Grid layout (with code) Take you step by step to implement 3D dice using CSS Flex and Grid layout (with code) Sep 23, 2022 am 09:58 AM

In front-end interviews, we are often asked how to implement dice/mahjong layout using CSS. The following article will introduce to you how to use CSS to create a 3D dice (Flex and Grid layout implement 3D dice). I hope it will be helpful to you!

Learn about five commonly used CSS layout frameworks Learn about five commonly used CSS layout frameworks Jan 16, 2024 am 09:20 AM

CSS layout framework: Explore the five commonly used layout frameworks Introduction: In web design, layout is a crucial part. The CSS layout framework can help us quickly build web pages with different layout styles. This article will introduce five commonly used CSS layout frameworks and provide specific code examples to help readers better understand and use these frameworks. 1. Bootstrap: Bootstrap is one of the most popular CSS layout frameworks currently. It has rich components and powerful responsive features that can

Detailed explanation of CSS relative layout properties: position and relative Detailed explanation of CSS relative layout properties: position and relative Oct 26, 2023 am 10:01 AM

Detailed explanation of CSS relative layout properties: position and relative In front-end development, layout is often a problem that developers need to face. In order to better control the position of elements on the page, CSS provides a variety of layout methods. Among them, relative layout is a very common layout method. By using the position and relative attributes, we can flexibly adjust the position and size of elements. The position attribute is used to define the positioning method of the element. Common values

CSS panel layout properties: grid and grid-template-columns CSS panel layout properties: grid and grid-template-columns Oct 25, 2023 am 08:15 AM

CSS panel layout properties: grid and grid-template-columns In modern web page layout, panel layout is a common design method that can arrange web content in a grid. The grid layout attribute in CSS and the grid-template-columns attribute are the keys to realizing panel layout. 1. Introduction to the grid layout attribute The grid layout attribute is an attribute used to create a grid layout in CSS. By converting HTML

UniApp implementation techniques for page layout and responsive design UniApp implementation techniques for page layout and responsive design Jul 05, 2023 pm 01:57 PM

UniApp’s implementation skills for implementing page layout and responsive design Introduction: UniApp is a cross-platform development tool based on the Vue.js framework, which can simultaneously develop applications for multiple platforms such as iOS, Android, and H5. This article will introduce how to use UniApp to implement page layout and responsive design, and provide some practical code examples. 1. Page layout Flex layout Flex layout is a commonly used method in page layout, which can automatically adapt to different screen sizes and devices. In UniApp

CSS adaptive layout property optimization tips: flex and grid CSS adaptive layout property optimization tips: flex and grid Oct 21, 2023 am 08:03 AM

CSS adaptive layout attribute optimization tips: flex and grid In modern web development, implementing adaptive layout is a very important task. With the popularity of mobile devices and the diversification of screen sizes, it is an essential requirement to ensure that the website can be displayed well on various devices and adapt to different screen sizes. Fortunately, CSS provides some powerful properties and techniques for implementing adaptive layout. This article will focus on two commonly used properties: flex and grid, and provide specific code examples.

HTML Tutorial: How to Use Grid Layout for Grid Average Layout HTML Tutorial: How to Use Grid Layout for Grid Average Layout Oct 19, 2023 am 10:49 AM

HTML Tutorial: How to Use Grid Layout for Grid Average Layout In web design, grid layout (GridLayout) is a commonly used layout method. It can effectively divide web content into multiple columns and perform flexible arrangement and layout. This tutorial will introduce how to use HTML and CSS Grid layout to implement grid average layout, and provide specific code examples. 1. What is grid layout? Grid layout is a layout method that divides the page into columns. These columns can be arranged according to rows and

Interpretation of CSS table layout properties: table and display Interpretation of CSS table layout properties: table and display Oct 21, 2023 am 11:47 AM

Interpretation of CSS table layout attributes: table and display In front-end development, table layout is a commonly used layout method. CSS provides some table layout properties, the most commonly used of which are table and display properties. These two properties will be explained in detail below and specific code examples will be given. 1. The table attribute table is an attribute used in CSS to set elements to a table layout. By setting the display attribute of the element to table, you can change the layout of the element.

See all articles