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

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
})

效果如下:
 
注意,默认情况下,这个日历显示的是英文,如果需要显示中文,需要引入区域文件:
<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编辑'
})

 
遗憾的是这个编辑器不支持图文混排,不过对于轻量级的应用来说还是很好用的。如果需要图文混排还是使用专门的第三方的插件好了。

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表示是否仅允许用户输入下拉列表中有的数据。效果如下,下图展示了自动完成,我仅在输入框中输入了一个“开”字:
 
使用远程数据也是类似的,不过我们首先要准备好一个能够返回数据的服务器页面,新建一个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是要求返回全部数据时候的参数值。效果如下:

在remote模式下,combobox还支持服务器端分页,此时combox会向服务器传递start和limit参数,表示要显示的数据范围,服务器端代码做相应处理后返回数据即可。

(0)

相关推荐

  • js简单实现用户注册信息的校验代码

    register.html 复制代码 代码如下: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><html xmlns="http://www.w3.org/1999/xhtml"><head><meta htt

  • js实现点击注册按钮开始读秒倒计时的小例子

    js 复制代码 代码如下: <script language="javascript"> <!-- var wait_time = 8; //设置秒数(单位秒) var secs_time = 0;          for(var i=1;i<=wait_time;i++) {  window.setTimeout("sTimer("+i+")",i*1000); } function sTimer(num) {  if

  • nodejs 实现模拟form表单上传文件

    以前项目里有这个方法,最近在客户那里出问题了,同事说,这个方法从来就没管用过,SO,用了一天时间把这个方法给搞出来了(觉得花费的时间长了点),分享之. 代码及测试用例: var http = require('http'); var path = require('path'); var fs = require('fs'); function postFile(fileKeyValue, req) { var boundaryKey = Math.random().toString(16);

  • form表单action提交的js部分与html部分

    1.JS部分代码 复制代码 代码如下: /** * 提交表单 */ function submitForm(action, actName, objName, formName,blogType){ $("#"+formName).attr("action",action); //var f = document.getElementsByTagName("form")[0]; //alert(f.action); $("#"

  • JS中的form.submit()不能提交表单的错误原因

    直接上代码把: 复制代码 代码如下: <div id="register">      <h4>会员注册</h4>      <div class="formdiv">          <form method="post" action="register.php?action=register" name="register" id="r

  • 仅一个form表单 js实现注册信息依次填写提交功能

    我们原先是一个很长的form表单,里面有很多选项.客户反馈这样不够友好,容易看花眼.因此进行改进,实现多步骤进度,多个提交的实现(其实只有一个form提交). 实现的思路:将表单的选项装入多个div中,一个显示,其他隐藏. 实现效果如下: 1.JavaScript代码 <script type="text/javascript" src="js/jquery.js"></script> <script type="text/j

  • javascript 清空form表单中某种元素的值

    下面就以情况type="text"为例: 复制代码 代码如下: <form id="form1" method="post"> <input type="text" /> <input type="text" /> <input type="button" value="clear" onclick="Refresh

  • Javascript和Java获取各种form表单信息的简单实例

    大家都知道我们在提交form的时候用了多种input表单.可是不是每一种input表单都是很简单的用Document.getElementById的方式就可以获取到的.有一些组合的form类似于checkbox或者radio或者select我们如何用javascript获取和在服务器中获取提交过来的参数呢?多说无用.上代码: Jsp-html代码: 复制代码 代码如下: <form action="input.do" name="formkk">   &

  • jquery序列化form表单使用ajax提交后处理返回的json数据

    1.返回json字符串: 复制代码 代码如下: /** 将一个字符串输出到浏览器 */     protected void writeJson(String json) {         PrintWriter pw = null;         try {             servletResponse.setContentType("text/plain;charset=UTF-8");             pw = servletResponse.getWrit

  • 用户注册常用javascript代码

    复制代码 代码如下: <%@ page contentType="text/html; charset=gb2312" language="java"%> <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> <html> <head&

随机推荐