확장 양식 레이아웃 예제 code_extjs

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

Ext.onReady(function(){
Ext .QuickTips.init();
//첫 번째 문장의 목적은 필수 구성 요소에 대한 프롬프트 정보를 제공하는 것입니다.
Ext.form .Field.prototype.msgTarget. = 'under';
//두 번째 문장의 목적은 컨트롤의 오류 메시지 표시 위치를 설정하는 것입니다.
var tdate = new Ext. form.DateField({
fieldLabel: 'Date',
emptyText: '날짜를 선택하세요',
format: 'Y-m-d',
disabledDays: [0, 7]
});
var txt = new Ext .form.TextField({
fieldLabel: '이름을 입력하세요',
allowBlank: false,
emptyText: 'Empty',
maxLength: 50,
minLength: 10,
bodyStyle: 'padding-left:5px',
anchor: '90%'//오류 메시지를 위해 10칸을 남겨두세요,
}); var htmlEdt=new Ext.form.HtmlEditor({
fieldLabel:'Online Editor',
enableAlignments:true,
enableColors:true,
enableFont:true,
enableFontSize:true,
enableFormat:true,
enableLinks :true,
enableLists:true,
enableSourceEdit:true
})
var txt2 = new Ext.form.TextField({
fieldLabel : '이름을 입력하세요',
allowedBlank: false,
emptyText: 'empty',
maxLength: 50,
minLength: 10,
bodyStyle: 'padding-left:5px' ,
anchor: '90%'
//오류 메시지를 표시하려면 10칸을 남겨두세요
})
var frm1 = new Ext.form.FormPanel({
labelAlign: 'right',
labelWidth: 100,// 제목 너비 수정에 주의
title: 'form1',
frame: true,
width: 700,
url: 'sender/data .aspx',
items: [{
layout: 'column',//올바른 점이 여기에 있습니다. 이는 다음 항목이 "Column" 열을 기준으로 정렬된다는 의미입니다
items: [{
columnWidth: .5,
layout: 'form' , //첫 번째 열의 콘텐츠는 양식을 기준으로 위에서 아래로 정렬됩니다.
items: [txt2]
},
{
columnWidth: .5,
layout: 'form' , //두 번째 열의 콘텐츠는 양식을 기준으로 위에서 아래로 정렬됩니다.
items: [txt, tdate]
}]
}, htmlEdt]
})
frm1.render("frm")
});