Ext表单组件之textField
先看效果：
[img]http://lovebeyond.iteye.com/upload/attachment/132579/697c9555-5ff5-3b95-b6e4-a646c7d099ca.jpg[/img]
[size=large]只是简单的介绍textField相关的组件的应用！
其中也较为详细的介绍了formpanel和fieldset的应用，对于界面的布局来讲特别是对表单布局来讲formpanel的应用无疑是最频繁的，
formpanel是专门为表单设置的一种布局，所以设计到的配置项也比较多，同时它也是panel，即面板容器，熟悉JAVA的就知道其实不管是命名还是实现功能都有点模仿JAVA，甚至是整个组件的类组织形式，其实如果清楚整个源文件的组织结构的话学起来就快很多，做为基于对象的JS也是一样，从BoxComponent到Container再到field再到我们今天讲的textfield都是一层层的继承关系！我建议的是从上往下看，从最基础的类开始入手，其实就单个组件来讲属性并不多，我记得我自己刚接触EXT的时候随便点一个组件都的一堆的属性，其实这些属性都是继承过来，一层层关系搞清楚了，就觉得其实关系并不复杂！
从textfield来讲它又是NumberField, TextArea, TriggerField的父类，所以它的属性都被继承过去了，同时TriggerField作为ComboBox, DateField的父类，其实也可以看做是对TriggerField的实现，TriggerField也很少直接用到，作为ComboBox又是TimeField的父类，这样每个组件之间的关系就很明朗了，不要把每个组件单独来对待，要从大的容器和类的层次上去考虑!可能我上面对有些关键型术语表达的也不正确！别见怪！
也希望高手不要见笑！
先看代码！讲解都在代码里面！[/size]
textfield.html
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html> <head> <title>textfield.html</title> <style type="text/css"> body{background-color:#777777} #form-tt{width: 350px;margin-left: auto;margin-right: auto;} </style> <link rel="stylesheet" type="text/css" href="../Ext/resources/css/ext-all.css" /> <script type="text/javascript" src="../Ext/adapter/ext/ext-base.js"></script> <script type="text/javascript" src="../Ext/ext-all.js"></script> <script type="text/javascript" src="textfield.js"></script> </head> <body> <div id="form-tt"></div> <div id="mid">this is loaded local content</div> </body></html>textfield.js
Ext.onReady(function(){ Ext.QuickTips.init();//初始化错误信息提示函数 Ext.form.Field.prototype.msgTarget = 'qtip';//设置错误信息显示方式
var proviceDate = [{pname:'江西',pvalue:'jiangxi'},{pname:'湖南',pvalue:'hunan'}, {pname:'湖北',pvalue:'hubei'},{pname:'安徽',pvalue:'anhui'}, {pname:'其他',pvalue:'others'}]; var provice_store = new Ext.data.JsonStore({ data :proviceDate, fields :[{name:'provice_name',mapping:'pname'},{name:'provice_value',mapping:'pvalue'}] }) var panel = new Ext.form.FormPanel({ renderTo : 'form-tt', title:'textField的应用', frame:true,//是否渲染面板 //autoLoad :'url.html',//加载外部的文件到panel里面 formId :'fm1',//form的id属性，在不设置的情况下会自动生成 contentEl :'mid',//加载本地资源到panel里面 width:350, collapsible :true,//是否允许收起或展开 tools :[{id:'toggle',qtip: '收起或展开panel', handler: function(event, toolEl, panel){ //事件内容 }}, {id:'Close',qtip: '关闭panel'}, {id:'minimize',qtip: '最小化panel'}, {id:'maximize',qtip: '最大化panel'}, {id:'down',qtip: '向下移动'}, {id:'up',qtip: '向上移东'}, {id:'refresh',qtip: '刷新panel'}, {id:'save',qtip: '保存panel'}, {id:'print',qtip: '打印panel'}],//还有更多，至于事件触发可以自己写 autoHeight:true,//自动高度 collapseFirst :true,//设置一开始时候是否收起或展开 layout:'form',//设置布局方式 buttonAlign :'right',//设置按钮的对齐方式 defaults :{bodyStyle:"padding:2px"}, items:[{ xtype:'fieldset', title:'fieldSet标题', autoHeight:true,//自动高度 animCollapse :true,//是否动画效果，这个经常配合checkboxToggle:true,或者collapsible:true时候设置，否则也没意义 //collapsible :true, checkboxToggle:true,//效果是checkbox //collapsed :true,//表示为收起状态，配合checkboxToggle:true,或者collapsible:true checkboxName :'check',//checkbox 的name属性，配合checkboxToggle:true时使用 labelWidth:80,//设置fieldLabel所在值的宽度 labelAlign :'right',//设置label的对齐方式，默认为left items:[{ xtype:'textfield', allowBlank :false, //grow:true,//设置输入框宽度是否根据字段内容宽度自动延伸和收缩 //growMax:200,//自动延伸和收缩的最大宽度，当grow:true时才有效 //growMin:50,//自动延伸和收缩的最小宽度，当grow:true时才有效 //msgTarget :'side',//其值包括qtip,title,under,side,[element id]错误提示信息的现实方式 blankText : '信息不能为空',//用于验证输入内容为空时候显示的错误信息，和allowBlank :false配合,还必须设置错误信息显示方式 fieldLabel:'单行文本框', regex :/^[1-9]\d{5}$/,//匹配邮编号码的正则 regexText:'输入的值不匹配，邮编必须是6位且首位不能为0的数字',//不存在匹配情况的提示信息 emptyText :'请输入信息'//用默认文本代替空值 //validator :function(){alert('所有验证规则已经都验证了')}//验证函数，在所有当前textfield的验证规则完成后自动执行 },{ xtype:'numberfield', fieldLabel:'数字文本框', allowDecimals :true,//是否允许输入小数 allowNegative :false,//是否允许输入负数 baseChars :'23456789',//允许输入的数字集合默认为'0123456789',使用当输入其他数字时候就屏蔽掉 decimalPrecision :3,//小数点后面允许的位数多余的位数会自动四舍五入,配合allowDecimals :true一起使用,否则没意义 decimalSeparator :',',//十进制的分割符,默认为'.',配合allowDecimals :true一起使用,否则没意义 maxValue :99999,//最大可输入的数值 maxText :'数值不能超过99999',//超过最大值时候的提示信息,配合maxValue 一起使用 minValue :100,//最小可输入的数值 minText :'数值不能小于100',//超过最大值时候的提示信息,配合minValue 一起使用 nanText :'输入的格式不正确' },{ //这个一般很少直接使用,而是通过其子类来使用,如DateField,ComboBox,TimeField xtype:'trigger', fieldLabel:'触发文本框', //hideTrigger :true,//是否隐藏触发按钮,默认为false autoCreate :false },{ xtype:'datefield', fieldLabel:'datefield组件', disabledDates :['../05/2009','../06/2009'],//匹配规则可以看API,这里表示2009年每个月的5，6号不能选择 disabledDatesText :'日期不对，每月的5，6号是不能选择的',//这个要配合disabledDates一起使用 disabledDays :[0,6],//表示每星期的星期6和日不能选择 disabledDaysText :'星期6和日不能选择',//这个要配合disabledDays一起使用 format :'Y-m-d',//日期显示格式 invalidText :'日期格式不正确',//当输入不正确的格式时候的提示信息 minValue :'01/01/1900',//可以是字符串和日期格式 minText:'超出最小值范围', maxValue:new Date(), maxText:'最大日期不得大于当天日期', showToday :true//是否显示日期选择面板下面的'today'按钮,默认为显示true //triggerClass :'className'//触发事件时候的CSS样式，一般默认就行 },{ xtype:'combo', fieldLabel:'combo组件', //allQuery :'all_provice',//当需要向服务器提交全部查询数据的时候需要设置的字段作为表示 store:provice_store,//绑定是数据源 mode : 'local',//设置下拉列表读取数据的模式,local表示本地读取，remote表示远程读取 displayField :'provice_name',//被显示在下拉列表框中的值所对于的字段名，比如本类中省份对应的provice_name valueField : 'provice_value',//设置数据值对应的字段 forceSelection : true,//是否严格匹配列表中的值，true表示只能输入列表中的值 editable:true,//是否可以编辑 forceSelection : true,//当获取焦点的时候立即选择一个已存在的列表项,与editable:true一起使用,否则无意义 //transform :'idName',//通过ID或者节点把页面中SELECT列表转化为COMBO列表项 triggerAction : 'all',//单击触发按钮的时候显示全部查询的数据,默认为query,设置all会执行allQuery查询 typeAhead : true,//自动补全 typeAheadDelay :300,//自动补全的延迟毫秒数，默认250 hiddenName :'provice',//隐藏字段，如果设置服务器可以通过这个字段接受值 hiddenId :'provice',//如果在hiddenName存在的情况下如果此值没有设置则默认为hiddenName的值 lazyInit :true,//延迟加载, lazyRender :true,//延迟渲染 //pageSize :2,//分页查询，当大于0时进行自动分页,只有在mode : 'remote'情况下有效 queryParam :'search_provice',//查询参数,涉及到和后台交互 minChars :1,//自动选择匹配数据并显示下拉列表信息的最小字符数量,mode:'remote'是为4,mode:'local'为0 handleHeight:10//设置下来手柄的高度 },{ xtype:'timefield', fieldLabel:'timefield组件', format :'h:i',//设置时间格式 increment :30//默认为15 },{ //这个组件很简单，就是textfield的单行成为多行！ xtype:'textarea', fieldLabel:'textarea组件', width:165 }] }],
buttons:[{text:'提交'},{text:'重置'}] })})附上源码,IE7.0和FF环境下运行完全OK！
Ext表单组件之textField相关推荐
- Ext表单组件之checkbox
[img]http://lovebeyond.iteye.com/upload/attachment/132698/06745dfa-42bf-3e1d-a391-5782981dfe63.jpg[/ ...
- extjs 提交表单给php,JavaScript_Extjs学习笔记之二 初识Extjs之Form，Extjs中的表单组件是Ext.form.Basic - phpStudy...
Extjs学习笔记之二 初识Extjs之Form Extjs中的表单组件是Ext.form.BasicForm,不过最简单最常用的是Ext.form.FormPanel控件,它继承自Panel,具有一 ...
- 实现Ant Design 自定义表单组件
Ant Design 组件提供了Input,InputNumber,Radio,Select,uplod等表单组件,但实际开发中这是不能满足需求,同时我们希望可以继续使用Form提供的验证和提示等方法 ...
- android 自定义表单,Android实现Ant Design 自定义表单组件
Ant Design 组件提供了Input,InputNumber,Radio,Select,uplod等表单组件,但实际开发中这是不能满足需求,同时我们希望可以继续使用Form提供的验证和提示等方法 ...
- vue 嵌套表格组件_使用form-create动态生成vue自定义组件和嵌套表单组件
使用form-create动态生成vue自定义组件和嵌套表单组件 maker.create 通过建立一个虚拟 DOM的方式生成自定义组件 生成 Maker let rule = [ formCreat ...
- Vant-UI 表单组件（Field组件）：验证表单元素表单提交 - 踩坑篇
Vant-UI 表单组件(Field组件):验证表单元素&&表单提交: 示例截图 · 如下: 示例 · 详细代码 · 如下: <template><div class ...
- 微信小程序之自定义表单组件(radio)
背景: 最近在做项目的时候遇到一个问题,那就是微信的官方表单组件的可扩展性不强,无法达到设计稿所要求的效果,所以想到了用自定义组件的方法自定义一个表单组件. (自定义组件其实往往用在需要复用的地方,比 ...
- 【实习小tip】多层dialog弹窗遮罩问题、elementUI的form表单组件的select框在只读的情况下没办法拿到传来的数据、从弹窗子组件获取数据后需要刷新页面
解决elementui多层dialog弹窗遮罩问题 弹窗套娃出现了整个屏幕都是遮罩层的问题,需要鼠标点击一下才能正常. 在弹窗组件代码上加上 append-to-body 就可以了,表示这个弹窗是嵌在 ...
- Vue 2.x折腾记 - (17) 基于Ant Design Vue 封装一个配置式的表单组件
前言 写了个类似上篇搜索的封装,但是要考虑的东西更多. 具体业务比展示的代码要复杂,篇幅太长就不引入了. 效果图 2019-04-25 添加了下拉多选的渲染,并搜索默认过滤文本而非值 简化了渲染的子组 ...
最新文章
- Logon database Tiger引起DataGuard不同步问题
- 温故知新 javascript 正则表达式
- 添加linux系统调用的两种方式
- [置顶] 显示/隐藏登录密码
- 如何判断浏览器的请求头是不是结束
- CMD查询Mysql中文乱码的解决方法
- html5+开发window桌面图标,js模仿windows桌面图标排列算法具体实现(附图)
- 功能性农业实用技术 谋定·农业大健康-李喜贵：粤黔东西协作
- JSON 序列化与反序列化：使用TypeReference 构建类型安全的异构容器
- starops 云效运维 文档_阿里云 SAE 携手云效助力「石家庄掌讯」持续交付、降本提效...
- 网络编程之OSI七层协议略析
- HDOJ 2955 Robberies (01背包)
- QQ邮箱鸡肋存储型XSS漏洞利用
- SqlServer 计算年龄（岁月天)的函数
- 李开复：AI巨头是有史以来最难以打破的垄断 | 谷歌和腾讯参投中国AI企业深圳晶泰科技
- 阿里云接受邮件服务器是什么,接收邮件服务器pop3
- 安装chrome第三方插件教程:(超详细)
- Java将Word转为图片完美解决方案(免费无损不乱码)
- 如何查看路由器中的宽带密码
- 蓝桥 卷“兔”来袭编程竞赛专场-06姜子牙阴书加密 题解