关于手机病毒....

Ext2.0
的
form
不单增加了时间输入控件、隐藏输入控件，还修改了创建方法，通过
formpanel
代替了原来
form
，
column
也根据新的布局定义更新了定义方式。总体来说，定义一个
form
更简单便捷了。本文将通过一个实例介绍一下
2.0
的
form
的创建以及其大部分控件的使用方法，因水平有限，错漏难免，忘大家多多谅解！

我们先来看看我们将要设计的
form
的情况：

 呵呵，
form
有点杂乱，不过在这个
fomr
里包含了绝大部分
Ext2.0
的控件，我将会和大家一起探讨一下这些控件的使用。

在创建一个
form
之前，我们先增加以下语句：

Ext.QuickTips.init();    Ext.form.Field.prototype.msgTarget = 'side';

 第一句的目的是为需要的元件提供提示信息功能，
form
的主要提示信息就是客户端验证的错误信息了。

第二句的目的就是设置控件的错误信息显示位置，主要可选的位置有：

位置值	描述
qtip	当鼠标移动到控件上面时显示提示
title	在浏览器的标题显示，但是测试结果是和 qtip一样的
under	在控件的底下显示错误提示
side	在控件右边显示一个错误图标，鼠标指向图标时显示错误提示
[element id]	错误提示显示在指定 id 的 HTML 元件中

这个大家可以根据各人喜好设置，我习惯使用“
side
”，这里有一点要注意的，就是注意控制控件的宽度，以防不够宽度显示错误图标，这个下面会说到。

好了，现在创建我们的
form
，
2.0
的方法就是直接创建一个
formpanel
：

var simpleForm = new Ext.FormPanel({    labelAlign: 'left',    title: ' 表单例子 ',    buttonAlign:'right',    bodyStyle:'padding:5px',    width: 600,    frame:true,    labelWidth:80, items: [], buttons: [] }); simpleForm.render(document.body);

 在
formpanle
里，我们定义了
form
控件的标题是在左边的（
labelAlign: 'left'
）；
form
的标题栏显示标题“表单的例子”；它的按钮位置是在右对齐的（
buttonAlign:'right'
）；边的类型设置了内补丁
5px
（
bodyStyle:'padding:5px'
）；总宽度是
600px
；设置了面板的边角是圆弧过度的（
frame:true
），我设置这个属性主要目的不是因为边角，而是因为背景，如果不设置这个，背景颜色将为白色，设置了这个将会加入海蓝色的背景图，好看点；还设置了
form
控件的标题宽度是
80px
（
labelWidth:80
）。还有一些其它的设置选项，我这里就不多说，大家可以参看
2.0
的
API
。

items
数组的设置是我们的重点了，
form
上的所有控件都是在这里设置的。

从
form
的结构图中看到，
form
整体上是分了两列的（实际上不是的，呵呵）。因为要分列，所以要使用
columnLayout
类。在使用
columnLayout
类之前，我们需要了解一下
CSS
中
float
属性的作用，改属性主要作用是设置对象是否及如何浮动，属性值为
none
、
left
和
right
三个。
column
设置是
left
，意思就是对象浮在左边的。那这个有什么作用呢？其实这个和我们在
word
中输入文字，默认文字是左对齐的，当一行文字的宽度超过页面的宽度时将自动换行是一样的。
我们通过一个例子来说明一下。

首先我们定义一个
div
，背景色是黑色，宽度和高度都是
200
：

<div style='background:black;width:200px;height:200px;'>       </div>

 然后在里面加入
2
个
div
，每个宽度和高度都是
200
，背景色一个是红色，一个是绿色：

<div style='background:black;width:200px;height:200px;'>              <div style='background:red;width:50px;height:50px;'></div>              <div style='background:green;width:50px;height:50px;'></div>       </div>

我们来看看效果：

 在没有使用
float
之前，两个子
div
是分别各占一行的。好，现在我们在两个子
div
中加入“
float:left
”在看看效果：

<div style='background:black;width:200px;height:200px;'>              <div style='background:red;width:50px;height:50px;float:left;'></div>              <div style='background:green;width:50px;height:50px;float:left;'></div>       </div>

  两个子
div
出现在同一行了。我们复制一下两个子
div
，粘贴两次，然后看看效果：

<div style='background:black;width:200px;height:200px;'>              <div style='background:red;width:50px;height:50px;float:left;'></div>              <div style='background:green;width:50px;height:50px;float:left;'></div>              <div style='background:red;width:50px;height:50px;float:left;'></div>              <div style='background:green;width:50px;height:50px;float:left;'></div>              <div style='background:red;width:50px;height:50px;float:left;'></div>              <div style='background:green;width:50px;height:50px;float:left;'></div>       </div>

  6
