웹 프론트엔드 JS 튜토리얼 ExtJS4는 동적으로 생성된 그리드를 Excel로 내보내기 example_extjs

ExtJS4는 동적으로 생성된 그리드를 Excel로 내보내기 example_extjs

May 16, 2016 pm 04:50 PM
grid

오랫동안 검색한 결과 몇 가지 예를 찾았습니다. 저는 초보자이기 때문에 대부분 사용법을 모릅니다. .

소스코드를 공부하고 드디어 기본 다운로드를 달성했습니다. 테이블을 반복적으로 다운로드할 수 없는 작은 버그와 그리드 초기화 사용 시 발생하는 버그를 해결했습니다

아래 단계를 기록합니다. 다음번에 유용할 것 같습니다

1. 다운로드하려면 js 코드가 필요합니다. 이미 업로드했습니다.

2. html 파일에 참조를 추가하세요. 참고로 다음은 내 경로입니다

코드 복사 코드는 다음과 같습니다.

;

3. onReady() 시작 부분에
Ext.Loader.setConfig({ 활성화: true })
Ext.Loader.setPath('Ext.ux.exporter', '../export/exporter')
Ext.require([
'Ext.ux .exporter.Exporter'
])

네임스페이스를 설정합니다. .

경로에 주의하세요. 4. 코드에서 이를 사용하고 기능을 다운로드해야 하는 그리드의 적절한 위치에

을 추가하세요. 코드를 복사하세요 코드는 다음과 같습니다:
xtype: 'exporterbutton',
// store: store
comComponent: Ext.getCmp( 'gird_a')

Excel을 초기화하는 방법은 두 가지가 있습니다. 하나는 Store의 필드와 데이터를 사용하여 Store로 초기화하는 것입니다. 컬럼 이름이 영어로 되어 있어서 이 방법은 사용하지 않고 그리드로 직접 초기화합니다.

다른 사람의 코드를 참고하여 수정한 내용입니다

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=[];


위의 두 줄의 코드는 일부 초기화를 수행합니다. 그렇지 않으면 Excel이 생성될 때마다 이전 데이터가 지워지지 않아 포맷 오류

위의 간단한 수정 후 그리드를 마음대로 내보낼 수 있으며, 사용자 정의 필드의 테이블 내보내기, 즉 내보내기 테이블에 표시되는 열이 지원됩니다

렌더링은 여기:


ExtJS4는 동적으로 생성된 그리드를 Excel로 내보내기 example_extjs
본 웹사이트의 성명
본 글의 내용은 네티즌들의 자발적인 기여로 작성되었으며, 저작권은 원저작자에게 있습니다. 본 사이트는 이에 상응하는 법적 책임을 지지 않습니다. 표절이나 침해가 의심되는 콘텐츠를 발견한 경우 admin@php.cn으로 문의하세요.

핫 AI 도구

Undresser.AI Undress

Undresser.AI Undress

사실적인 누드 사진을 만들기 위한 AI 기반 앱

AI Clothes Remover

AI Clothes Remover

사진에서 옷을 제거하는 온라인 AI 도구입니다.

Undress AI Tool

Undress AI Tool

무료로 이미지를 벗다

Clothoff.io

Clothoff.io

AI 옷 제거제

Video Face Swap

Video Face Swap

완전히 무료인 AI 얼굴 교환 도구를 사용하여 모든 비디오의 얼굴을 쉽게 바꾸세요!

뜨거운 도구

메모장++7.3.1

메모장++7.3.1

사용하기 쉬운 무료 코드 편집기

SublimeText3 중국어 버전

SublimeText3 중국어 버전

중국어 버전, 사용하기 매우 쉽습니다.

스튜디오 13.0.1 보내기

스튜디오 13.0.1 보내기

강력한 PHP 통합 개발 환경

드림위버 CS6

드림위버 CS6

시각적 웹 개발 도구

SublimeText3 Mac 버전

SublimeText3 Mac 버전

신 수준의 코드 편집 소프트웨어(SublimeText3)

CSS Flex 및 그리드 레이아웃(코드 포함)을 사용하여 3D 주사위를 구현하는 방법을 단계별로 안내합니다. CSS Flex 및 그리드 레이아웃(코드 포함)을 사용하여 3D 주사위를 구현하는 방법을 단계별로 안내합니다. Sep 23, 2022 am 09:58 AM

프론트엔드 인터뷰에서 CSS를 사용하여 주사위/마작 레이아웃을 구현하는 방법에 대한 질문을 자주 받습니다. 다음 기사에서는 CSS를 사용하여 3D 주사위를 만드는 방법을 소개합니다(Flex 및 Grid 레이아웃은 3D 주사위를 구현함).

일반적으로 사용되는 5가지 CSS 레이아웃 프레임워크에 대해 알아보세요. 일반적으로 사용되는 5가지 CSS 레이아웃 프레임워크에 대해 알아보세요. Jan 16, 2024 am 09:20 AM

CSS 레이아웃 프레임워크: 일반적으로 사용되는 5가지 레이아웃 프레임워크 살펴보기 소개: 웹 디자인에서 레이아웃은 중요한 부분입니다. CSS 레이아웃 프레임워크는 다양한 레이아웃 스타일로 웹 페이지를 빠르게 구축하는 데 도움이 될 수 있습니다. 이 기사에서는 일반적으로 사용되는 5가지 CSS 레이아웃 프레임워크를 소개하고 독자가 이러한 프레임워크를 더 잘 이해하고 사용할 수 있도록 구체적인 코드 예제를 제공합니다. 1. 부트스트랩: 부트스트랩은 현재 가장 인기 있는 CSS 레이아웃 프레임워크 중 하나입니다. 풍부한 구성 요소와 강력한 반응 기능을 갖추고 있습니다.

