> 웹 프론트엔드 > JS 튜토리얼 > ext는 완전한 로그인 code_YUI.Ext 관련을 구현합니다.

ext는 완전한 로그인 code_YUI.Ext 관련을 구현합니다.

WBOY
풀어 주다: 2016-05-16 19:02:03
원래의
1217명이 탐색했습니다.

Ext.form.Field.prototype.msgTarget = 'side';

//양식 정의
var simple = new Ext.FormPanel({
labelWidth: 75,
baseCls: 'x -plain',
width: 150,
defaultType: 'textfield', //기본 필드 유형

//양식 요소 정의
items: [{
fieldLabel: 'Account ',
name: 'name',//요소 이름
//anchor:'95%',//이를 사용하여 적응형 너비를 정의할 수도 있습니다
allowBlank:false,//Blank는 그렇지 않습니다. 허용됨
blankText:'계정은 비워둘 수 없습니다'//오류 메시지 내용
},{
inputType:'password',
fieldLabel: 'Password',
//anchor:'95 %' ,
이름: 'pws',
allowBlank:false,
blankText:'비밀번호는 비워둘 수 없습니다.'
}
],

버튼: [{
텍스트: '로그인',
유형: '제출',
//양식 제출 이벤트 정의
handler:function(){
if(simple.form.isValid()){/ /확인 합법적인 경우 로딩 진행률 표시줄을 사용하세요
Ext.MessageBox.show({
title: '잠시 기다려주세요',
msg: 'Loading...',
progressText: '' ,
width:300,
progress:true,
closable:false,
animEl: 'loding'
})
//진행 속도 제어
var f = function(v ){
return function(){
var i = v/11;
Ext.MessageBox.updateProgress(i, '')
}; 🎜>
for(var i = 1; i setTimeout(f(i), i*150)
}
//서버 작업에 제출
simple .form.doAction('submit',{
url:'check.asp',//파일 경로
method:'post',//Submit method post 또는 get
매개변수: '',
//제출 성공을 위한 콜백 함수
success:function(form,action){
if (action.result.msg=='ok') {
document.location=' index.html' ;
} else {
Ext.Msg.alert('로그인 오류', action.result.msg)
}
},
//제출용 콜백 함수 failure
failure:function(){
Ext.Msg.alert('Error', '서버에 오류가 발생했습니다. 나중에 다시 시도해 주세요! ');
}
});
}
}
},{
text: '취소',
handler:function(){simple.form.reset ();}//양식 재설정
}]
})
//양식 정의
var win = new Ext.Window({
id:'win',
title:'User login',
layout:'fit', //앞서 언급한 레이아웃 방법 fit, 적응형 레이아웃
width:300,
height:150,
plain: true,
bodyStyle:'padding:5px;',
maximized:false,//최대화 금지
closeAction:'close',
closable:false,//닫기 금지
collapsible:true,// Collapsible
plain: true,
buttonAlign:'center',
items:simple//양식 요소로서의 양식의 중첩 레이아웃
}); /표시 형식

관련 라벨:
ext
원천:php.cn
본 웹사이트의 성명
본 글의 내용은 네티즌들의 자발적인 기여로 작성되었으며, 저작권은 원저작자에게 있습니다. 본 사이트는 이에 상응하는 법적 책임을 지지 않습니다. 표절이나 침해가 의심되는 콘텐츠를 발견한 경우 admin@php.cn으로 문의하세요.
인기 튜토리얼
더>
최신 다운로드
더>
웹 효과
웹사이트 소스 코드
웹사이트 자료
프론트엔드 템플릿