ExtJs_extjs의 간단한 로그인 인터페이스 생성 방법

먼저 사진을 보세요

두 번째 로그인 인터페이스 확장 코드

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

/// <참조 경로="http://http://www.jb51.net/Resources /ExtJs/vswd -ext_2.0.2.js" />
//프롬프트 상자 로드
Ext.QuickTips.init();
//네임스페이스 생성
Ext.namespace('XQH. ExtJs.Frame ');
//주 애플리케이션
XQH.ExtJs.Frame.app = function() {
}
Ext.extend(XQH.ExtJs.Frame.app, Ext.util .Observable , {
LoginLogo:new Ext.Panel({
id: 'loginLogo',
height: 35,
frame:true,
bodyStyle:'padding-top:4px' ,
html:'

Backend Ext Framework

'
}),
//로그인 양식
LoginForm: new Ext.form .FormPanel({
id: 'loginForm',
defaultType: 'textfield',
labelAlign: 'right',
labelWidth: 60,
frame: true,
기본값:
{
allowBlank: false
},
항목:
[
{
name:'LoginName',
fieldLabel: '로그인 계정',
BlankText: '계정은 비워둘 수 없습니다',
emptyText:'required',
anchor: '98%'
},
{
name:'LoginPsd',
inputType: 'password',
fieldLabel: '로그인 비밀번호',
blankText: '비밀번호는 비워둘 수 없습니다.',
maxLength:10,
anchor: '98%'
}
]
}),
//로그인 창
LoginWin: new Ext.Window({
id: 'loginWin',
Title: 'Login',
width: 250,
높이: 150,
닫기 가능: false,
접기 가능: false,
크기 조절 가능: false,
기본값: {
테두리: false
},
buttonAlign: ' 센터',
버튼: [
{ 텍스트: '정보' },
{ 텍스트: '로그인' }
],
레이아웃: '열',
항목:
[
{
columnWidth: 1,
items: Ext.getCmp("loginLogo")
},
{
columnWidth: 1,
items: Ext. getCmp("loginForm")
}
]
}),
//초기화
init: function() {
this.LoginWin.show()
}
});
//프로그램 항목
Ext.onReady(function() {
var loginFrame = new XQH.ExtJs.Frame.app();
loginFrame.init();
})

3가지 사용 경험　
　1./// <참조 경로="http://www.jb51.net/Resources/ ExtJs/vswd-ext_2.0.2.js" />이 문장은 ext 자동 프롬프트 기능의 소스 파일입니다
2. 일반적으로 사용되는 ext 인터페이스 레이아웃에는 border, Column, fit이 있습니다. 자세한 사용법은 나중에 소개하겠습니다.
3. ext 사용에 관해서는 사실 formpanel(form)과 같이 창과 패널에 필요한 내용을 삽입하는 것이 대부분입니다.
4. {object config}를 이해하기 위해 실제로 대부분의 확장 구성 항목은 버튼 {text: 'l login'}과 같은 {name: value} 형식을 기반으로 합니다.
5. 확장 코드 작성 표준화하는 것이 가장 좋습니다. 그러면 오류율을 줄일 수 있습니다. 구성정보,
(가장 바깥쪽 레이어라면 Layout, Layout Mode 적는 것을 잊지 마세요)

추신: 환영합니다. 흥미로운 내용을 추가해 주세요.