ExtJs2.0学习系列(5)--Ext.FormPanel之第二式

上篇中我们简单的谈到了FormPanel中的fieldset和ComboBox,今天我们继续把这个话题说下去,说全一点,说深一点。

3.可选的fieldset实例

其实就是带个chechbox,有点像论坛注册时有一部分是选填信息的那种效果,主要知识点:

//因为觉得这个参数特别,特举一例以说明
1.checkboxToggle:true//true则呈现一个带checkbox的fieldset,选中则展开,否则相反,默认为false
2.checkboxName:string//当上面为true时,作为checkbox的name,方便表单操作

这里我把js核心代码贴出来(html代码与上一篇中完全相同,不列出):

//在上一节的基础代码的items里面添加如下配置
{
xtype:"fieldset",
checkboxToggle:true,//关键参数,其他和以前的一样
checkboxName:"dfdf",
title:"选填信息",
defaultType:'textfield',
width:330,
autoHeight:true,//使自适应展开排版
items:[{
  fieldLabel:"UserName",
  name:"user",
  anchor:"95%"//330px-labelWidth剩下的宽度的95%,留下5%作为后面提到的验证错误提示
 },
 {
  fieldLabel:"PassWord",
  inputType:"password",//密码文本
  name:"pass",
  anchor:"95%"
 }]
}

4.表单验证实例(空验证,密码确认验证,email验证)

我们可以用单独的js写表单验证,但是extjs已经为我们想到了(自己单独写反而不方便)。

在验证之前,我不得不提两个小知识点:

//大家在很多的extjs代码中都看到了这两个,他们都起提示作用的
Ext.QuickTips.init();//支持tips提示
Ext.form.Field.prototype.msgTarget='side';//提示的方式,枚举值为"qtip","title","under","side",id(元素id)
     //side方式用的较多,右边出现红色感叹号,鼠标上去出现错误提示,其他的我就不介绍了,可自行验证
//大家可以分别去掉这两行代码,看效果就会明白他们的作用,(放在onReady的function(){}中)

1.我们看一个最简单的例子:空验证(其实这不算是一个专门的验证例子)

//空验证的两个参数

1.allowBlank:false//false则不能为空,默认为true

2.blankText:string//当为空时的错误提示信息

js代码为:

