ExtJs中簡(jiǎn)單的登錄界面制作方法
更新時(shí)間:2010年08月19日 20:30:05 作者:
接觸Ext也有好幾個(gè)月了,但是由于時(shí)間問題,都沒有好好總結(jié)一下,現(xiàn)在抽空再博客里回顧下Ext使用心得,歡迎各位指點(diǎn)。
一 首先請(qǐng)看圖片

二 登陸界面Ext代碼
/// <reference path="http://http://www.dhdzp.com/Resources/ExtJs/vswd-ext_2.0.2.js" />
//加載提示框
Ext.QuickTips.init();
//創(chuàng)建命名空間
Ext.namespace('XQH.ExtJs.Frame');
//主應(yīng)用程序
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:'<h3><center>后臺(tái)Ext框架</center></h3>'
}),
//登陸表單
LoginForm: new Ext.form.FormPanel({
id: 'loginForm',
defaultType: 'textfield',
labelAlign: 'right',
labelWidth: 60,
frame: true,
defaults:
{
allowBlank: false
},
items:
[
{
name:'LoginName',
fieldLabel: '登陸賬號(hào)',
blankText: '賬號(hào)不能為空',
emptyText:'必填',
anchor: '98%'
},
{
name:'LoginPsd',
inputType: 'password',
fieldLabel: '登陸密碼',
blankText: '密碼不能為空',
maxLength:10,
anchor: '98%'
}
]
}),
//登陸窗口
LoginWin: new Ext.Window({
id: 'loginWin',
Title: '登陸',
width: 250,
height: 150,
closable: false,
collapsible: false,
resizable:false,
defaults: {
border: false
},
buttonAlign: 'center',
buttons: [
{ text: '關(guān)于' },
{ text: '登陸' }
],
layout: 'column',
items:
[
{
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();
});
三 使用心得
1./// <reference path="http://www.dhdzp.com/Resources/ExtJs/vswd-ext_2.0.2.js" />這句為ext自動(dòng)提示功能源文件
2.關(guān)于ext界面布局常用的有border,column,fit這幾種,詳細(xì)用法以后再作介紹
3.關(guān)于ext使用,其實(shí)大部分就是window,panel里面鑲嵌自己需要的內(nèi)容,如formpanel(表單)。
4.要理解{object config},其實(shí)大部分ext配置項(xiàng)都是基于這種形式的,{名稱:值},如按鈕{text:'l登陸'}
5.書寫ext代碼最好規(guī)范化,這樣可以減少出錯(cuò)率。
大概形式:
{
id:'',(最好寫上)
配置信息,
(如果是最外層的別忘了寫layout,布局模式)
}
PS:歡迎大家補(bǔ)充,提意思。

二 登陸界面Ext代碼
復(fù)制代碼 代碼如下:
/// <reference path="http://http://www.dhdzp.com/Resources/ExtJs/vswd-ext_2.0.2.js" />
//加載提示框
Ext.QuickTips.init();
//創(chuàng)建命名空間
Ext.namespace('XQH.ExtJs.Frame');
//主應(yīng)用程序
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:'<h3><center>后臺(tái)Ext框架</center></h3>'
}),
//登陸表單
LoginForm: new Ext.form.FormPanel({
id: 'loginForm',
defaultType: 'textfield',
labelAlign: 'right',
labelWidth: 60,
frame: true,
defaults:
{
allowBlank: false
},
items:
[
{
name:'LoginName',
fieldLabel: '登陸賬號(hào)',
blankText: '賬號(hào)不能為空',
emptyText:'必填',
anchor: '98%'
},
{
name:'LoginPsd',
inputType: 'password',
fieldLabel: '登陸密碼',
blankText: '密碼不能為空',
maxLength:10,
anchor: '98%'
}
]
}),
//登陸窗口
LoginWin: new Ext.Window({
id: 'loginWin',
Title: '登陸',
width: 250,
height: 150,
closable: false,
collapsible: false,
resizable:false,
defaults: {
border: false
},
buttonAlign: 'center',
buttons: [
{ text: '關(guān)于' },
{ text: '登陸' }
],
layout: 'column',
items:
[
{
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();
});
三 使用心得
1./// <reference path="http://www.dhdzp.com/Resources/ExtJs/vswd-ext_2.0.2.js" />這句為ext自動(dòng)提示功能源文件
2.關(guān)于ext界面布局常用的有border,column,fit這幾種,詳細(xì)用法以后再作介紹
3.關(guān)于ext使用,其實(shí)大部分就是window,panel里面鑲嵌自己需要的內(nèi)容,如formpanel(表單)。
4.要理解{object config},其實(shí)大部分ext配置項(xiàng)都是基于這種形式的,{名稱:值},如按鈕{text:'l登陸'}
5.書寫ext代碼最好規(guī)范化,這樣可以減少出錯(cuò)率。
大概形式:
復(fù)制代碼 代碼如下:
{
id:'',(最好寫上)
配置信息,
(如果是最外層的別忘了寫layout,布局模式)
}
PS:歡迎大家補(bǔ)充,提意思。
您可能感興趣的文章:
相關(guān)文章
Ext修改GridPanel數(shù)據(jù)和字體顏色、css屬性等
這篇文章主要介紹了Ext修改GridPanel數(shù)據(jù)和字體顏色、css屬性等,需要的朋友可以參考下2014-06-06
ExtJS 2.0實(shí)用簡(jiǎn)明教程之應(yīng)用ExtJS
應(yīng)用extjs需要在頁面中引入extjs的樣式及extjs庫文件2009-04-04
Extjs TimeField 顯示正常時(shí)間格式的代碼
由后臺(tái)返回的json的日期時(shí)間格式中,往往都是 類似 "\/Date(1309200300000)\/"的日期時(shí)間格式,結(jié)果導(dǎo)致無法正常在TimeField中顯示2011-06-06
入門基礎(chǔ)學(xué)習(xí) ExtJS筆記(一)
這段時(shí)間手中項(xiàng)目已經(jīng)完成,空閑時(shí)間較多。開始了學(xué)習(xí)ExtJs之旅。2010-11-11
Ext對(duì)基本類型的擴(kuò)展 ext,extjs,format
Ext對(duì)基本類型的擴(kuò)展 ext,extjs,format,學(xué)習(xí)extjs的朋友可以參考下。2010-12-12

