【初学EXT】控件练习

最新推荐文章于 2016-07-20 10:59:30 发布

雪馨

最新推荐文章于 2016-07-20 10:59:30 发布

阅读量143

点赞数

分类专栏： EXT 文章标签： ext 控件用户注册

EXT 专栏收录该内容

3 篇文章 0 订阅

订阅专栏

书看的差不多了，那就来练习吧！相信你也知道，练习控件最好的界面莫过于“用户注册”，还等什么，快快动手吧

不考虑布局，只是简单的熟悉常用控件及常用控件对应的属性

友情提示：
1、如果控件不够熟悉，那就照着代码敲，熟能生巧
2、标点符号一定要是英文的
3、有效利用浏览器的错误提示信息，帮助自己纠错吧
4、一定要注意每次最后一个属性后面没有逗号，这个错误影响了我很多次

练习界面如下：

代码：

[html] view plain copy print ?

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>Hello World</title>
<link rel="stylesheet" type="text/css"
href="EXT/resources/css/ext-all.css" />
<script type="text/javascript" src="EXT/ext-base.js"></script>
<script type="text/javascript" src="EXT/ext-all.js"></script>
<script type="text/javascript" src="EXT/ext-lang-zh_CN.js"></script>
<script type="text/javascript">
Ext.onReady(function() {//页面初始化代码
var txtName = new Ext.form.TextField({
nme : "txtName",
fieldLabel : "姓名",
width : 200
});
var txtpassWord = new Ext.form.TextField({
name : "txtpassWord",
fieldLabel : "密码",
inputType : "password",
width : 200
});
var rdaSexMan = new Ext.form.Radio({
name : "rdaSex",
inputValue : "男",//实际值
boxLabel : "男",//显示值
checked : true
//是否默认
});
var rdaSexWomen = new Ext.form.Radio({
name : "rdaSex",
inputValue : "女",//实际值
boxLabel : "女",//显示值
// width:150
});
var grpSex = new Ext.form.RadioGroup({
name : "sex",
fieldLabel : "性别",
items : [ rdaSexMan, rdaSexWomen ],
width : 100
});
var dateBrithday = new Ext.form.DateField({
name : "birthday",
fieldLabel : "出生日期",
format : "Y-m-d",//指定日期格式，Y表示四位数年，m表示月，d表示日
value : new Date()
//默认当前日期
});
var chkhobby1 = new Ext.form.Checkbox({
name : "chkHobby",
inputValue : "钓鱼",
boxLabel : "钓鱼",
checked : true
});
var chkhobby2 = new Ext.form.Checkbox({
name : "chkHobby",
inputValue : "聚会",
boxLabel : "聚会"
});
var chkhobby3 = new Ext.form.Checkbox({
name : "chkHobby",
inputValue : "游泳",
boxLabel : "游泳"
});
var chkhobby4 = new Ext.form.Checkbox({
name : "chkHobby",
inputValue : "打球",
boxLabel : "打球"
});
var grpGobby = new Ext.form.CheckboxGroup({
name : "hobby",
fieldLabel : "您的爱好",
items : [ chkhobby1, chkhobby2, chkhobby3, chkhobby4 ],
width : 300
});
var data = [ [ 1, "博士" ], [ 2, "研究生" ], [ 3, "大学本科" ], [ 4, "专科" ],
[ 5, "高中" ], [ 6, "其他" ] ];
var proxy = new Ext.data.MemoryProxy(data);
var edu = Ext.data.Record.create([ {
name : "eid",
type : "int",
mapping : 0
}, {
name : "ename",
type : "string",
mapping : 1
} ]);
var reader = new Ext.data.ArrayReader({}, edu);
var store = new Ext.data.Store({
proxy : proxy,
reader : reader
});
store.load();
var chkEdu = new Ext.form.ComboBox({
name : "chkEdu",
fieldLabel : "最高学历",
store : store,
mode : "local",
triggerAction : "all",
emptyText : "请选择最高学历",
displayField : "ename",
valueField : "eid",
value : 3
//缺省值
});
var numLove = new Ext.form.NumberField({
name : "numLove",
fieldLabel : "最喜欢的数字"
});
var areaAddress = new Ext.form.TextArea({
name : "areaAddress",
fieldLabel : "家庭住址",
width : 500,
height : 50
});
var timeWork = new Ext.form.TimeField({
name : "timeWork",
fieldLabel : "上班时间",
increment : 30,
format : "H:i"
});
var htmlIntro = new Ext.form.HtmlEditor({
name : "htmlIntro",
fieldLabel : "个人简介",
enablelist : false,
enableSourceEdit : false,
height : 150
});
var txtPhoto = new Ext.form.TextField({
name : "txtPhoto",
inputType : "file",
fieldLabel : "照片",
width : 500
});
var btnSubmit = new Ext.Button({
text : "提交"
});
var btnReset = new Ext.Button({
text : "重置",
handler : function() {
f.getForm().reset();
}
});
var f = new Ext.form.FormPanel(
{
// url : "/FormServlet",
method : "post",
renderTo : "a",
title : "新增用户",
stytle : "padding:10px",
frame : true,
labelAlign : "right",
width : 650,
autoHeight : true,
items : [ txtName, txtpassWord, grpSex, dateBrithday,
grpGobby, chkEdu, numLove, areaAddress, timeWork,
htmlIntro, txtPhoto ],
buttons : [ btnSubmit, btnReset ]
});
});
</script>
</head>
<body>
<div id="a"></div>
</body>
</html>