var form1 = new Ext.form.FormPanel({       width:350,       frame:true,       renderTo:"form1",       labelWidth:80,       title:"FormPanel",       bodyStyle:"padding:5px 5px 0",       defaults:{width:150,xtype:"textfield",inputType:"password"},       items:[               {fieldLabel:"不能为空",                allowBlank:false,//不允许为空                 blankText:"不能为空,请填写",//错误提示信息,默认为This field is required!                id:"blanktest",                anchor:"90%"               }       ]    });

以上是小编为您精心准备的的内容,在的博客、问答、公众号、人物、课程等栏目也有的相关内容,欢迎继续使用右上角搜索按钮进行搜索验证
, 代码
, extjs代码提示
, 提示
, true
, qtip
, formpanel
, 表单ext
, 表单extjs
, 元素checkbox动态formpanel
fieldset
,以便于您获取更多的相关知识。

时间: 2022-12-01

ExtJs2.0学习系列(5)--Ext.FormPanel之第二式的相关文章

ExtJs2.0学习系列(6)--Ext.FormPanel之第三式(ComboBox篇)

前言:说句实话,此extjs系列的文章在博客园中的热度不高,可能是学这玩意的人不多吧,但是我觉得有这么个系列的文章对于中国朋友非常有帮助!请大家支持! 上篇ExtJs2.0学习系列(5)--Ext.FormPanel之第二式中我们讨论了下fieldset和表单验证的知识,今天我们接着深入解析表单元素中ComboBox组件的使用.会涉及 到.net简单服务器数据交互,但暂不做深入讨论,以后会详细分析服务器交互相关,不过可能要等较长一段时间,呵呵! 5.服务器数据作为ComboBox的数据源实例 首

ExtJs2.0学习系列(7)--Ext.FormPanel之第四式(其他组件示例篇)

N久没有写extjs的,作为一个新手,我为我的这种懒惰行为感到惭愧! 鉴于有朋友反应前面的文章过于简单,我决定以后的文章如果没有闪光点就放在新手区(如果不适合,请跟帖),不放在首页! 11.checkbox简单示例 效果图: js代码: Ext.onReady(function(){ Ext.QuickTips.init(); var myform=new Ext.FormPanel({ frame:true, width:330, layout:"form", labelWidth:

ExtJs2.0学习系列(4)--Ext.FormPanel之第一式

上篇中我们讨论了Ext.window的简单使用,今天我们要看看强大的FormPanel,也是继承panel组件的使用. 首先弄清楚这个问题,创建的时候: //查看源代码便知,两种方法是一样的 Ext.form.FormPanel=Ext.FormPanel; 我们还是从最简单的代码实例开始吧: <!--html代码--> <body> <div id="form1"></div> </body> //js代码 var form

ExtJs2.0学习系列(8)--Ext.FormPanel之第五式(综合篇)

在上篇和前面的介绍中,我们基本上对form表单中常见组件有了简单的认识,今天我们做个综合点的例子,向服务器提交下! 其实这篇文章很简单,没有什么发光点,暂放首页半天,忘各位理解! 先来个简单的例子,以说明formpanel如何把数据传给其他页面. 效果图: 现在我们要实现的效果是:点击确定,把值传到另一页面!,如下: 原页面js代码为: Ext.onReady(function(){ Ext.QuickTips.init(); var form=new Ext.FormPanel({ frame

ExtJs2.0学习系列(10)--Ext.TabPanel之第二式

上一篇种我们简单的了解了下tabpanel 下面我们要介绍的是,如何动态的添加标签页! 2.动态添加tabpanel的标签页 效果图: 点击"添加新标签页",会添加一个标签页,而且激活这个新的标签页. html代码: <body style="margin:10px;"> <div> <a id="AddNewTab" href="javascript:void(0)">添加新标签页<

ExtJs2.0学习系列(13)--Ext.TreePanel之第二式

昨天有朋友说,在IE下有的时候ashx传过来的节点不能加载,其实我也出现这样的问题,很是烦人! 今天extjs上看到了一个解决方案,觉得很好:如果treeLoader加载失败,会继续加载,直到成功加载. 4.解决IE下非正常加载节点问题 即使从服务器取到大量的数据,也没有问题. -- 基本代码一样,只有js代码的loader小小的修改下: loader:new Ext.tree.TreeLoader({ url:"json.ashx", listeners:{ "loadex

ExtJs2.0学习系列(2)--Ext.Panel

上一篇文章ExtJs2.0学习系列(1)--Ext.MessageBox ,受到了大家的褒贬不一,还是有的朋友提出好的建议,在此表示感谢! 今天介绍extjs中的Panel组件. //html代码 <div id="container"> </div> //js代码 var p = new Ext.Panel({ title: 'My Panel',//标题 collapsible:true,//右上角上的那个收缩按钮,设为false则不显示 renderTo:

ExtJs2.0学习系列(12)--Ext.TreePanel之第一式

今天开始,我们就开始一起学习TreePanel了,道个歉,上篇的代码很乱阿. 我总是喜欢用最简单的例子开始,去理解最基本的使用方法,减少对i后面高级使用的干扰! TreePanel是继承自Panel,所以很多在Panel中谈到的属性这里可能会一笔带过,如有问题,请参考ExtJs2.0学习系列(2)--Ext.Panel 1.第一个静态树--最简单的树 效果图: html代码: <div id="container"> </div> js代码: Ext.onRea

ExtJs2.0学习系列(3)--Ext.Window

前面介绍了panel组件--ExtJs2.0学习系列(2)--Ext.Panel,今天将介绍window组件,它继承自panel. 先介绍个最简单例子 //html代码 <div id="win" class="x-hidden"> </div> //js代码 var w=new Ext.Window({ contentEl:"win",//主体显示的html元素,也可以写为el:"win" width