Ext的使用和实用的例子和代码

首先引入资源包文件，分别存放在ext包的目录下....

<!-- 资源包 -->
<link href="ext/resources/css/ext-all.css" rel="stylesheet">
<link href="ext/resources/css/xtheme-gray.css" rel="stylesheet">
<script type="text/javascript" src="ext/adapter/ext/ext-base.js"></script>
<script type="text/javascript" src="ext/ext-all.js"></script>

一个登陆界面的ext代码：

Ext.QuickTips.init();
LoginWindow = Ext.extend(Ext.Window, {
renderTo : 'loginWin',
title : '登录系统',
width : 265,
height : 140,
closable : false,
draggable : true,
resizable : false,
defaults : {
border : false
},
buttonAlign : 'center',

createFormPanel : function() {
return new Ext.form.FormPanel({
bodyStyle : 'padding-top:6px',
defaultType : 'textfield',
labelAlign : 'right',
labelWidth : 55,
labelPad : 0,
frame : true,
defaults : {
allowBlank : false,
width : 158
},
items : [{
cls : 'user',
name : 'userName',
fieldLabel : '帐号',
blankText : '帐号不能为空'
}, {
cls : 'key',
name : 'password',
fieldLabel : '密码',
blankText : '密码不能为空',
inputType : 'password'
}]
});
},
login : function() {
if (this.fp.form.isValid()) {
this.fp.form.submit({
waitTitle : '请稍候',
waitMsg : '正在登录......',
url : 'login.do?actionType=doLogin',
success : function(form, action) {
window.location.href = 'main.jsp';
},
failure : function(form, action) {
form.reset();
Ext.Msg.alert('警告', action.result.msg);
}
});
}
},
initComponent : function() {
LoginWindow.superclass.initComponent.call(this);
this.fp = this.createFormPanel();
this.add(this.fp);
this.addButton('登录', this.login, this);
this.addButton('重置', function() {
this.fp.form.reset();
}, this);
}
});

Ext.onReady(function() {
var win = new LoginWindow();
win.show();
setTimeout(function() {
Ext.get('loading-mask').fadeOut({
remove : true
});
}, 300);
});

一个人信息的表单：

<script type="text/javascript">
Ext.onReady(function() {
var win = new Ext.Window(
{
title : "个人信息",
height : 400,
width : 500,

plain : true,
fram : true,
labelWidth : 60,
labelAlign : "right",
defaults : {
xtype : "textfield"
},
layout : "form",
items : [ {
xtype : "panel",
layout : "column",
baseCls : "x-plain",
style : "padding:5px",
items : [ {
baseCls : "x-plain",
columnWidth : 0.5,
layout : "form",
labelWidth : 55,
labelAlign : "right",
defaultType : "textfield",
defaults : {
width : 170
},
items : [ {
fieldLabel : "姓名"
}, {
fieldLabel : "年龄"
}, {
fieldLabel : "出生日期"
}, {
fieldLabel : "联系电话"
}, {
fieldLabel : "手机号码"
}, {
fieldLabel : "电子邮件"
}, {
fieldLabel : "性别"
} ]

}, {
baseCls : "x-plain",
columnWidth : 0.5,
defaultType : "textfield",
layout : "form",
labelWidth : 55,
items : [ {
id : "pic",
fieldLabel : "个人照片",
width : 170,
height : 180,
inputType : "image"

} ]

} ]

}, {
fieldLabel : "身份证号",
width : 405
}, {
fieldLabel : "具体地址",
width : 405
}, {
fieldLabel : "职位",
width : 205
} ],
listeners : {
"show" : function(win) {
if (win.rendered) {
win.findById("pic").getEl().dom.src = "images/87066271.jpg";
}

}

},
buttons : [ {
text : "确定"

}, {
text : "取消"
} ]

});

win.show();

});