Ext.FormPanel

本文介绍Ext2.0中表单(form)的创建方法与控件使用技巧,包括新特性如时间输入控件等,并通过实例演示如何使用formpanel进行布局配置。

摘要生成于 C知道 ,由 DeepSeek-R1 满血版支持, 前往体验 >

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

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

  Ext .QuickTips.init();

  Ext.form.Field.prototype.msgTarget = 'side';

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

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

位置值

描述

qtip

当鼠标移动到控件上面时显示提示

title

在浏览器的标题显示,但是测试结果是和 qtip 一样的

under

在控件的底下显示错误提示

side

在控件右边显示一个错误图标,鼠标指向图标时显示错误提示

[element id]

错误提示显示在指定 idHTML 元件中

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

好了,现在创建我们的 form2.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' );

边的类型设置了内补丁 5pxbodyStyle:'padding:5px' );

总宽度是 600px ;设置了面板的边角是圆弧过度的( frame:true ),

我设置这个属性主要目的不是因为边角,而是因为背景,如果不设置这个,背景颜色将为白色,设置了这个将会加入海蓝色的背景图,好看点;

还设置了 form 控件的标题宽度是 80pxlabelWidth:80 )。还有一些其它的设置选项,我这里就不多说,大家可以参看 2.0API

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

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

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

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

       </div>

然后在里面加入 2div ,每个宽度和高度都是 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]-->
<!--[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]-->
<!--[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]-->
<!--[endif]-->

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

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

内容概要:文章详细介绍了电梯门禁(梯控)系统的硬件安装与接线要点。首先强调了梯控板与楼层按键对接的重要性,包括遵循一一对应原则以避免错层、越层问题,允许空层存在以适应实际需求。接着阐述了不同接线方式(COM、NO、NC端口的不同组合)对用户权限的影响,如单层权限用户刷卡直达指定楼层,多层权限用户在特定接线方式下的操作限制。硬件安装方面,强调了无源干触点设计原则以确保电气隔离,防止系统间干扰,以及读卡器接入时的规范要求。文章还介绍了梯控系统的技术原理,如身份验证机制(二维码/IC卡/人脸识别)、消防联动功能(紧急情况下释放所有楼层权限),并指出该系统适用于小区、写字楼等场景,支持机器人乘梯SDK扩展。最后,根据不同场景需求提出了适用的接线方式选择,如严格管控场景下选择4.3接线以实现精准权限控制,限制多层用户手动选层场景下选择4.1接线并配合软件权限设置。; 适合人群:从事电梯安装维护的技术人员、楼宇自动化工程师及相关领域的管理人员。; 使用场景及目标:①指导技术人员正确安装和接线梯控系统,确保系统安全稳定运行;②帮助管理人员了解不同接线方式对用户权限的影响,以便根据实际需求选择合适的配置方案;③提升楼宇安全管理和服务质量,特别是在小区、写字楼等场所的应用。; 其他说明:梯控系统的正确安装和接线不仅关系到系统的正常运作,更直接影响到用户的安全和使用体验。因此,在实际操作中务必严格按照规范执行,同时关注最新的技术发展和应用场景变化,以确保系统始终处于最佳状态。
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值