书看的差不多了,那就来练习吧!相信你也知道,练习控件最好的界面莫过于“用户注册”,还等什么,快快动手吧
不考虑布局,只是简单的熟悉常用控件及常用控件对应的属性
友情提示:
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 : "女",//显示值
- // 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>
这个例子将常用的控件都做了基本的展示练习,其中某些属性也许你不是很明白,那就去找api吧,他会清清楚楚的告诉你,再者多尝试修改自然而然就明白了,一个很简单的方式是将不明白的属性注释掉的效果和没有注释掉的效果进行比较也能帮助自己理解
相关文章:
相关推荐
vb各控件练习程序vb各控件练习程序vb各控件练习程序vb各控件练习程序
Html初学练习Html初学练习Html初学练习Html初学练习 Html初学练习Html初学练习Html初学练习Html初学练习 Html初学练习Html初学练习Html初学练习Html初学练习 Html初学练习Html初学练习Html初学练习Html初学练习 Html...
C#基本设置控件练习,适合初学C#人员对控件的了解,训练,提高水平
HTML CSS 初学的练习HTML CSS 初学的练习HTML CSS 初学的练习 HTML CSS 初学的练习HTML CSS 初学的练习HTML CSS 初学的练习 HTML CSS 初学的练习HTML CSS 初学的练习HTML CSS 初学的练习 HTML CSS 初学的练习...
《初学CAD的练习题》题解,相当的牛!!!
java面向对象初学者练习小游戏.zipjava面向对象初学者练习小游戏.zip java面向对象初学者练习小游戏.zipjava面向对象初学者练习小游戏.zip java面向对象初学者练习小游戏.zipjava面向对象初学者练习小游戏.zip java...
适用于matlab初学者的练习题,可根据自身情况挑选练习。
C#部分主要控件练习,都是一个个小应用,对初学者应该很有用
(适合初学者的练习题)是自己班上练习用的,和大家分享一下
VB菜鸟级别初学编写试用
ext初学一些控件介绍以及使用方法. extjs里用的最多的 弹框 表格grid
初学android程序练习源码,简单实用
自己做的一个简单的计算器,可以运行. 可作为初学者简单控件的学习.
文件是一个VB工程,其中包含了多种控件的代码,可以参考练习,很适合初学者的使用
C# .net 初学者必备 练习题 零基础 适合初学者练习
CAD初学者练习题CAD初学者练习题CAD初学者练习题CAD初学者练习题
ext学习资料 ext ext技术资料
新手入门,有ext-base.js ext-all.js ext-all.css。简单的配置,仅适用于初学,没有debug
java基础练习,适合初学者练习使用,练习难度由浅入深,循序渐进