书看的差不多了,那就来练习吧!相信你也知道,练习控件最好的界面莫过于“用户注册”,还等什么,快快动手吧
不考虑布局,只是简单的熟悉常用控件及常用控件对应的属性
友情提示:
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中,控件是构建用户界面(UI)的基本元素,如按钮、文本框、标签、复选框等,它们在程序中扮演着...
Html初学练习Html初学练习Html初学练习Html初学练习 Html初学练习Html初学练习Html初学练习Html初学练习 Html初学练习Html初学练习Html初学练习Html初学练习 Html初学练习Html初学练习Html初学练习Html初学练习 Html...
通过这个视频教程,初学者不仅可以掌握EXT Grid的基本用法,还能深入理解EXT控件的内部工作原理,以及如何处理服务器与客户端的数据交互。同时,实践源代码的分析和调试将有助于加深理论知识的理解,提升实际开发...
"C#基本设置控件练习"是针对初学者设计的一系列实践任务,旨在帮助他们熟悉并掌握C#中常用控件的用法。通过这样的练习,开发者可以学习如何创建、配置和管理各种控件,提升自己的编程技能。 1. **控件种类**: C#...
HTML CSS 初学的练习HTML CSS 初学的练习HTML CSS 初学的练习 HTML CSS 初学的练习HTML CSS 初学的练习HTML CSS 初学的练习 HTML CSS 初学的练习HTML CSS 初学的练习HTML CSS 初学的练习 HTML CSS 初学的练习...
这个“初学者VB练习”集合很可能是为了帮助新手熟悉VB的基本概念、语法和编程实践。让我们详细了解一下VB的基础知识以及如何通过练习来提升技能。 1. **VB基础概念**: - **事件驱动编程**:VB的核心是事件驱动...
《初学CAD的练习题》题解,相当的牛!!!
java面向对象初学者练习小游戏.zipjava面向对象初学者练习小游戏.zip java面向对象初学者练习小游戏.zipjava面向对象初学者练习小游戏.zip java面向对象初学者练习小游戏.zipjava面向对象初学者练习小游戏.zip java...
【VC简单计算器——初学者的控件练习】 在编程领域,尤其是Windows应用程序开发中,Visual C++(简称VC)是一个广泛使用的工具,尤其适合创建桌面应用程序。本项目“vc简单计算器”是一个很好的学习实例,适合那些...
适用于matlab初学者的练习题,可根据自身情况挑选练习。
控件的学习对于任何C#开发者来说都至关重要,无论是初学者还是经验丰富的程序员。下面将深入探讨C#控件及其相关知识,以便更好地理解和运用。 1. 基本控件类型: - Label:用于显示文本信息,不可编辑。 - ...
本题集专为C#初学者设计,包含60道精选练习题,旨在帮助初学者巩固基础知识,提升编程技能。以下是这些经典练习题涵盖的一些关键知识点: 1. **基础语法**:了解C#的基本数据类型(如int, double, bool等)、变量...
本练习集旨在帮助初学者熟悉并熟练掌握C#中的主要控件及其使用方法。通过一系列的小应用,你可以深入理解每个控件的功能、属性、事件以及如何在实际项目中应用它们。 1. **文本框(TextBox)**:TextBox控件用于...
"C#初学控件不错看看吧"这个标题暗示了我们即将探讨的是面向初学者的C#控件使用教程。描述中的“自己用的,还不错,看看吧!”表明这可能是一个个人实践项目,作者鼓励大家学习并提出建议。 首先,我们要关注的是" ...
"C#常用控件经典练习项目源程序"是一个极好的学习资源,尤其适合初学者和对编程有热情的人。这个项目将C#中的多种常用控件集成为一个项目,让你能够一次性了解和实践各种控件的用法。 首先,我们要提到窗体(Form)...
3. **VCL控件**:VCL库提供了大量预定义的控件,如按钮(TButton)、文本框(TTextBox)、标签( TLabel)、列表框(TListBox)等,初学者需要学习如何在表单上放置这些控件,调整它们的属性,并理解它们的事件。...
对于初学者来说,掌握如何使用日期控件是提高电子表格技能的重要一步。以下是对"excel日期控件使用练习"的详细讲解。 1. **插入日期控件**: 在Excel中,日期控件通常以"日期选择器"的形式出现,属于"开发工具...