Extjs_extjs에서 일반적으로 사용되는 양식 소개 및 적용

목표:
양식 패널 생성 방법 알아보기
양식 패널에서 xtype 유형 적용 이해
양식 패널의 유효성 검사, 바인딩 및 값 가져오기 방법 알아보기
form 패널(사용해 보기)
Content:
가장 먼저 이해해야 할 것은 FormPanel도 패널 구성 요소를 상속한다는 것입니다. 그래서 패널의 속성을 가지고 있습니다.
실제로 폼 패널을 만드는 것은 매우 간단합니다. var MyformPanel=new Ext.form.formpanel()
패널과 마찬가지로 폼 패널도 컨테이너로만 나타나며, 항목을 사용하여 각 Control 요소를 추가하여 양식 패널을 강화해야 합니다.
기본값:{}, 이 특성은 항목

에 있는 각 구성 요소의 공통 특성을 추출합니다. xtype: 양식 패널에 매우 유용합니다. , new를 사용하여 구성 요소 유형을 정의하고 로드 후 구성 요소를 렌더링할 수 있는 구성 요소를 생성할 때마다 이를 변경할 필요가 없습니다.

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

form Ext.FormPanel
checkbox Ext .form.Checkbox
combo Ext.form.ComboBox
datefield Ext.form.DateField
field Ext.form.Field
fieldset Ext.form.FieldSet
hidden Ext.form.Hidden
htmleditor Ext.form.HtmlEditor
label Ext.form.Label
numberfield Ext.form.NumberField
radio Ext.form.Radio
textarea Ext.form.TextArea
textfield Ext. form.TextField
timefield Ext.form.TimeField
trigger Ext.form.TriggerField

Extjs는 다음 예제에서 확인할 수 있는 양식 유효성 검사에 대한 매우 강력한 지원을 제공합니다

예시 분석 설명:

1. 양식 패널 만들기

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

function Read2() {
Ext.QuickTips.init()
var MyForm=new Ext.form.FormPanel({
title: '양식 신청서',
너비:300,
x:300,
y:50,
floating:true,
tools:[{id:'close'}],
frame:true,
bodyStyle:'padding:10px 0px 1px 1px',
labelSeparator:':',
labelAlign:'right',
renderTo:Ext.getBody(),// 여기서는 사용할 수 없는 이유' id1'
defaults:{xtype:'textfield',width:150,allowBlank:false,msgTarget:'side'},//공통 속성 추출
items:[
{
fieldLabel:' 사용자 이름',
이름:'사용자 이름',
id:'사용자',
emptyText:'사용자 이름을 입력하세요',
blankText:'사용자 이름을 입력하세요 '
},
{
fieldLabel:'사용자 비밀번호',
이름:'userpassword',
id:'password',
inputType:'password',//It radiocheck 텍스트(기본값) filepassword 등도 포함됩니다.
blankText:'비밀번호를 입력하세요'

}

],
버튼:[{text:"OK"}, {text:"취소", 핸들러:function(){alert("이벤트! ");}}],
buttonAlign:'center'

});
}

참고: renderTo:'id1' 이때 양식 패널 표시가 실패하는 것에 대해 오랫동안 고민했는데 이유를 모르겠습니다.

둘째, 기본 폼 구성을 위한 응용 지침(보통 항목의 구성 요소 유형을 설명하기 위해 xtype을 사용합니다.)
필드셋 응용

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

function Read3() {
var MyformPanel=new Ext.form.FormPanel({
title:'필드셋 적용 ',
renderTo:Ext.getBody() ,
frame:true,
width:350,
x:400,
y:50,
floating:true,
항목:[
{
xtype:'fieldset',
title:'사용자 정보',
collapsible:true,
autoHeight:true,
autoWidth:true,
defaults:{width:150,allowBlank:false, xtype:'textfield'},
항목:[
{
fieldLabel:'사용자 이름',
emptyText:'Chen Jianqiang',
blankText:'사용자 이름을 입력하세요'
},
{
fieldLabel:'사용자 비밀번호',
inputType:'password',
blankText:'사용자 비밀번호를 입력하세요'
}
]
}
]
})
}

양식 패널의 기본 구성 요소 소개

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

