正文
一、使用封装后Ext表单控件
esayadd.aspx
<%@ Page Language="C#" AutoEventWireup="true" CodeFile="esayadd.aspx.cs" Inherits="esayadd" %>
<!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 runat="server">
<title>表单控件</title>
</head>
<body>
<form id="form1" runat="server">
<script type="text/javascript">
Ext.onReady(function() {
Ext.QuickTips.init();
Ext.form.Field.prototype.msgTarget = 'side';
var form1 = new Ext.FormPanel({
layout: 'form',
collapsible: true,
autoHeight: true,
frame: true,
renderTo: Ext.getBody(),
title: '<center style="curor:hand" onclick="window.location.reload();">表单控件</center>',
style: 'margin-left:auto;margin-right:auto;width:500px;margin-top:8px;',
//设置标签对齐方式
labelAlign: 'right',
//设置标签宽
labelWidth: 170,
//设置按钮的对齐方式
buttonAlign:'center',
//默认元素属性设置
defaults:{
width:180
},
items: [
new TextField('TextBox','文本框控件'),
new NumberField('TextBoxNumber','只允许输入数字'),
new ComboBox('DropDownList','下拉框控件',[[1,'男'],[0,'女']]),
new DateField('DateControl','日历控件'),
new RadioGroup('RadioItems','单选控件',[['选我','A',true],['选我吧','B']]),
new CheckboxGroup('CheckboxItems','复选控件',[['香蕉','A'],['苹果','B'],['橘子','C'],['桃子','D']],3),
new TextArea('textarea','文本域控件',null,50,'可以输好多字！'),
new TimeField(null,'时间控件',60,'H:i'),
new FieldSet('标签页','标签页',[new Panel('标签页中的面板',null,50,true)]),
new HtmlEditor('htmleditor','在线编辑器',260,100)
],
buttons: [{
text: "保 存"
,handler:function(){
MsgError('错误');
MsgWarning('警告');
MsgInfo('提示');
MsgConfirm('确认');
}
}, {
text: "取 消"
,handler:function(){
form1.form.reset();
}
}]
});
});
</script>
</form>
</body>
</html>
代码说明：
请大家比较ExtJs 备忘录（1）—— Form表单（上） [ 控件使用 ]中的add.aspx与本文esayadd.aspx，封装带来的简洁、易用和减少使用控件出错几率是显而易见的。需要注意的是，这里只是做了简单的封装，因为Ext表单控件属性太多，起码也有10个以上，这里不可能把所有的属性都列为函数参数，所以根据实际项目情况进行调整，可以在这个现有函数基础上补上常用的参数设置，只要能满足80%-90%的情况价值就体现了 : )
二、Ext表单控件封装
easy-ext.js
/// <reference path="../adapter/ext/ext-base.js" />
/// <reference path="../ext-all.js" />
//<><><><><><><><><><><><><><><><><><><><>
// 作 者：农民伯伯
// 邮 箱：over140@gmail.com
// 博 客：http://over140.cnblogs.com/
// 时 间：2009-9-16
//<><><><><><><><><><><><><><><><><><><><>
//#region Ext.form.TextField
function TextField(fName,fLabel,defaultValue)
{
/// <summary>
/// Ext.form.TextField封装
/// </summary>
/// <param name="fName">name</param>
/// <param name="fLabel">fieldLabel</param>
/// <param name="defaultValue">默认值</param>
/// <returns>Ext.form.TextField</returns>
var text = new Ext.form.TextField();
if(fName!=null)
text.name = fName;
if(fLabel!=null)
text.fieldLabel = fLabel;
//设置默认值
if(defaultValue != null)
text.setValue(defaultValue);
return text;
}
//#endregion
//#region Ext.form.TextField
function NumberField(fName,fLabel,defaultValue,allowDecimals,allowNegative,maxValue,minValue)
{
/// <summary>
/// Ext.form.NumberField封装
/// </summary>
/// <param name="fName">name</param>
/// <param name="fLabel">fieldLabel</param>
/// <param name="defaultValue">默认值</param>
/// <param name="allowDecimals">是否允许小数点</param>
/// <param name="allowNegative">是否允许负数</param>
/// <param name="maxValue">最大值</param>
/// <param name="minValue">最小值</param>
/// <returns>Ext.form.NumberField</returns>
var number = new Ext.form.NumberField();
if(fName!=null)
number.name = fName;
if(fLabel!=null)
number.fieldLabel = fLabel;
//设置默认值
if(defaultValue != null && typeof(defaultValue) == "number")
number.setValue(defaultValue);
//设置是否允许小数点，默认(不设置)为不允许
if(allowDecimals != null && typeof(allowDecimals) == "boolean")
number.allowDecimals = Boolean(allowDecimals);
//设置是否允许负数，默认(不设置)为不允许
if(allowNegative != null && typeof(allowNegative) == "boolean")
number.allowNegative = Boolean(allowNegative);
//设置最大值
if(maxValue != null && typeof(maxValue) == "number")
number.maxValue = Number(maxValue);
//设置最小值
if(minValue != null && typeof(minValue) == "number")
number.minValue = Number(minValue);
return number;
}
//#endregion
//#region Ext.form.DateField
function DateField(fName,fLabel,defaultValue,format,editable)
{
/// <summary>
/// Ext.form.DateField封装
/// </summary>
/// <param name="fName">name</param>
/// <param name="fLabel">fieldLabel</param>
/// <param name="defaultValue">Boolean:true为当前日期/String: 按'Y-m-d'格式，如2009-1-1</param>
/// <param name="format">设置日期格式化字符串</param>
/// <param name="editable">是否允许输入，还是只能选择日期</param>
/// <returns>Ext.form.DateField</returns>
var date = new Ext.form.DateField();
if(fName!=null)
date.name = fName;
if(fLabel!=null)
date.fieldLabel = fLabel;
//设置日期格式化字符串
if(format == null)
format = 'Y-m-d';
date.format = format;
//设置默认日期
if(defaultValue != null)
{
if(typeof(defaultValue) == "boolean" && Boolean(defaultValue) == true)
{
date.setValue(new Date().dateFormat(format));
}
else if(typeof(defaultValue) == "string")
{
var strDate =String(defaultValue).split("-");
if(strDate.length==3)
date.setValue(new Date(strDate[0],parseInt(strDate[1])-1,strDate[2]).dateFormat(format));
}
}
//是否允许编辑
if(editable==null)
editable = false;
else if(typeof(editable) == "boolean")
editable = Boolean(editable);
date.editable = editable;
return date;
}
//#endregion
//#region Ext.form.TimeField
function TimeField(fName,fLabel,increment,format)
{
/// <summary>
/// Ext.form.TimeField封装
/// </summary>
/// <param name="fName">name</param>
/// <param name="fLabel">fieldLabel</param>
/// <param name="increment">设置时间间隔，单位为分钟</param>
/// <param name="format">格式化输出，支持格式如下："g:ia|g:iA|g:i a|g:i A|h:i|g:i|H:i|ga|ha|gA|h a|g a|g A|gi|hi|gia|hia|g|H"</param>
/// <returns>Ext.form.TimeField</returns>
var time = new Ext.form.TimeField();
if(fName!=null)
time.name = fName;
if(fLabel!=null)
time.fieldLabel = fLabel;
//设置时间间隔 默认为15分钟
if(increment!=null && typeof(increment) == "number")
time.increment = Number(increment);
//设置格式化输出 默认为 "g:i A"
if(format != null && typeof(format) == "string")
time.format = String(format);
return time;
}
//#endregion
//#region Ext.form.ComboBox
function ComboBox(fName,fLabel,dataStore,defaultValue,displayField,valueField,editable)
{
/// <summary>
/// Ext.form.ComboBox封装
/// </summary>
/// <param name="fName">name</param>
/// <param name="fLabel">fieldLabel</param>
/// <param name="dataStore">数据源。本地模式，如[[1,'男'],[0,'女']]；远程模式，传入Ext.data.Store</param>
/// <param name="defaultValue">默认值</param>
/// <param name="displayField">选项的文本对应的字段</param>
/// <param name="valueField">选项的值对应的字段</param>
/// <param name="editable">是否可以输入,还是只能选择下拉框中的选项</param>
/// <returns>Ext.form.ComboBox</returns>
var combo = new Ext.form.ComboBox({
mode: 'local',
editable : false,
typeAhead: true,
triggerAction: 'all',
selectOnFocus:true
});
if(fName!=null)
combo.name = fName;
if(fLabel!=null)
combo.fieldLabel = fLabel;
if(displayField==null || typeof(displayField) != "string")
displayField = "Name";
combo.displayField = String(displayField);
if(valueField==null || typeof(valueField) != "string")
valueField = "Id";
combo.valueField = String(valueField);
//设置数据源
if(Ext.isArray(dataStore))
{
combo.store = new Ext.data.SimpleStore({
fields: [valueField, displayField],
data:dataStore
});
}
else
{
combo.store = dataStore;
combo.mode = 'remote';
}
//设置默认值
if(defaultValue!=null)
combo.setValue(defaultValue);
//是否允许编辑
if(editable!=null && typeof(editable) == "boolean")
combo.editable = Boolean(editable);
return combo;
}
//#endregion
//#region Ext.form.TextArea
function TextArea(fName,fLabel,width,height,value)
{
/// <summary>
/// Ext.form.TextArea封装
/// </summary>
/// <param name="fName">name</param>
/// <param name="fLabel">fieldLabel</param>
/// <param name="width">width</param>
/// <param name="height">height</param>
/// <param name="value">value</param>
/// <returns>Ext.form.TextArea</returns>
var area = new Ext.form.TextArea();
if(fName!=null)
area.name = fName;
if(fLabel!=null)
area.fieldLabel = fLabel;
if(width!=null && typeof(width) == "number")
area.width = Number(width);
if(height!=null && typeof(height) == "number")
area.height = Number(height);
if(value!=null)
area.value = value;
return area;
}
//#endregion
//#region Ext.form.RadioGroup
function RadioGroup(fName,fLabel,items,columns)
{
/// <summary>
/// Ext.form.RadioGroup封装
/// 例子：new RadioGroup('Gender','性别',[['男','男',true],['女','女']])
/// <param name="fName">name</param>
/// <param name="fLabel">fieldLabel</param>
/// <param name="items">数据，格式如下:[['男','男',true],['女','女']]</param>
/// <param name="columns">设置几列自动排列，如果是1的话会按一行来显示</param>
/// </summary>
/// <returns>Ext.form.RadioGroup</returns>
var rg = new Ext.form.RadioGroup();
if(fName!=null)
rg.name = fName;
if(fLabel!=null)
rg.fieldLabel = fLabel;
if(columns!=null && typeof(columns) == "number")
rg.columns = Number(columns);
var rebuildiItems = new Array();
if(items !=null){
for(var i = 0 ;i<items.length; i++)
{
rebuildiItems[i] = {};
rebuildiItems[i].name = fName;
rebuildiItems[i].boxLabel = items[i][0];
rebuildiItems[i].inputValue = items[i][1];
if(items[i].length > 2 && typeof(items[i][2]) == "boolean")
rebuildiItems[i].checked = Boolean(items[i][2]);
}
//Ext.form.RadioGroup扩展
Ext.override(Ext.form.CheckboxGroup, {
setItems:function(data){
this.items = data;
}
});
if(rg.setItems){
rg.setItems(rebuildiItems);
}
}
return rg;
}
//#endregion
本文转自over140 51CTO博客，原文链接：http://blog.51cto.com/over140/586545，如需转载请自行联系原作者
