7. ExtJS.form中msgTarget
Ext.onReady(function(){
Ext.BLANK_IMAGE_URL="resources/images/default/s.gif";
Ext.QuickTips.init();// 初始化显示提示信息。没有它提示信息出不来。
var form = new Ext.form.FormPanel({
title:"提示信息(side)",
height:200,
width:300,
frame:true,
labelSeparator:":",
labelWidth:60,
labelAlign:"right",
items:[
new Ext.form.TextField({
fieldLabel : "姓名",
allowBlank:false,
blankText:"请输入名字",
msgTarget:"qtip" //修改这里的值msgTarget:"title" msgTarget:"under" msgTarget:"side"
}),
new Ext.form.NumberField({
fieldLabel:"年龄",
allowBlank:false,
blankText:"请写年龄",
msgTarget:"qtip"
})
]
});
new Ext.Viewport({
title:"",
items:[form]
});
});
如图:
使用under时要注意表单的高度,高度不够的话就会出现以下情况:
图
使用side是要注意表单的宽度,宽度不够就会出现以下情况:
图
在每个字段上加提示方式很烦琐,
只要在Ext.QuickTips.init();下加一行Ext.form.Field.prototype.msgTarget = "under";//title,qtip,side
就可以实现统一的提示方式了。
***********************************************************
※Ext.form.TextField※
Ext.onReady(function(){
Ext.QuickTips.init();
Ext.form.Field.prototype.msgTarget="side";
var form = new Ext.form.FormPanel({
title:"Ext.form.FormPanel例子",
labelSeparator:":",
labelWidth:60,
bodyStyle:"padding:5 5 5 5",
frame:true,
height:120,
width:250,
items:[
new Ext.form.TextField({
fieldLabel:"用户名",
id:"userName",
selectOnFocus:true, //得到焦点时自动选择文本
allowBlank:false,
regex:/^([\w]+)(.[\w]+)*@([\w-]+\.){1,5}([A-Za-z]){2,4}$/,
regexText:"用户名格式错误"
}),
new Ext.form.TextField({
fieldLabel:"密码",
inputType:"password",
allowBlank:false
})
]
});
new Ext.Viewport({
title:"",
items:[form]
});
});
这里验证用户名必须是email格式的。先验证是否为空,然后在验证格式。
***********************************************************
※Ext.form.TextArea※
Ext.onReady(function(){
Ext.QuickTips.init();
var form = new Ext.form.FormPanel({
title:"Ext.form.TextArea例子",
labelSeparator:":",
labelWidth:60,
bodyStyle:"padding:5 5 5 5",
frame:true,
height:150,
width:250,
items:[
new Ext.form.TextArea({
id:"memo",
width:150,
fieldLabel:"备注"
})
],
buttons:[{text:"确定",handler:showValue}]
});
function showValue(){
var memo = form.findById("memo"); //获得输入控件
alert(memo.getValue()); //取得空间值
};
new Ext.Viewport({
title:"",
items:[form]
});
});
***********************************************************
※Ext.form.NumberField※
Ext.onReady(function(){
Ext.QuickTips.init();
Ext.form.Field.prototype.msgTarget="side";
var form = new Ext.form.FormPanel({
title:"Ext.form.NumberField例子",
labelSeparator:":",
labelWidth:60,
bodyStyle:"padding:5 5 5 5",
frame:true,
height:150,
width:250,
items:[
new Ext.form.NumberField({
fieldLabel:"整数",
allowDecimals:false, //不允许输入小数
nanText:"请输入有效数字", //无效数字提示
allowNegative:false //不允许输入负数
}),
new Ext.form.NumberField({
fieldLabel:"小数",
decimalPrecision:2, //精确到小数点后2位
allowDecimals:true,
nanText:"请输入有效数字",
allowNegative:false
}),
new Ext.form.NumberField({
fieldLabel:"数字限制",
baseChars:"12345" // 输入数字范围
}),
new Ext.form.NumberField({
fieldLabel:"数值限制",
maxValue:100, //最大值
minValue:50 //最小值
})
]
});
new Ext.Viewport({
title:"",
items:[form]
});
});
decimalPrecision会四舍五入。当小数保留2位时,14.23545,焦点离开后会变成 14.24
7. ExtJS.form中msgTarget的更多相关文章
- Extjs Form用法详解(适用于Extjs5)
Extjs Form是一个比较常用的控件,主要用来显示和编辑数据的,今天这篇文章将介绍Extjs Form控件的详细用法,包括创建Form.添加子项.加载和更新数据.验证等. 本文的示例代码适用于Ex ...
- 实用ExtJS教程100例-011:ExtJS Form 使用JSON数据赋值和取值
上一节中我们演示了ExtJS Form的异步加载和提交数据,本节中我们将演示如何使用JSON数据为ExtJS Form中的字段赋值和取值. 系列ExtJS教程持续更新中,点击查看>>最新E ...
- ExtJS入门教程03,form中怎能没有validation
接上篇内容,我们在学会extjs form的基本用法之后,今天我们来看看extjs form的validation功能. 必填项,就是不能为空(allowBlank) 效果: 代码: { xtype: ...
- ExtJs 4 中的MVC应用架构
一.ExtJs 4.x MVC模式的原理与作用 大规模客户端应用通常不好实现不好组织也不好维护,因为功能和人力的不断增加,这些应用的规模很快就会超出掌控能力,ExtJS4带来了一个新的应用架构,不但可 ...
- extjs form 取值 赋值 重置
一.从form中获取field的三个方法: 1.Ext.getCmp('id'); 2.FormPanel.getForm().findField('id/name'); 3.Ext.get('id/ ...
- Extjs form 组件
1.根类 Ext.form.Basic 提供了,表单组件,字段管理,数据验证,表单提交,数据加载的功能 2.表单的容器 Ext.form.Panel 容器自动关联 Ext.form.Basic 的实例 ...
- 实用ExtJS教程100例-010:ExtJS Form异步加载和提交数据
ExtJS Form 为我们提供了两个方法:load 和 submit,分别用来加载和提交数据,这两个方法都是异步的. 系列ExtJS教程持续更新中,点击查看>>最新ExtJS教程目录 F ...
- 实用ExtJS教程100例-009:ExtJS Form无刷新文件上传
文件上传在Web程序开发中必不可少,ExtJS Form中有一个filefield字段,用来选择文件并上传.今天我们来演示一下如何通过filefield实现ExtJS Form无刷新的文件上传. 首先 ...
- 93.EXTJS Form之VTypes
转自:http://blog.sina.com.cn/s/blog_7778950d0100y2pg.html 本文我们主要探讨一下EXTJS的Form中验证的问题,可能用过EXTJS的Form的人都 ...
随机推荐
- 灰度直方图均衡化----python实现
直方图均衡化是使用图像直方图进行对比度调整的图像处理的方法. 该方法通常会增加许多图像的整体对比度,尤其是当图像的可用数据由接近的对比度值表示时. 通过这种调整,强度可以更好地分布在直方图上. 这允许 ...
- Leetcode 208.实现前缀树
实现前缀树 实现一个 Trie (前缀树),包含 insert, search, 和 startsWith 这三个操作. 示例: Trie trie = new Trie(); trie.insert ...
- Django组件:(6)cookie 和 session
会话:会话可理解为客户端与服务器之间的一次会晤,在一次会晤中可能会包含多次请求和响应:在JavaWeb中,客户向某一服务器发出第一个请求开始,会话就开始了,直到客户关闭了浏览器会话结束. 在一个会话的 ...
- Linux下汇编语言学习笔记2 ---
这是17年暑假学习Linux汇编语言的笔记记录,参考书目为清华大学出版社 Jeff Duntemann著 梁晓辉译<汇编语言基于Linux环境>的书,喜欢看原版书的同学可以看<Ass ...
- Layui导航、面包屑
物不在多,有用则精! 学习使用链接 导航:导航一般指页面引导性频道集合,多以菜单的形式呈现,可应用于头部和侧边,是整个网页画龙点晴般的存在.面包屑结构简单,支持自定义分隔符.千万不要忘了加载 elem ...
- css3 模拟标牌震荡效果
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <meta http ...
- 几种常见排序算法的java实现
一.几种常见的排序算法性能比較 排序算法 最好时间 平均时间 最坏时间 辅助内存 稳定性 备注 简单选择排序 O(n^2) O(n^2) O(n^2) O(1) 不稳定 n小时较好 直接插入排序 O( ...
- Chrom开发者工具详解
Chrome开发者工具不完全指南(一.基础功能篇) http://www.mamicode.com/info-detail-863534.html Chrome开发者工具不完全指南(二.进阶篇) ht ...
- Application特征
1.位置:服务器内存,执行速度快2.使用范围:整个应用程序3.类型:任意类型4.声明周期:应用程序开始创建到销毁
- ubuntu语言设置成汉语
打开设置system setting,进入语言支持,有语言和地区格式.下载须要的语言并应用到整个系统. 按说明来就可以 这样的方法使得部分英语变为汉语.