Ext.FormPanel

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

在创建一个 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>

我们来看看效果:

<!--[if !vml]-->Ext.FormPanel
<!--[endif]-->
 

在没有使用 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>

 

 

<!--[if !vml]-->Ext.FormPanel <!--[endif]-->

两个子 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>

 

 

<!--[if !vml]-->Ext.FormPanel <!--[endif]-->

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

不知道大家是否看得明白?看不明白自己再动手改变一下子 div 的宽度和高度,看看效果。 column 工作 方式就是这样的

你可能感兴趣的:(工作,css,浏览器,prototype,ext)