웹 프론트엔드 JS 튜토리얼 뷰포트, Ext.panel 및 Ext.form.panel_extjs 간의 관계 정보

뷰포트, Ext.panel 및 Ext.form.panel_extjs 간의 관계 정보

May 16, 2016 pm 06:53 PM
ext panel viewport

Ext.panel은 많은 요소를 저장할 수 있으며, 가장 일반적인 요소는 Ext.form.formPanel 객체이며, borderlayout 레이아웃도 사용할 수 있습니다
다음은 제가 작성한 작은 예입니다. 상단 컨테이너는 뷰포트가 아니라 탭패널입니다

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

//일반 형식
var frm = new Ext .form.FormPanel( {
defaultType: 'textfield',
labelAlign: 'right',
title: 'form1-center',
labelWidth: 50,
frame: true,
width: 120 ,
height:200,
region: 'center',
closable: true, //이 속성은
항목의 닫기를 제어할 수 있습니다: [{
fieldLabel: 'text box'
}],
buttons: [{
text: 'Button'
}]
})
//동지 여러분, 지역은 다음을 의미합니다. borderlayout 레이아웃, 중앙 위치
// 아래에 그리드를 생성합니다
// 그리드 시작
var cm = new Ext.grid.ColumnModel([
{ header: 'number', dataIndex: ' id' },
{ 헤더: '이름', dataIndex: '이름' },
{ 헤더: '설명', dataIndex: 'descn' }
])
var data = [
[' 1', 'name1', 'descn1'],
['2', 'name2', 'descn2'],
['3', 'name3', 'descn3'] ,
[ '4', 'name4', 'descn4'],
['5', 'name5', 'descn5']
]
var ds = new Ext.data. Store({
proxy: new Ext.data.MemoryProxy(data),
reader: new Ext.data.ArrayReader({}, [
{ name: 'id' },
{ name : '이름' } ,
{ 이름: 'descn' }
])
})
ds.load()
vargrid = new Ext.grid.GridPanel({
ds: ds,
cm: cm,
title: 'center-north',
region: 'north',
너비:200,
높이:200
});
// 그리드 끝
//동지 여러분, 지역은 경계 레이아웃 레이아웃을 의미하며 북쪽 위치는
//Ext.panel에 다른 패널이 포함될 수 있습니다.
var fullForm = new Ext. Panel({
title: '나는 아주 좋다',
closable: true,
border: true,
layout: 'border',//그의 레이아웃에 주의하세요
항목 : [그리드, frm]
})
본 웹사이트의 성명
본 글의 내용은 네티즌들의 자발적인 기여로 작성되었으며, 저작권은 원저작자에게 있습니다. 본 사이트는 이에 상응하는 법적 책임을 지지 않습니다. 표절이나 침해가 의심되는 콘텐츠를 발견한 경우 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 옷 제거제

AI Hentai Generator

AI Hentai Generator

AI Hentai를 무료로 생성하십시오.

뜨거운 도구

메모장++7.3.1

메모장++7.3.1

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

SublimeText3 중국어 버전

SublimeText3 중국어 버전

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

스튜디오 13.0.1 보내기

스튜디오 13.0.1 보내기

강력한 PHP 통합 개발 환경

드림위버 CS6

드림위버 CS6

시각적 웹 개발 도구

SublimeText3 Mac 버전

SublimeText3 Mac 버전

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

우분투에서 실수로 삭제된 그놈 패널을 복원하는 방법 우분투에서 실수로 삭제된 그놈 패널을 복원하는 방법 Jan 06, 2024 pm 11:01 PM

우분투에서 실수로 삭제된 그놈 패널을 복원하는 방법

Linux ext2 파일 시스템의 물리적 스토리지 구조에 대한 심층적 논의 Linux ext2 파일 시스템의 물리적 스토리지 구조에 대한 심층적 논의 Mar 14, 2024 pm 09:06 PM

Linux ext2 파일 시스템의 물리적 스토리지 구조에 대한 심층적 논의

CSS 뷰포트: 반응형 디자인을 위해 vh, vw, vmin 및 vmax 단위를 사용하는 방법 CSS 뷰포트: 반응형 디자인을 위해 vh, vw, vmin 및 vmax 단위를 사용하는 방법 Sep 13, 2023 pm 12:15 PM

CSS 뷰포트: 반응형 디자인을 위해 vh, vw, vmin 및 vmax 단위를 사용하는 방법

CSS 뷰포트 유닛 vh를 사용하여 모바일 화면에 적합한 웹 페이지 레이아웃을 만드는 방법 CSS 뷰포트 유닛 vh를 사용하여 모바일 화면에 적합한 웹 페이지 레이아웃을 만드는 방법 Sep 13, 2023 am 11:15 AM

CSS 뷰포트 유닛 vh를 사용하여 모바일 화면에 적합한 웹 페이지 레이아웃을 만드는 방법

CSS 뷰포트 단위 vh 및 vmin을 사용하여 미디어 쿼리를 생성하기 위한 팁 CSS 뷰포트 단위 vh 및 vmin을 사용하여 미디어 쿼리를 생성하기 위한 팁 Sep 13, 2023 am 11:18 AM

CSS 뷰포트 단위 vh 및 vmin을 사용하여 미디어 쿼리를 생성하기 위한 팁

Linux ext2 파일 시스템의 물리적 구성 분석 Linux ext2 파일 시스템의 물리적 구성 분석 Mar 15, 2024 am 09:24 AM

Linux ext2 파일 시스템의 물리적 구성 분석

패널 컨트롤 사용 방법 패널 컨트롤 사용 방법 Oct 10, 2023 am 09:36 AM

패널 컨트롤 사용 방법

Linux 시스템에서 ext3과 ext4의 차이점은 무엇입니까? Linux 시스템에서 ext3과 ext4의 차이점은 무엇입니까? Feb 19, 2024 am 11:48 AM

Linux 시스템에서 ext3과 ext4의 차이점은 무엇입니까?

See all articles