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 相关文章推荐
如何在标题栏显示框架内页面的标题
Feb 03 Javascript
Javascript下的keyCode键码值表
Apr 10 Javascript
JS中字符问题(二进制/十进制/十六进制及ASCII码之间的转换)
Nov 03 Javascript
extjs 为某个事件设置拦截器
Jan 15 Javascript
JavaScript Event学习第四章 传统的事件注册模型
Feb 07 Javascript
jQuery ajax cache缓存问题
Jul 01 Javascript
2010年最佳jQuery插件整理
Dec 06 Javascript
js控制鼠标事件移动及移出效果显示
Oct 19 Javascript
Node+Express+MongoDB实现登录注册功能实例
Apr 23 Javascript
vue+iview写个弹框的示例代码
Dec 05 Javascript
4个顶级开源JavaScript图表库
Sep 29 Javascript
Node.js Domain 模块实例详解
Mar 18 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 获取客户端的真实ip
2009/11/30 PHP
解析PHP中常见的mongodb查询操作
2013/06/20 PHP
ThinkPHP的截取字符串函数无法显示省略号的解决方法
2014/06/25 PHP
如何在标题栏显示框架内页面的标题
2007/02/03 Javascript
javascript 事件绑定问题
2011/01/01 Javascript
使用jQuery操作Cookies的实现代码
2011/10/09 Javascript
关于jQuery参考实例2.0 用jQuery选择元素
2013/04/07 Javascript
jquery禁止输入数字以外的字符的示例(纯数字验证码)
2014/04/10 Javascript
DOM节点删除函数removeChild()用法实例
2015/01/12 Javascript
js实现横向百叶窗效果网页切换动画效果的方法
2015/03/02 Javascript
jQuery使用hide方法隐藏页面上指定元素的方法
2015/03/30 Javascript
jQuery+Ajax实现无刷新操作
2016/01/04 Javascript
JS延时器提示框的应用实例代码解析
2016/04/27 Javascript
深入理解jquery中的事件与动画
2016/05/24 Javascript
详解微信小程序 通过控制CSS实现view隐藏与显示
2017/05/24 Javascript
基于vue实现swipe轮播组件实例代码
2017/05/24 Javascript
js脚本编写简单刷票投票系统
2017/06/27 Javascript
如何利用@angular/cli V6.0直接开发PWA应用详解
2018/05/06 Javascript
vue2.0页面前进刷新回退不刷新的实现方法
2018/07/31 Javascript
vue实现微信获取用户信息的方法
2019/03/21 Javascript
基于layui的下拉列表的数据回显方法
2019/09/24 Javascript
[02:15]2015国际邀请赛选手档案IG.Ferrari 430
2015/07/30 DOTA
[07:37]DOTA2-DPC中国联赛2月2日Recap集锦
2021/03/11 DOTA
如何优雅地改进Django中的模板碎片缓存详解
2018/07/04 Python
widows下安装pycurl并利用pycurl请求https地址的方法
2018/10/15 Python
Python 运行.py文件和交互式运行代码的区别详解
2019/07/02 Python
python中requests模拟登录的三种方式(携带cookie/session进行请求网站)
2020/11/17 Python
销售总监工作职责
2013/11/21 职场文书
个人求职信范文分享
2013/12/13 职场文书
中学生评语大全
2014/04/18 职场文书
投标保密承诺书
2014/05/19 职场文书
奥林匹克运动会口号
2014/06/19 职场文书
自主招生自荐信格式
2015/03/04 职场文书
汽车销售员工作总结
2015/08/12 职场文书
2016年暑假家长对孩子评语
2015/12/01 职场文书
vue特效之翻牌动画
2022/04/20 Vue.js