Extjs学习笔记之三 extjs form更多的表单项


Posted in Javascript onJanuary 07, 2010

1.日期选择框,DateField
日期选择框在日常项目中被广泛应用,一个方便的日期输入机制能够极大的提高用户体验。Extjs的DateField非常友好灵活强大。可以通过如下代码新建一个日期选择框:

new Ext.form.DateField({ 
id: 'diliveryDate', 
format: 'Y年m月d日', 
maxValue: new Date(), 
minValue: '1900-01-01', 
disabledDays: [0, 6], 
disabledDaysText: '禁止选择该日期', 
fieldLabel: '选择日期', 
width:200, 
showToday:false 
})

效果如下:
Extjs学习笔记之三 extjs form更多的表单项 
注意,默认情况下,这个日历显示的是英文,如果需要显示中文,需要引入区域文件:
<script type="text/javascript" src="ext-3.1.0/src/locale/ext-lang-zh_CN.js"></script>对其他控件应该也是类似的。2.HTML编辑器,HTMLEditor
HTML编辑器可以使客户编辑html文档。启用HTML编辑器非常简单,而且几乎不需要额外的配置,默认的就很好用:
new Ext.form.HtmlEditor({ 
id:'HtmlContent', 
autoHeight:false, 
width:500, 
fieldLabel:'HTML编辑' 
})

Extjs学习笔记之三 extjs form更多的表单项 
遗憾的是这个编辑器不支持图文混排,不过对于轻量级的应用来说还是很好用的。如果需要图文混排还是使用专门的第三方的插件好了。

3.组合框, ComboBox
这是一个重量级的控件,因为它在实际应用中起着广泛而重要的作用。虽然它的使用频率没有TextField高,但是它的功能却比TestField丰富的多,所以把它放在比较靠后的位置来介绍。Extjs的ComboBox具有下拉提示,自动完成等功能,也同时支持本地和服务器端的数据源。下面先看一个本地数据源的示例。

本地数据源可以放在一个ArrayStore中,这是一个类似一个数组的结构。例如,可以定义下面的store:

var store = new Ext.data.ArrayStore({ 
fields: ['Name', 'Code'], 
data: [['开发部', 1], ['行政部', 2], ['销售部', 3], ['质检部', 4], ['售后部', 5]] 
});下面就可以添加一个combobox,var myform = new Ext.FormPanel({ 
applyTo: 'myform', 
title: 'ComboxBox with local datasource', 
height: 200, 
width: 300, 
frame: true, 
labelSeparator: ':', 
labelWidth: 60, 
labelAlign: 'right', 
items: [new Ext.form.ComboBox({ 
id:'combolocal', 
fieldLabel:'部门', 
triggerAction:'all', 
store:store, 
displayField:'Name', 
mode:'local', 
forceSelection:true, 
typeAhead:true, 
resizable:true}) 
] 
});

其中比较重要的配置项有displayField,对应的是datastore中的fields,用来指定显示哪个字段。mode,在这里是local,表示本地数据源。typeAhead表示是否自动完成,forceSelection表示是否仅允许用户输入下拉列表中有的数据。效果如下,下图展示了自动完成,我仅在输入框中输入了一个“开”字:
Extjs学习笔记之三 extjs form更多的表单项 
使用远程数据也是类似的,不过我们首先要准备好一个能够返回数据的服务器页面,新建一个combo.ashx代码如下:
public class combo : IHttpHandler { 
public void ProcessRequest (HttpContext context) { 
string query = context.Request.Params["search"]; 
StringBuilder sb = new StringBuilder("["); 
foreach (string s in data) 
if (s.Contains(query)||query=="all") sb.Append(s+","); 
if(sb[sb.Length-1]==',') 
sb.Remove(sb.Length - 1, 1); 
sb.Append("]"); 
context.Response.ContentType = "text/plain"; 
context.Response.Write(sb.ToString()); 
} 
string[] data=new string[]{"['开发部', 1]","['行政部', 2]", "['销售部', 3]", "['质检部', 4]", "['售后部', 5]"}; public bool IsReusable { 
get { 
return false; 
} 
}}

此段程序根据客户端传来的参数进行筛选,再传回数据,如果参数值是all,则返回全部数据。可见服务器端的自动完成可以比本地的更自由,当然速度也会更慢。这个例子中服务器传回的一个符合格式的javascript数组,在实际开发中,有更好的数据传送格式可以选择,本文的讨论重点不是数据的传递,因此就直接采用这种方式作为示例。接下来配置下客户端的datastore:
var remoteStore=new Ext.data.ArrayStore({ 
fields: ['Name', 'Code'], 
proxy:new Ext.data.HttpProxy({url:'Combo.ashx'}) 
});最后就可以创建一个使用远程数据源的combobox了:new Ext.form.ComboBox({ 
id: 'comboremote', 
allQuery:'all', 
fieldLabel: '远程部门', 
triggerAction: 'all', 
mode: 'remote', 
queryParam:'search', 
displayField:'Name', 
store:remoteStore, 
minChars:1})