function Read3() {
2 Ext.QuickTips.init();//초기화 팁
3 Ext.apply(Ext.form.VTypes,{
4 비밀번호:function( val,field){//val은 여기에서 텍스트 상자 값을 참조하고, field는 이 텍스트 상자 구성 요소를 참조하므로 모두가 이 의미를 이해해야 합니다.
5 if(field.confirmTo){//confirmTo는 일반적으로 사용자 정의 구성 매개변수입니다. 다른 컴포넌트의 id 값을 저장하는데 사용됩니다
6 var pwd=Ext.get(field.confirmTo);//confirmTo의 id 값을 가져옵니다
7 return (val==pwd.getValue()) ;
8 }
9 return true;
}
})
var MyformPanel=new Ext.form.FormPanel({
title:'fieldset 애플리케이션',
renderTo:Ext.getBody(),
프레임:true,
너비:550,
x:400,
y:50,
드래그 가능:{
insertProxy: false,/ /드래그 시 원래 위치를 점선으로 표시하지 않음
onDrag: function(e){
var pel = this.proxy.getEl()
this.x = pel.getLeft(true) ;
this.y = pel.getTop(true);//드래그할 때 패널 좌표 가져오기
var s = this.panel.getEl().shadow
if (s); 🎜>s.realign (this.x, this.y, pel.getWidth(), pel.getHeight())
}
},
endDrag : function(e){
this .panel.setPosition( this.x, this.y);//마지막 위치로 이동
}
},
plain:true,
floating:true,
items:[
{
xtype:'fieldset',
checkboxToggle:true,
checkboxName:'user',
title:'사용자 정보',
collapsible:true,
autoHeight :true,
autoWidth:true,
labelSeparator:':',
labelAlign:'right',
labelWidth:70,
기본값:{width:150,allowBlank:false,xtype :'textfield'},
항목:[
{
fieldLabel:'username',
emptyText:'陈杰强',
id:'user',
name:'userName ',
BlankText:'사용자 이름을 입력하세요',
anchor:'95%'
},
{
fieldLabel:'사용자 비밀번호',
inputType:'password' ,// 비밀번호 텍스트 확인란 rodio
id:'password',
name:'userpassword',
value:'0717',
blankText:'사용자 비밀번호를 입력하세요',
anchor :'95%'
},
{
fieldLabel:'비밀번호 확인',
id:'password2',
name:'userpassword2',
inputType:'password' ,
vtype :'password',
vtypeText:'두 번 입력한 비밀번호가 일치하지 않습니다.',
confirmTo:'userpassword',
anchor:'95%'
},
{
xtype:"datefield",
fieldLabel:"생년월일",
anchor:"95%"
},
{
fieldLabel:'내 블로그',
값:' http://www.cnblogs.com/chenjq0717',
vtype:'url',
vtypeText:'유효한 URL이 아님',
id1:'myblog',
name:'myblog',
anchor:'95%'
},
{
//alpha는 문자만 입력할 수 있으며 기타(숫자, 특수 기호 등)는 입력할 수 없습니다.
//2.alphanum //문자, 숫자만 입력 가능하며 그 외는 입력 불가
//3.email//이메일 인증 필수 형식은 "langsin@gmail.com"입니다
// 4.url//url 형식 확인, 필수 형식은 http://www.langsin.com입니다.
fieldLabel:'email',
vtype:'email',
vtypeText:'not a valid email ',
이름:' 이메일',
앵커:'95%'
},
{
xtype:"패널",
레이아웃:"열",
fieldLabel:'gender',
isFormField:true,
items:[{
columnWidth:.5,
xtype:"radio",
boxLabel:"male",
name :"sex"
/ /inputValue
},{
columnWidth:.5,
checked:true,
xtype:"radio",
boxLabel:"female",
name:"sex"
}]
},
{
xtype:"panel",
layout:"column",//다중 구현을 위한 테이블일 수도 있습니다. -열 레이아웃
fieldLabel:'hobby' ,
isFormField:true,//매우 중요합니다. 그렇지 않으면 패널에 기본적으로 fieldLabel이 표시되지 않습니다.
items:[{
columnWidth:.5,// 너비는 50%입니다.
xtype: "checkbox",
boxLabel: "Football", //체크 상자 오른쪽에 표시되는 텍스트
name: ""
},{
columnWidth:.5,
xtype: "checkbox",
boxLabel:"Basketball",
name:""
}]
},
{
xtype :'combo',
fieldLabel:'사용자의 고향',
name:'family',
store:<%=getfamilyData() %>,//배경 변수 호출
emptyText : '고향을 선택하세요'
},
{
xtype:"htmleditor",
id:"myinfo",
fieldLabel:"개인 설명",
anchor:" 99%"
}
]
}
]
});
}

양식 데이터가 다음에 제출됩니다. 서버 submit

submit: function(){
this.getEl() .dom.action = 'MyPages/GetForm.aspx', //제출 후 페이지가 리디렉션됨
this.getEl( ).dom.method='POST',//제출 방법
this.getEl().dom.submit();//제출 실행
},

제출 버튼 추가

버튼:[{text:"OK",handler:login,formBind:true},{ text:"Cancel",handler:reset}]

제출 방법 추가:

함수 로그인(){
MyformPanel.form.submit();//제출
} ​​
함수 재설정(){
MyformPanel.form.reset();//취소
}


이 수업의 코드:
양식 패널 종합 적용

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

<%@ Page Language="C#" AutoEventWireup="true" CodeBehind="Ext7.aspx.cs" Inherits="EXT1.Ext7" %>
2
3
4
5
6
7
8
9