CSS 상대 레이아웃 속성에 대한 자세한 설명: 위치 및 상대 CSS 상대 레이아웃 속성에 대한 자세한 설명: 위치 및 상대 Oct 26, 2023 am 10:01 AM

CSS 상대 레이아웃 속성에 대한 자세한 설명: 위치 및 상대 프런트 엔드 개발에서 레이아웃은 개발자가 페이지에서 요소의 위치를 ​​더 잘 제어하기 위해 직면해야 하는 문제인 경우가 많습니다. CSS는 다양한 레이아웃 방법을 제공합니다. 그중 상대 레이아웃은 매우 일반적인 레이아웃 방법으로, 위치 및 상대 속성을 사용하여 요소의 위치와 크기를 유연하게 조정할 수 있습니다. 위치 속성은 요소의 위치 지정 방법을 정의하는 데 사용됩니다.

CSS 패널 레이아웃 속성: 그리드 및 그리드 템플릿 열 CSS 패널 레이아웃 속성: 그리드 및 그리드 템플릿 열 Oct 25, 2023 am 08:15 AM

CSS 패널 레이아웃 속성: 그리드 및 그리드-템플릿-열 최신 웹 페이지 레이아웃에서 패널 레이아웃은 웹 콘텐츠를 그리드에 배열할 수 있는 일반적인 디자인 방법입니다. CSS의 그리드 레이아웃 속성과 Grid-template-columns 속성은 패널 레이아웃을 구현하는 열쇠입니다. 1. 그리드 레이아웃 속성 소개 그리드 레이아웃 속성은 CSS에서 HTML을 변환하여 그리드 레이아웃을 생성하는 데 사용되는 속성입니다.

페이지 레이아웃 및 반응형 디자인을 위한 UniApp 구현 기술 페이지 레이아웃 및 반응형 디자인을 위한 UniApp 구현 기술 Jul 05, 2023 pm 01:57 PM

페이지 레이아웃 및 반응형 디자인 구현을 위한 UniApp의 구현 기술 소개: UniApp은 Vue.js 프레임워크를 기반으로 하는 크로스 플랫폼 개발 도구로, iOS, Android 및 H5와 같은 여러 플랫폼용 애플리케이션을 동시에 개발할 수 있습니다. 이 기사에서는 UniApp을 사용하여 페이지 레이아웃과 반응형 디자인을 구현하는 방법을 소개하고 몇 가지 실용적인 코드 예제를 제공합니다. 1. 페이지 레이아웃 Flex 레이아웃 Flex 레이아웃은 페이지 레이아웃에서 일반적으로 사용되는 방법으로, 다양한 화면 크기와 장치에 자동으로 적응할 수 있습니다. 유니앱에서

CSS 적응형 레이아웃 속성 최적화 팁: Flex 및 Grid CSS 적응형 레이아웃 속성 최적화 팁: Flex 및 Grid Oct 21, 2023 am 08:03 AM

CSS 적응형 레이아웃 속성 최적화 팁: 플렉스 및 그리드 최신 웹 개발에서 적응형 레이아웃을 구현하는 것은 매우 중요한 작업입니다. 모바일 기기의 대중화와 화면 크기의 다양화로 인해 웹 사이트가 다양한 기기에서 잘 표시되고 다양한 화면 크기에 적응할 수 있는지 확인하는 것이 필수 요구 사항입니다. 다행히 CSS는 적응형 레이아웃을 구현하기 위한 몇 가지 강력한 속성과 기술을 제공합니다. 이 문서에서는 일반적으로 사용되는 두 가지 속성인 flex 및 Grid에 중점을 두고 구체적인 코드 예제를 제공합니다.

HTML 튜토리얼: 그리드 평균 레이아웃에 그리드 레이아웃을 사용하는 방법 HTML 튜토리얼: 그리드 평균 레이아웃에 그리드 레이아웃을 사용하는 방법 Oct 19, 2023 am 10:49 AM

HTML 튜토리얼: 그리드 평균 레이아웃에 그리드 레이아웃을 사용하는 방법 웹 디자인에서 그리드 레이아웃(GridLayout)은 웹 콘텐츠를 여러 열로 효과적으로 나누고 유연한 배열과 레이아웃을 수행할 수 있는 일반적으로 사용되는 레이아웃 방법입니다. 이 튜토리얼에서는 HTML 및 CSS 그리드 레이아웃을 사용하여 그리드 평균 레이아웃을 구현하는 방법을 소개하고 특정 코드 예제를 제공합니다. 1. 그리드 레이아웃이란 무엇입니까? 그리드 레이아웃은 페이지를 열로 나누는 레이아웃 방식입니다.

CSS 테이블 레이아웃 속성 해석: 테이블 및 디스플레이 CSS 테이블 레이아웃 속성 해석: 테이블 및 디스플레이 Oct 21, 2023 am 11:47 AM

CSS 테이블 레이아웃 속성 해석: 테이블 및 디스플레이 프런트엔드 개발에서 테이블 레이아웃은 일반적으로 사용되는 레이아웃 방법입니다. CSS는 몇 가지 테이블 레이아웃 속성을 제공하며, 가장 일반적으로 사용되는 속성은 테이블 및 표시 속성입니다. 이 두 가지 속성은 아래에서 자세히 설명하고 구체적인 코드 예제가 제공됩니다. 1. 테이블 속성 테이블은 CSS에서 테이블 레이아웃에 요소를 설정하는 데 사용되는 속성입니다. 요소의 표시 속성을 테이블로 설정하면 요소의 레이아웃을 변경할 수 있습니다.

See all articles