个子
div
有序的按左对齐方式排列在一起了，当一行的子
div
的宽度超过了父
div
的宽度时，子
div
自动换行到了第二行。

不知道大家是否看得明白？看不明白自己再动手改变一下子
div
的宽度和高度，看看效果。
column
的工作方式就是这样的。明白这个很重要，因为在定义
checkbox
和
radio
的时候，如果想它们的选项在同一行，就要注意
column
的宽度，不然就无法让他们在同一行。不过现在
column
是通过百分比来定义宽度的，我们只要控制好百分比就行了。

好了，我们继续写
form
，因为要用到
column
，所以我们先在
formpanel
的
itmes
加入一个
column
的定义：

{ layout:'column',        border:false,        labelSeparator:' ： ',        items:[] }

 代码里定义了在这里使用的是
columnlayout
（
layout:'column'
）；没有边（
border:false
）；标题的分隔符号我们用中文冒号代替英文的冒号（
labelSeparator:'
：
'
）。
coulmnLayout
里的控件将定义在
items
里。

我们首先在
items
里加入一个常用输入控件，是用来输入姓名的：

{            columnWidth:.5,            layout: 'form',            border:false,            items: [{                xtype:'textfield',                fieldLabel: ' 姓名 ',                name: 'name',                anchor:'90%'            }]        }

 我们设置了该列的宽度占总宽度的
50%
（
columnWidth:.5
）；在布局里放了一个
formlayout
用来放置控件（
layout: 'form'
）；
formlayout
也是没有边的（
border:false
）。在
formlayout
里有一个类型为
textfield'
（
xtype:'textfield'
）的输入控件。控件标题为姓名（
fieldLabel: '
姓名
'
），输入框（
input
）的
name
属性设置“
name
”（
name: 'name'
），输入框的长度为列宽减去标题的宽度后的
90%
（
anchor:'90%'
），余下的
10%
的是给显示错误信息图标用的。

在加入性别的
radio
控件时就要注意了，这里需要加入两个
radio
，第一
radio
是有标题的，第二是没有的，而且两个
radio
加起来的宽度应该正好是余下的列宽（
50%
）：

{            columnWidth:.25,            layout: 'form',            border:false,            items: [{                     style:'margin-top:5px',                xtype:'radio',                fieldLabel: ' 性别 ',                boxLabel:' 男 ',                name: 'sex',                checked:true,                inputValue:' 男 ',                anchor:'95%'            }]        },{            columnWidth:.25,            layout: 'form',            labelWidth:0,            labelSeparator:'',            hideLabels:true,            border:false,            items: [{                     style:'margin-top:5px',                xtype:'radio',                fieldLabel: '',                boxLabel:' 女 ',                name: 'sex',                inputValue:' 女 ',                anchor:'95%'            }]        }

 从代码中可以看到，除了列宽设置为
25%
外，其它的列设置和第一控件是一样。
Formlayout
里加入了一个类型为
radio
的控件。控件的标题是性别，控件的选择显示文本是男（
boxLabel:'
男），
input
的
name
属性值是
sex
（
name: 'sex'
），该控件默认是已选的（
checked:true
），控件的值（
value
）是男（
inputValue:'
男
'
），
input
的宽度是
95%
。在这里我还设置一个
css
属性，顶部的外补丁为
5px
（
style:'margin-top:5px'
），原因是为了选择按钮和标题对齐，大家可以将该属性去掉然后看看效果。

第二个
raido
控件的列设置就有所不同，因为它不需要标题，所以要设置隐藏标题（
hideLabels:true
），标题的宽度设置为
0
（
labelWidth:0
）
,
还要设置其标题分隔符号为空（
labelSeparator:''
）。其余的设置和第一个
radio
的设置没有不同，只是
input
的值不同了。

我们已经设置了
3
列，
3
列的列宽分别为
50%
、
25%
、
25%
，根据
float
的原则，下一列将从第二行开始。

在第二行第一列我们要增加的是一个日期选择控件：

{            columnWidth:.5,            layout: 'form',            border:false,            items: [{                xtype:'datefield',                fieldLabel: ' 出生日期 ',                name: 'birthday',                anchor:'90%'            }]      }

 日期控件的列宽也是
50%
，列的其它设置没有变化。控件的类型为
datefield
，标题是出生日期，
input
的
name
属性是
birthday
，
intput
宽度也是设置了
90%
，出来留出空位给错误信息外，还可以让控件与上一行的姓名的宽度相同，整列看起来比较整齐。

