Extjs的学习
本来我想将我的这个作品进行详细的讲解，以便大家使用参考，但是现在时间不够，所以，就将整片代码发表吧，如果大家感兴趣或是有什么疑问的，欢迎QQ问我。此次是用extjs做一个前台界面
<%@ Page Language="C#" %>
<html xmlns="http://www.w3.org/1999/xhtml">
<head id="Head1" runat="server">
<title>江农教务管理</title>
<link href="Ext3.0/resources/css/ext-all.css" rel="stylesheet" type="text/css" />
<script src="Ext3.0/adapter/ext/ext-base.js" type="text/javascript"></script>
<script src="Ext3.0/ext-all.js" type="text/javascript"></script>
</head>
<script type="text/javascript">
Ext.onReady(function () {
Ext.BLANK_IMAGE_URL = "Ext3.0/resources/images/default/s.gif";
Ext.QuickTips.init();
Ext.form.Field.prototype.msgTarget = "qtip";
// gridPanel区域
function renderSex(value) {
if (value == 'male') {
return "<span style='color:red;font-weight:bold;'>男</span>";
}
else {
return "<span style='color:green;font-weight:bold;'>女</span>";
}
}
var cm = new Ext.grid.ColumnModel([
new Ext.grid.RowNumberer(),
new Ext.grid.CheckboxSelectionModel(),
{ header: '性别', dataIndex: 'sex', width: 200, sortable: true, renderer: renderSex },
{ header: '姓名', dataIndex: 'name', width: 200, sortable: true },
{ header: '班级', dataIndex: 'class', width: 200, sortable: true },
{ header: '学号', dataIndex: 'id', width: 200, sortable: true },
{ header: '科目编号', dataIndex: 'num', width: 200, sortable: true },
{ header: '时间', dataIndex: 'time', width: 200, sortable: true },
{ header: '缴费状态', dataIndex: 'situation', width: 200, sortable: true }
]);
var data = [['male', '刘达志', '一班', '20122345', '1', '2013-7-20', 'yes'],
['female', '咏梅', '二班', '20122346', '2', '2013-7-21', 'no']];
var ds = new Ext.data.Store({
proxy: new Ext.data.MemoryProxy(data),
reader: new Ext.data.ArrayReader({}, [
{ name: 'sex' },
{ name: 'name' },
{ name: 'class' },
{ name: 'id' },
{ name: 'num' },
{ name: 'time' },
{ name: 'situation' }
])
});
ds.load();
var grid = new Ext.grid.GridPanel({
title: '四六级考试报名系统',
height: 620,
autoWidth: true,
ds: ds,
cm: cm,
bbar: new Ext.PagingToolbar({
pageSize: 10,
store: ds,
displayInfo: true,
displayMsg: '显示第{0}条到第{1}条记录，共{2}条',
emptyMsg: '没有记录'
})
});
// gridPanel结束区域
var loginForm1 = new Ext.FormPanel({
id: "loginForm1",
width: 550,
height: 435,
frame: true,
labelAlign: "right",
monitorValid: true,
items: [
new Ext.form.TextField({
id: "username",
name: "username",
width: 220,
fieldLabel: "用户名",
minLength: 3,
minLengthText: "用户名长度不能小于{0}",
maxLength: 12,
maxLengthText: "用户名长度不能大于{0}",
allowBlank: false,
blankText: "用户名必须输入"
}),
new Ext.form.TextField({
id: "password",
name: "password",
width: 220,
fieldLabel: "密码",
inputType: "password",
allowBlank: false,
blankText: "密码必须输入"
}),
new Ext.form.TextField({
id: "randCode",
name: "randCode",
width: 220,
fieldLabel: "验证码",
allowBlank: false,
blankText: "验证码必须输入"
}),
new Ext.form.TextField({
id: "ID",
name: "ID",
width: 220,
fieldLabel: "学号",
allowBlank: false,
blankText: "学号必须输入"
}),
new Ext.form.TextField({
id: "name",
name: "name",
width: 220,
fieldLabel: "姓名",
allowBlank: false,
blankText: "姓名必须输入"
}),
new Ext.form.TextField({
id: "course",
name: "course",
width: 220,
fieldLabel: "考试科目",
allowBlank: false,
blankText: "考试科目必须输入"
})
]
});
var loginForm2 = new Ext.FormPanel({
id: "loginForm1",
width: 550,
height: 435,
frame: true,
labelAlign: "right",
monitorValid: true,
items: [
new Ext.form.TextField({
id: "username",
name: "username",
width: 220,
fieldLabel: "用户名",
minLength: 3,
minLengthText: "用户名长度不能小于{0}",
maxLength: 12,
maxLengthText: "用户名长度不能大于{0}",
allowBlank: false,
blankText: "用户名必须输入"
}),
new Ext.form.TextField({
id: "password",
name: "password",
width: 220,
fieldLabel: "密码",
inputType: "password",
allowBlank: false,
blankText: "密码必须输入"
}),
new Ext.form.TextField({
id: "randCode",
name: "randCode",
width: 220,
fieldLabel: "验证码",
allowBlank: false,
blankText: "验证码必须输入"
}),
new Ext.form.TextField({
id: "ID",
name: "ID",
width: 220,
fieldLabel: "学号",
allowBlank: false,
blankText: "学号必须输入"
}),
new Ext.form.TextField({
id: "name",
name: "name",
width: 220,
fieldLabel: "姓名",
allowBlank: false,
blankText: "姓名必须输入"
}),
new Ext.form.TextField({
id: "course",
name: "course",
width: 220,
fieldLabel: "考试科目",
allowBlank: false,
blankText: "考试科目必须输入"
})
]
});
var win2 = new Ext.Window({
title: '我要报名，请填写报名列表',
width: 550,
height: 400,
isTopContainer: true,
modal: true,
resizable: false,
border: true,
maximizable: true,
draggable: false,
AutoScroll: true,
buttonAlign: 'left',
items:loginForm1,
buttons: [{
text: '确定',
handler: function () {
alert("你的信息已经提交！！！");
}
},
{ text: '取消',
handler: function () {
alert("你已经取消，请从新填写！！！");
}
}]
});
var win3 = new Ext.Window({
title: '我要取消报名，请填写取消列表',
width: 550,
height: 400,
isTopContainer: true,
modal: true,
resizable: false,
border: true,
maximizable: true,
draggable: false,
AutoScroll: true,
buttonAlign: 'left',
items: loginForm2,
buttons: [{
text: '确定',
handler: function () {
alert("你的信息已经提交！！！");
}
},
{ text: '取消',
handler: function () {
alert("你已经取消，请从新填写！！！");
}
}]
});
var win = new Ext.Window({
title: '四六级报名',
width: 1350,
height: 635,
isTopContainer: true,
modal: true,
resizable: false,
border: true,
maximizable: true,
draggable: false,
AutoScroll: true,
buttonAlign: 'left',
items: grid,
buttons: [{
text: '我要报名',
handler: function () {
win2.show();
}
},
{ text: '取消预约',
handler: function () {
win3.show();
}
}]
})
win.show();
});
</script>
<body>
</body>
</html>
扫一扫
534
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
