Ext.form.Panel 양식 패널 구성 요소 설명

1、Ext.form.FormPanel 지원 기본 양식 구성 요소
ExtJS 양식 구성 요소
설명
Xtype 유형
Ext.form.field.CheckBox
확인란
checkboxfield
Ext.form.CheckBoxGroup
확인란 그룹
checkboxgroup
Ext.form.field.ComboBox
드롭다운 목록 상자
combo
Ext.form.field.Date
날짜 선택 상자
datefield
Ext.form.field.Display
텍스트 표시 구성 요소
displayfield
Ext.form.field.FieldContainer
필드 컨테이너
fieldcontainer
Ext.form.field.FieldSet
필드 세트
fieldset
Ext.form.field.Hidden
도메인 숨기기
hiddenfield
Ext.form.field.HtmlEditer
HTML 텍스트 편집기
htmleditor
Ext.form.Label
레이블 필드
label
Ext.form.field.Number
숫자 입력 상자
numberfield
Ext.form.field.Radio
라디오 상자
radio
Ext.form.RadioGroup
라디오 그룹
radiogroup
Ext.form.field.Spinner
미세 조정 구성 요소
spinnerfield
Ext.form.field.TextArea
여러 줄 텍스트 상자
textareafield
Ext.form.field.Text
단일 행 텍스트 상자
textfield
Ext.form.field.Time
시간 선택 상자
timefield
Ext.form.field.Trigger
트리거 버튼 텍스트 상자
triggerfield
Ext.form.field.File
텍스트 상자 업로드 필드
filefield
2、Ext.form.Panel 주요 구성 항목 테이블
구성 항목
유형
설명
buttons
Array
버튼(Ext.button.Button)으로 객체 배열을 구성하면 양식 바닥글에 버튼이 추가됩니다.
layout
String
양식 레이아웃
minButtonWidth
Number
폼 단추의 최소 너비, 기본값은 75px
pollForChanges
Boolean
양식 값의 변화를 순환 검사하는지 여부
pollInterval
Number
양식 값을 검사하는 시간 간격을 반복합니다. 기본값은 500ms입니다.
items
Mixed
하위 원소나 하위 원소의 수조
title
String
양식 제목
3、Ext.form.FormPanel 일반 메소드 테이블
방법
설명
checkChange:void
모든 폼 필드에 변화가 있는지 강제로 검사합니다
getForm():Ext.form.BasicForm
양식 패널에 해당하는 기본 양식 객체 가져오기
load(Object options):void
양식 내용 로드
startPolling(Number interval):void
순환 검사 시작 폼 값이 변경되었는지 매개 변수 설명: interval: 순환 검사 시간, 단위 ms
stopPolling:void
startPolling 시작 중지 내장 작업
submit(Object options):void
양식 컨텐트 제출
4、Ext.form.field.기본 구성 항목 테이블
구성 항목
유형
설명
dirtyCls
String
양식 값이 수정된 스타일 설정
fieldCls
String
폼 필드의 스타일을 설정합니다. 기본값은 "x-form-field"
focusCls
String
폼 필드에 초점을 맞출 때의 스타일을 설정합니다. 기본값은 "x-form-focus"
id
String
컨트롤의 유일한 표지, 기본 시스템은 자동으로 유일한 표지를 생성합니다
inputId
String
이 id는 생성된 input 요소에 적용됩니다. 기본적으로 이 id는 자동으로 생성됩니다. 수동으로 id를 설정하면 이 id의 유일성을 확보해야 합니다.
invalidText
String
폼 값이 올바르지 않고 정보를 제공하지 않았을 때의 표시 문자 설정
inputType
String
필드 형식, 기본값은 text
name
String
필드 이름, 기본값은 undefined
readOnly
Boolean
필드가 읽기 전용인지 여부를 설정합니다. 기본값은false입니다.
Mixin:Ext.form.field.Field
disabled
Boolean
true는 구성 요소를 사용하지 않습니다. 기본값은false입니다.비활성화 상태의 구성 요소는 커밋되지 않습니다.
submitValue
Boolean
폼 필드가 비활성화된 상태에서 폼 값을 제출할지 여부를 설정합니다. 기본값은true
validateOnChange
Boolean
값이 변경될 때 즉시 유효성을 검사할지 여부를 설정합니다. 기본값은true
value
Mixed
필드의 초기화 값
Mixing:Ext.form.Labelable
activeError
String
이 값을 설정하면 구성 요소가 처음 렌더링될 때 오류 정보로 표시됩니다. 기본값은 undefined입니다. 구성 요소가 만들어진 후에 setActiveError와 unsetActiveError를 사용하여 수정할 수 있습니다.
activeErrorTpl
Ext.XTemplate
오류 정보 템플릿
autoFitErrors
Boolean
true로 설정하면 구성 요소 범위 내에서 "side"또는 "under"상태의 오류 정보를 표시하도록 자동으로 조정합니다. 기본적으로true
fieldLabel
String
labelSeparator와 함께 추가되는 필드 레이블을 설정합니다. 위치 크기는 labelAlign, labelWidth, labelPad 설정 항목에 따라 결정됩니다. 기본값은 undefined
hideEmptyLabel
Boolean
true로 설정하면 내용이 비어 있는 탭을 완전히 숨깁니다.
hideLabel
Boolean
true로 설정하면 폼 탭(fieldLabel 및 labelSeparator)을 완전히 숨깁니다. 기본값은false입니다.
labelAlign
String
양식 레이블 filedLabel의 위치를 설정합니다. 유효한 값: left: 레이블은 필드 왼쪽에 있습니다.top: 탭은 필드 위에 있습니다.right: 탭은 필드 오른쪽에 있습니다.
labelPad
Number
폼 탭과 폼 필드 값 사이의 공백 간격을 설정합니다. 기본값은 5px
labelSeparator
String
양식 태그와 양식 필드 사이의 구분자 설정
labelStyle
String
태그 요소에 직접 적용되는 스타일 문자열을 설정합니다. 기본값은undefined
labelWidth
Number
양식 레이블 폭을 설정합니다. labelAlign이 "left"또는 "right"로 설정된 경우에만 적용됩니다. 기본값은 100px
labelableRenderTpl
Array/String/Ext.Template
양식 레이블 템플릿
msgTarget
String
오류 정보 알림 위치를 설정합니다. 유효한 값은 다음과 같습니다. qtip: 부동 알림 메시지 보이기 title: 브라우저 부동 알림 메시지 보이기under: 필드 아래에 알림 메시지 보이기side: 필드 오른쪽에 알림 메시지 보이기none: 알림 메시지 보이기 [elementid]: 지정한 요소에 오류 메시지를 추가하는 innerHTML 속성
preventMark
Boolean
true는 오류 메시지를 표시하지 않습니다. 기본값은false입니다.
5. 간단한 실례
코드:

    
    
    
    
        Ext.onReady(function () {
            Ext.QuickTips.init();
            var form = new Ext.form.Panel({
                title: " ",
                height: 120,
                width: 200,
                frame: true,
                collapsible: true,
                renderTo: Ext.getBody(),
                defaults: {
                    autoFitErrors: "false",
                    labelSeparator: "：",
                    labelWidth: 50,
                    width: 150,
                    allowBlank: false,
                    blankText: " ",
                    msgTarget: "qtip"
                },
                items: [{
                    xtype: "textfield",
                    fieldLabel: " "
                }, {
                    xtype: "numberfield",
                    fieldLabel: " "
                }]
            });
        });