日期控件的设置和普通文本输入的设置一样简单，这里就不多说了。不过要说到的是汉化的问题。在
2.0
版自带的本地化文件
ext-lang-zh.js
中存在一些小
bug
，我们需要自己修改一下。

首先要修改的是周的显示，原来的定义是：

Date.dayNames = [   " 周日 ",   " 周一 ",   " 周二 ",   " 周三 ",   " 周四 ",   " 周五 ",   " 周六 " ];

 因为在日期选择中显示的区域不够宽，只能显示一个汉字，所以需要将上面定义的把“周”去掉，修改为：

Date.dayNames = [   " 日 ",   " 一 ",   " 二 ",   " 三 ",   " 四 ",   " 五 ",   " 六 " ];

 在年份和月份选择中的按钮文字还是英文“
ok
”和“
cancel
”的，这里我们也需要修改一下：

if(Ext.DatePicker){   Ext.apply(Ext.DatePicker.prototype, {      todayText        : " 今天 ",      minText          : " 日期在最小日期之前 ",      maxText          : " 日期在最大日期之后 ",      disabledDaysText : "",      disabledDatesText : "",      monthNames     : Date.monthNames,      dayNames         : Date.dayNames,          nextText         : ' 下月 (Control+Right)',      prevText         : ' 上月 (Control+Left)',      monthYearText    : ' 选择一个月 (Control+Up/Down 来改变年 )',      todayTip         : "{0} (Spacebar)",      okText           : " 确定 ",      cancelText       : " 取消 ",      format           : "y 年 m 月 d 日 "   }); }

 上面定义中黑色字体部分就是要加入的代码。如果不喜欢默认格式是“
y
年
m
月
d
日”，需要修改：

if(Ext.form.DateField){   Ext.apply(Ext.form.DateField.prototype, {      disabledDaysText : " 禁用 ",      disabledDatesText : " 禁用 ",      minText          : " 该输入项的日期必须在 {0} 之后 ",      maxText          : " 该输入项的日期必须在 {0} 之前 ",      invalidText      : "{0} 是无效的日期 - 必须符合格式： {1}",      format           : "Y-m-d"   }); }

 修改
DatePicker
不会改变
DateField
的格式的，这个自己根据情况决定，呵呵。

我们继续，现在需要加入一个学历的下拉选择控件。下来选择控件最重要的一个定义就是数据的定义的，数据定义错误，可能得不到我们需要的效果，也是很多朋友感觉最麻烦的地方。

{            columnWidth:.5,            layout: 'form',            border:false,            items: [{                xtype:'combo',                                                        store: new Ext.data.SimpleStore(                                        {                                          fields: ["retrunValue", "displayText"],                                          data: [[1,' 小学 '],[2,' 初中 '],[3,' 高中 '],[4,' 中专 '],[5,' 大专 '],[6,' 大学 ']]                                        }),                                        valueField :"retrunValue",                                        displayField: "displayText",                                        mode: 'local',                                        forceSelection: true,                                        blankText:' 请选择学历 ',                                        emptyText:' 选择学历 ',                                       hiddenName:'education',                                        editable: false,                                                        triggerAction: 'all',                                                        allowBlank:false,                fieldLabel: ' 学历 ',                name: 'education',                anchor:'90%'            }]      }

 列的定义就不说了，没变化。在