其中minChars表示用户至少要输入多少字后才开始自动完成,queryParam是向服务器传递参数的名字,allQuery是要求返回全部数据时候的参数值。效果如下:
Extjs学习笔记之三 extjs form更多的表单项
在remote模式下,combobox还支持服务器端分页,此时combox会向服务器传递start和limit参数,表示要显示的数据范围,服务器端代码做相应处理后返回数据即可。
Javascript 相关文章推荐
JavaScript脚本性能的优化方法
Feb 02 Javascript
javascript 操作select下拉列表框的一点小经验
Mar 20 Javascript
javascript 当前日期转化为中文的实现代码
May 13 Javascript
深入理解Javascript里的依赖注入
Mar 19 Javascript
一款基jquery超炫的动画导航菜单可响应单击事件
Nov 02 Javascript
jQuery模仿京东/天猫商品左侧分类导航菜单效果
Jun 29 Javascript
js中json处理总结之JSON.parse
Oct 14 Javascript
React Native实现进度条弹框的示例代码
Jul 17 Javascript
简单实现jQuery轮播效果
Aug 18 jQuery
vuex 使用文档小结篇
Jan 11 Javascript
node.js部署之启动后台运行forever的方法
May 23 Javascript
JavaScript中join()、splice()、slice()和split()函数用法示例
Aug 24 Javascript
Extjs学习笔记之二 初识Extjs之Form
Jan 07 #Javascript
Extjs学习笔记之一 初识Extjs之MessageBox
Jan 07 #Javascript
jQuery DOM操作小结与实例
Jan 07 #Javascript
javascript当onmousedown、onmouseup、onclick同时应用于同一个标签节点Element
Jan 05 #Javascript
jQuery 数据缓存data(name, value)详解及实现
Jan 04 #Javascript
用AJAX返回HTML片段中的JavaScript脚本
Jan 04 #Javascript
Javascript解决常见浏览器兼容问题的12种方法
Jan 04 #Javascript
You might like
使用Curl进行抓取远程内容时url中文编码问题示例探讨
2013/10/29 PHP
分享PHP计算两个日期相差天数的代码
2015/12/23 PHP
微信红包随机生成算法php版
2016/07/21 PHP
PHP如何将图片文件上传到另外一台服务器上
2019/08/26 PHP
判断页面是关闭还是刷新的js代码
2007/01/28 Javascript
关于js中window.location.href,location.href,parent.location.href,top.location.href的用法与区别
2010/10/18 Javascript
jquery插件制作 图片走廊 gallery
2012/08/17 Javascript
JavaScript静态类型检查工具FLOW简介
2015/01/06 Javascript
Flash图片上传组件 swfupload使用指南
2015/03/14 Javascript
谈一谈JS消息机制和事件机制的理解
2016/04/14 Javascript
5个最顶级jQuery图表类库插件【jquery插件库】
2016/05/05 Javascript
快速掌握jQuery插件WebUploader文件上传
2016/11/07 Javascript
JS编写函数实现对身份证号码最后一位的验证功能
2016/12/29 Javascript
js解决软键盘遮挡输入框的问题分享
2017/12/19 Javascript
详解React中合并单元格的正确写法
2019/01/08 Javascript
vue实现鼠标移入移出事件代码实例
2019/03/27 Javascript
Vue项目总结之webpack常规打包优化方案
2019/06/06 Javascript
ES6模板字符串和标签模板的应用实例分析
2019/06/25 Javascript
javascript实现点亮灯泡特效示例
2019/10/15 Javascript
[53:15]2018DOTA2亚洲邀请赛3月29日 小组赛A组 LGD VS TNC
2018/03/30 DOTA
[37:47]IG vs Winstrike 2018国际邀请赛小组赛BO2 第二场 8.19
2018/08/21 DOTA
python转换字符串为摩尔斯电码的方法
2015/07/06 Python
Python中的集合类型知识讲解
2015/08/19 Python
快速了解Python相对导入
2018/01/12 Python
Python除法之传统除法、Floor除法及真除法实例详解
2019/05/23 Python
Python 实现的 Google 批量翻译功能
2019/08/26 Python
使用 Python 清理收藏夹里已失效的网站
2019/12/03 Python
python实现遍历文件夹图片并重命名
2020/03/23 Python
将SVG图引入到HTML页面的实现
2019/09/20 HTML / CSS
FILA斐乐中国官方商城:意大利运动品牌
2017/01/25 全球购物
英国在线药房和在线医生:LloydsPharmacy
2019/10/21 全球购物
高级护理专业毕业生推荐信
2013/12/25 职场文书
银行竞聘上岗演讲稿
2014/09/12 职场文书
大一工商管理职业生涯规划:有梦最美,行动相随
2014/09/18 职场文书
Python基础之赋值,浅拷贝,深拷贝的区别
2021/04/30 Python
Centos环境下Postgresql 安装配置及环境变量配置技巧
2021/05/18 PostgreSQL