- 浏览: 258536 次
- 性别:
- 来自: 深圳
文章分类
最新评论
-
dhunter:
mongodb 需要auth 怎么加呢?
linux下mongodb+nodejs环境搭建 -
y1d2y3xyz:
xie666 写道html.push('<td alig ...
javascript DOM操作性能-----创建DOM -
xie666:
html.push('<td align="c ...
javascript DOM操作性能-----创建DOM -
轩辕丶菓菓:
bushkarl 写道那我后台用struts2,我的name一 ...
Ext表单之loadRecord用法详解 -
heikediguo:
这样不会按照你想要的顺序加载。
加载JS文件
先看效果:
只是简单的介绍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的父类,这样每个组件之间的关系就很明朗了,不要把每个组件单独来对待,要从大的容器和类的层次上去考虑!可能我上面对有些关键型术语表达的也不正确!别见怪!
也希望高手不要见笑!
先看代码!讲解都在代码里面!
textfield.html
textfield.js
附上源码,IE7.0和FF环境下运行完全OK!
只是简单的介绍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的父类,这样每个组件之间的关系就很明朗了,不要把每个组件单独来对待,要从大的容器和类的层次上去考虑!可能我上面对有些关键型术语表达的也不正确!别见怪!
也希望高手不要见笑!
先看代码!讲解都在代码里面!
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!
发表评论
-
Extjs源码之--Ext事件机制/继承关系
2011-10-16 16:36 1873Extjs源码之--Ext.lib.Event 中分析了EX ... -
Extjs源码之--Ext.lib.Event(事件的简单封装)
2011-10-16 11:34 2652这个对象是对事件的基础封装,在实际使用中,我们往往不从这里去 ... -
Extjs源码之--Ext.lib.Dom(Dom的基本封装)
2011-10-13 23:31 2372Extjs的对Dom最基础的封装,主要包括:元素的包含关系,元 ... -
Extjs源码之---Ext.util.DelayedTask
2011-10-12 22:56 2446/* 创建对象 var task = new Ext. ... -
Extjs源码之-- Ext.util.JSON
2011-09-23 23:19 4049很多写extjs的朋友说,Extjs的源码之间的关系太紧了,所 ... -
Ext.form.ComboBox 远程带分页显示
2011-09-23 22:00 1882很多时候针对大数据量的下拉列表的时候,我们通常需要分页显示数据 ... -
Ext.form.ComboBox change事件的BUG
2011-09-08 23:11 5402因为项目需要,想用Ext的combo控件实现动态级联,发现co ... -
Ext.grid.EditorGridPanel 中combo的显示异常
2011-09-03 00:58 2785Ext.grid.EditorGridPanel 在项目中用到 ... -
extjs源码分析-Ext.util.TaskRunner(模拟多线程)
2011-08-12 12:09 3030/** * @class Ext.util.TaskR ... -
extjs源码分析-016(Ext....)
2011-03-28 23:04 1058Ext.apply(Ext, function(){ ... -
extjs源码分析-015(Number扩展)
2011-03-20 01:03 898Ext.applyIf(Number.prototype, ... -
extjs源码分析-013(Array扩展)
2011-03-19 11:03 1127Ext.applyIf(Array.prototype, ... -
extjs源码分析-013(String扩展)
2011-03-18 23:05 1289//字符串替换 /* var cls = 'my-cl ... -
extjs源码分析-012(Funtion扩展)
2011-03-18 22:42 1303Ext.apply(Function.prototype, ... -
extjs源码分析-011(namespace)
2011-03-10 22:54 1093//命名空间,就是创建一个OBJ的一个属性, names ... -
extjs源码分析-009(Ext.urlAppend/toArray)
2011-03-10 22:43 1868//在URL后面追加参数 urlAppend : fun ... -
extjs源码分析-009(Ext.urlDecode/urlEncode)
2011-03-09 23:17 3279//把json格式转化成url的编码方式 // e.g. ... -
extjs源码分析-008(Ext.removeNode)
2011-03-09 22:35 1791DOC = document; removeNode : ... -
extjs源码分析-007(Ext.each)
2011-02-08 14:40 1624each : function(array, fn ... -
extjs源码分析-006(Ext.override/Ext.extend)
2011-02-08 00:40 2134override : function(o ...
相关推荐
总而言之,EXT表单验证中的TextField组件通过`vtype`属性提供了丰富的验证机制,能够确保用户输入的数据质量,从而提高应用程序的稳定性和用户体验。开发者可以根据需要选择合适的vtype,或者自定义验证规则,以满足...
在提供的压缩包中,"ext-3-TextField-sample.rar" 涉及到的是ExtJS 3.x版本中的TextField组件,这是一个基本的用户输入控件,常用于收集用户在网页上的文本信息。这个示例着重介绍了如何创建和使用TextField。 ...
总的来说,`Ext.form.TextField`是EXT框架中不可或缺的一部分,它提供了一种简单且灵活的方式来创建和管理用户输入,是构建Web表单和交互界面的关键组件。通过研究这个示例,开发者可以更好地掌握EXT框架的使用,...
本篇文章将聚焦于如何使用Ext表单组件来实现用户注册的功能。 首先,我们来看看`form.html`。这是一个HTML文件,通常会包含一个基本的页面结构,以及引入Ext JS库的链接。它可能还会有一个`<script>`标签,用来加载...
Ext的表单组件为创建复杂的数据输入界面提供了强大的支持。 ##### 1. **Checkbox(复选框)** Checkbox组件允许用户选择多个选项中的一个或多个。 ##### 2. **ComboBox(组合框)** ComboBox组件结合了文本框和...
它提供了丰富的组件库,包括表格、表单、菜单等,而表单验证功能则是其表单组件的核心部分。 EXT表单验证主要涉及以下几个方面: 1. **字段验证**:EXT表单中的每个字段(Field)都可以配置验证规则。这些规则可以...
在EXT JS中,表单组件不仅包含基本的输入字段,还支持复杂的输入类型和验证机制。 1. `form`:`Ext.FormPanel`是EXT JS中的表单面板,它是一个容器,可以容纳各种表单字段和其他组件。表单面板允许你定义布局、提交...
总之,Ext JS的表单组件及其数据校验功能,为Web应用开发提供了强大且灵活的工具集,使得创建高质量的用户界面变得既简单又高效。通过合理配置和利用这些组件,开发者能够构建出既美观又实用的Web应用程序,显著提升...
`Ext.form.TextField`是Ext JS库中的一个组件,用于创建基本的文本输入字段。它在Web应用程序中广泛用于收集用户输入的数据,如用户名、搜索关键词等。以下是对`Ext.form.TextField`的一些主要特性和配置选项的详细...
### Ext组件概述与详解 #### 一、Ext基础组件 **1.1 Box Component (Ext.BoxComponent)** - **xtype**: `box` - **功能描述**:Box Component 是一个非常基本的 Ext 组件,主要用于定义具有边框和其他布局属性的...
`FormPanel`是Ext JS框架中的一个重要组件,主要用于构建复杂的表单界面。它提供了丰富的功能,如数据验证、数据提交以及灵活的布局控制等,使得开发者能够轻松地创建出既美观又实用的用户输入界面。 #### 创建...
本文将深入探讨Ext表单中的`loadRecord`方法,这是一个非常实用的功能,用于将数据记录加载到表单中,以便用户可以查看或编辑。我们将通过`loadRecord`方法的使用场景、工作原理以及示例代码来详细讲解这个知识点。 ...
在Ext框架中,表单组件是创建用户界面的重要组成部分。通过合理的布局管理可以极大地提升用户体验。本篇将详细介绍Ext中表单中各种组件的布局方法,重点讨论平行分列布局及其具体应用。 #### 默认布局与平行分列...
在EXT中,`EXT.from`通常指的是一个表单组件,它允许用户输入数据并进行验证,然后可以将这些数据提交到服务器进行处理。在本文中,我们将详细探讨EXT表单的创建、字段类型以及如何添加和配置这些字段。 首先,创建...
Ext 2.0的表单组件提供了一整套完整的解决方案,包括各种输入字段、按钮、标签、提示信息等。下面将详细解析这些知识点: 1. **表单(FormPanel)**:这是Ext 2.0中的核心表单组件,它是一个容器,可以包含各种表单...
title: 'EXT表单', items: [ {xtype: 'textfield', name: 'username'}, {xtype: 'passwordfield', name: 'password'} ], buttons: [{ text: '提交', handler: function() { formPanel.getForm().submit({ ...
此外,EXT的表单组件如TextField、ComboBox和DateField等,提供了丰富的输入验证和用户交互功能。 在EXT 3.0的API文档中,每个类都有详细的说明,包括其构造函数、公共方法、属性和事件。例如,`Ext.Panel`类是EXT...
在EXT3.0中,登录界面通常由EXT的组件构建,如FormPanel、TextField、Button等。FormPanel是承载表单元素的容器,TextField用于输入用户名和密码,Button则用于触发登录操作。登录过程涉及事件监听和处理,例如点击...
在Ext JS这个强大的JavaScript框架中,管理用户界面组件如form中的textfield是非常常见的任务。当我们需要根据特定条件控制form中某个字段是否显示时,通常会使用`hide()`、`setVisible(false)`或`remove()`等方法。...