items
里，类型设置成
combo
了，在这里定义了一个
sotre
属性，就是选择值存储的地方，因为是在客户端的数据，所以使用了一个简单存储（
SimpleStore
）。在存储里，我们通过一个数组定义了
retrunValue
和
displayText
两个字段。
retrunValue
字段指定是提交给后台的值，
displayText
字段指定是在下拉中显示的选择值。然后我们在
data
里定义了几组数据（
data: [[1,'
小学
'],[2,'
初中
'],[3,'
高中
'],[4,'
中专
'],[5,'
大专
'],[3,'
大学
']]
），我们可以看到，每组数据都是根据
fiedls
的定义来组成的，数组里第一个值就是
retrunValue
的值，第二个值就是
displayText
的值，例如
[1,'
小学
']
，就表示
retrunValue
是
1
，
displayText
是小学。

下面就是很重要的一步了，设置下拉选择框的值和显示文本。本例中设置了下拉选择框的提交值对象的是存储中的
retrunValue
字段（
valueField :"retrunValue"
），显示文本是存储中的
displayText
字段（
displayField: "displayText"
），通过这两个设置就可将存储中的数据和下拉框对应起来。

因为数据是在本地，所以设置了模式为
local
（
mode: 'local'
）。该下拉列表只允许选择，不允许输入（
editable: false
），而且是必须选择一个选项（
forceSelection: true
）。在没有选择值时显示为选择学历（
emptyText:'
选择学历
'
）。提交
form
时，该项如果没有选择，则提示错误信息“请选择学历”（
blankText:'
请选择学历
'
）。该选项值不允许为空（
allowBlank:false
）。大家要注意的是

hiddenName

和
name

属性，
name

只是改下拉的名称，作用是可通过，而
hiddenName

才是提交到后台的
input

的
name

。如果没有设置
hiddenName

，在后台是接收不到结构的，这个大家一定要注意。


因为这个下拉是只能选择的，所以一定要设置属性
triggerAction
为
all
，不然当你选择了某个选项后，你的下拉将只会出现匹配选项值文本的选择项，其它选择项是不会再显示了，这样你就不能更改其它选项了。

如果要为控件设置默认值，就设置属性
value
，
value
的值要设置为提交给后台的值，不要设置为显示文本。例如本例要设置大学为默认值得，则设置
value
的值为
6
。

现在到第三行了，我们要创建一个
checkbox
选项输入：

{            columnWidth:.35,            layout: 'form',            border:false,            items: [{                xtype:'checkbox',                fieldLabel: ' 权限组 ',                boxLabel:' 系统管理员 ',                name: 'popedom',                inputValue:'1',                anchor:'95%'            }]      },{            columnWidth:.2,            layout: 'form',            labelWidth:0,            labelSeparator:'',            hideLabels:true,            border:false,            items: [{                xtype:'checkbox',                fieldLabel: '',                boxLabel:' 管理员 ',                name: 'pepedom',                inputValue:'2',                anchor:'95%'            }]        },{            columnWidth:.2,            layout: 'form',            labelWidth:0,            labelSeparator:'',            hideLabels:true,            border:false,            items: [{                xtype:'checkbox',                fieldLabel: '',                boxLabel:' 普通用户 ',                name: 'pepedom',                inputValue:'3',                anchor:'95%'            }]        },{            columnWidth:.25,            layout: 'form',            labelWidth:0,            labelSeparator:'',            hideLabels:true,            border:false,            items: [{                xtype:'checkbox',                fieldLabel: '',                boxLabel:' 访客 ',                name: 'pepedom',                inputValue:'4',                anchor:'95%'            }]        }

 checkbox
的设置和
radio
的设置大同小异，大家注意列宽的定义就行。

第四行的两个输入框主要是测试通过
vtypes
属性来验证输入框的输入的：

{            columnWidth:.5,            layout: 'form',            border:false,            items: [{                xtype:'textfield',                fieldLabel: ' 电子邮件 ',                name: 'email',                vtype:'email',                allowBlank:false,                anchor:'90%'            }]        },{            columnWidth:.5,            layout: 'form',            border:false,            items: [{ E 内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理 标签：  相关文章推荐 关于智能手机病毒情况的邮件对话 关于手机插入外置SD卡不能卸载内置SD卡文件 关于“Autorun.inf 病毒”用的原理及其预防 关于Android应用无法安装到手机问题 关于大神note3手机数据备份 Android 关于手机基本信息的获得 关于NSA病毒的启示：由硬件到软件的自主化和基于安全的特殊订制化会不会是一个必然趋势？ Android 如何在关于手机界面添加个图片 Android开发中关于小米2s手机的调试问题 关于手机的基站 关于魅族手机html5与mui+HBuilder的链接 关于病毒修改注册表导致电脑重复重启 关于部分手机app安装失败或安装未成功的原因 关于电脑连接手机MODEM安全上网设置详解 关于手机的SIM卡 关于安卓手机存储器 关于“手机拍照识别二维码”WM版运行中的小问题及解决～ 【Android病毒分析报告】- 手机支付毒王“银行悍匪”的前世今生 “熊猫烧香”假慈悲,关于手工清楚熊猫病毒及如何预防! 新的分享 一次教科书级别的Redis高可用架构设计实践 - Redis 曾光：北京这次的毒株不像国内流行类型 从PRD文档到产品上线，有哪些问题需要解决？ vue3自定义指令的使用 Oracle SQL性能优化最常用的40条建议 - ORACLE 程序员翻车常见反应，你中枪了吗？ - 职场生涯 新鲜开源：基于Prometheus的企业监控平台设计与实现 - 运维 嵌入式软件开发之程序架构设计-任务调度 【Java面试】请简单说一下你对受检异常和非受检异常的理解 奇安信更新招股书：第一季亏损过5亿，齐向东持股38% 艾瑞咨询：2020年中国后智能厨房案例研究报告 艾瑞咨询：2020年中国人工智能+物流发展研究报告 章节导航 添加评论 分享网址 分享文章 返回顶部