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使用activex控件的代码
Jan 27 Javascript
IE6 fixed的完美解决方案
Mar 31 Javascript
jquery和javascript中如何将一元素的内容赋给另一元素
Jan 09 Javascript
七个很有意思的PHP函数
May 12 Javascript
浅谈JS闭包中的循环绑定处理程序
Nov 09 Javascript
理解javascript中的MVC模式
Jan 28 Javascript
基于jquery实现三级下拉菜单
May 10 Javascript
纯css下拉菜单 无需js
Aug 15 Javascript
AngularJs bootstrap搭载前台框架——准备工作
Sep 01 Javascript
js实时获取窗口大小变化的实例代码
Nov 18 Javascript
js正则匹配多个全部数据问题
Dec 20 Javascript
swiper自定义分页器的样式
Sep 14 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
一个PHP的ZIP压缩类分享
2014/05/04 PHP
destoon实现调用热门关键字的方法
2014/07/15 PHP
php+mysqli实现批量替换数据库表前缀的方法
2014/12/29 PHP
PHP实现随机生成水印图片功能
2017/03/22 PHP
utf8的编码算法 转载
2006/12/27 Javascript
jQuery学习笔记之jQuery选择器的使用
2010/12/22 Javascript
js jquery验证银行卡号信息正则学习
2013/01/21 Javascript
SOSO地图JS画出标注和中心点以html形式运行
2013/08/09 Javascript
JavaScript通过事件代理高亮显示表格行的方法
2015/05/27 Javascript
js实现商品抛物线加入购物车特效
2020/11/18 Javascript
vue双向绑定简要分析
2017/03/23 Javascript
jQuery实现按比例缩放图片的方法
2017/04/29 jQuery
vue.js中使用echarts实现数据动态刷新功能
2019/04/16 Javascript
通过循环优化 JavaScript 程序
2019/06/24 Javascript
TypeScript类型声明书写详解
2019/08/28 Javascript
uniapp与webview之间的相互传值的实现
2020/06/29 Javascript
vue setInterval 定时器失效的解决方式
2020/07/30 Javascript
Vue 电商后台管理项目阶段性总结(推荐)
2020/08/22 Javascript
openlayers 3实现车辆轨迹回放
2020/09/24 Javascript
Python urlopen 使用小示例
2008/09/06 Python
python连接mongodb操作数据示例(mongodb数据库配置类)
2013/12/31 Python
浅谈Python单向链表的实现
2015/12/24 Python
设计模式中的原型模式在Python程序中的应用示例
2016/03/02 Python
python编程使用selenium模拟登陆淘宝实例代码
2018/01/25 Python
python实现狄克斯特拉算法
2019/01/17 Python
利用python绘制数据曲线图的实现
2020/04/09 Python
python批量生成身份证号到Excel的两种方法实例
2021/01/14 Python
智能电子秤、手表和健康监测仪:Withings(之前为诺基亚健康)
2018/10/30 全球购物
KOHLER科勒美国官网:国际著名卫浴橱柜领先品牌
2020/06/27 全球购物
高中英语教学反思
2014/02/04 职场文书
将相和教学反思
2014/02/04 职场文书
建筑施工安全生产责任书
2014/07/22 职场文书
2014年教师节国旗下讲话稿
2014/09/10 职场文书
工程部岗位职责
2015/02/10 职场文书
奇妙的 CSS shapes(CSS图形)
2021/04/05 HTML / CSS
Java 数组内置函数toArray详解
2021/06/28 Java/Android