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

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]
})