上一篇： 【初学EXT】基础知识
书看的差不多了，那就来练习吧！相信你也知道，练习控件最好的界面莫过于“用户注册”，还等什么，快快动手吧
不考虑布局，只是简单的熟悉常用控件及常用控件对应的属性
友情提示：
1、如果控件不够熟悉，那就照着代码敲，熟能生巧
2、标点符号一定要是英文的
3、有效利用浏览器的错误提示信息，帮助自己纠错吧
4、一定要注意每次最后一个属性后面没有逗号，这个错误影响了我很多次
练习界面如下：
代码：
<!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 : "女",//显示值
// 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>
这个例子将常用的控件都做了基本的展示练习，其中某些属性也许你不是很明白，那就去找api吧，他会清清楚楚的告诉你，再者多尝试修改自然而然就明白了，一个很简单的方式是将不明白的属性注释掉的效果和没有注释掉的效果进行比较也能帮助自己理解