ExtJs中簡單的登錄界面制作方法
更新時間：2010年08月19日 20:30:05 作者：
接觸Ext也有好幾個月了，但是由于時間問題，都沒有好好總結(jié)一下，現(xiàn)在抽空再博客里回顧下Ext使用心得，歡迎各位指點。
一 首先請看圖片
二 登陸界面Ext代碼
/// <reference path="http://http://chabaoo.cn/Resources/ExtJs/vswd-ext_2.0.2.js" />
//加載提示框
Ext.QuickTips.init();
//創(chuàng)建命名空間
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:'<h3><center>后臺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: '登陸賬號',
blankText: '賬號不能為空',
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://chabaoo.cn/Resources/ExtJs/vswd-ext_2.0.2.js" />這句為ext自動提示功能源文件
2.關(guān)于ext界面布局常用的有border,column,fit這幾種，詳細用法以后再作介紹
3.關(guān)于ext使用，其實大部分就是window,panel里面鑲嵌自己需要的內(nèi)容，如formpanel(表單)。
4.要理解{object config},其實大部分ext配置項都是基于這種形式的，{名稱:值},如按鈕{text:'l登陸'}
5.書寫ext代碼最好規(guī)范化,這樣可以減少出錯率。
大概形式：
{
id:'',(最好寫上)
配置信息,
(如果是最外層的別忘了寫layout，布局模式)
}
PS：歡迎大家補充，提意思。
二 登陸界面Ext代碼
復制代碼 代碼如下:
/// <reference path="http://http://chabaoo.cn/Resources/ExtJs/vswd-ext_2.0.2.js" />
//加載提示框
Ext.QuickTips.init();
//創(chuàng)建命名空間
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:'<h3><center>后臺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: '登陸賬號',
blankText: '賬號不能為空',
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://chabaoo.cn/Resources/ExtJs/vswd-ext_2.0.2.js" />這句為ext自動提示功能源文件
2.關(guān)于ext界面布局常用的有border,column,fit這幾種，詳細用法以后再作介紹
3.關(guān)于ext使用，其實大部分就是window,panel里面鑲嵌自己需要的內(nèi)容，如formpanel(表單)。
4.要理解{object config},其實大部分ext配置項都是基于這種形式的，{名稱:值},如按鈕{text:'l登陸'}
5.書寫ext代碼最好規(guī)范化,這樣可以減少出錯率。
大概形式：
復制代碼 代碼如下:
{
id:'',(最好寫上)
配置信息,
(如果是最外層的別忘了寫layout，布局模式)
}
PS：歡迎大家補充，提意思。
您可能感興趣的文章:
相關(guān)文章
ExtJS Window常用方法,需要的朋友可以參考下。2009-10-10
在Ext中直接使用DWR2009-03-03
extjs tabpanel限制選項卡數(shù)量實現(xiàn)思路及代碼
使用的是用變量存儲 id 加載新的選卡時 交換 id ，從而限制了打開的選項卡數(shù)量，如果不是一定要這個效果，建議不要頻繁的關(guān)閉和創(chuàng)建tabpanel，感興趣的朋友可以參考下哈2013-04-04
剛剛參加完公司的項目，第一次使用extjs編寫用戶界面還是有點頭痛，現(xiàn)在小花整理好了，希望為初學者做個參考。2009-12-12
一般定義方式注意方法和函數(shù)的添加方式不同，具體定義步驟如下，感興趣的朋友可以參考下哈，感興趣的朋友可以了解下哈2013-06-06
extjs4 treepanel動態(tài)改變行高度示例
本文為大家介紹下extjs4 treepanel如何動態(tài)改變行高度，下面有個不錯的示例，感興趣的朋友可以參考下2013-12-12
form恐怕是Web開發(fā)中最常用的控件了，Extjs對普通的html form進行了一些封裝，使其具有基本的外觀和一些簡便的和服務(wù)器進行通信的方法。2010-01-01
所謂布局就是指容器組件中子元素的分布、排列組合方式。Ext的所有容器組件都支持而局操作，每一個容器都會有一個對應的布局，布局負責管理容器組件中子元素的排列、組合及渲染方式等。2009-04-04
這幾天做一個Web項目，使用了ExtJs，其中有個像設(shè)計器一樣的界面，選擇界面上的內(nèi)容，可以直接編輯內(nèi)容的屬性，這個原本來說對于使用ExtJs還是很簡單的。2010-03-03
相信很多人對使用js進行客戶端的編程比較頭大，其實現(xiàn)在已經(jīng)有了很多優(yōu)秀的js庫，可以大大簡化js編程的工作量，其中，jquery和extjs就是兩款非常優(yōu)秀的js庫。2009-10-10