//#region Ext.form.CheckboxGroup
function CheckboxGroup(fName,fLabel,items,columns)
{
/// <summary>
/// Ext.form.CheckboxGroup封装
/// 例子:new CheckboxGroup('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.CheckboxGroup</returns>
var cg = new Ext.form.CheckboxGroup();
if(fName!=null)
cg.name = fName;
if(fLabel!=null)
cg.fieldLabel = fLabel;
if(columns!=null && typeof(columns) == "number")
cg.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(cg.setItems){
cg.setItems(rebuildiItems);
}
}
return cg;
}
//#endregion
//#region Ext.form.HtmlEditor
function HtmlEditor(fName,fLabel,width,height,value)
{
/// <summary>
/// Ext.form.HtmlEditor封装
/// </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.HtmlEditor</returns>
var editor = new Ext.form.HtmlEditor();
if(fName!=null)
editor.name = fName;
if(fLabel!=null)
editor.fieldLabel = fLabel;
if(width!=null && typeof(width) == "number")
editor.width = Number(width);
if(height!=null && typeof(height) == "number")
editor.height = Number(height);
if(value!=null)
editor.value = value;
return editor;
}
//#endregion
//#region Ext.form.Hidden
function Hidden(fName,value)
{
/// <summary>
/// Ext.form.Hidden封装
/// </summary>
/// <param name="fName">name</param>
/// <param name="value">value</param>
/// <returns>Ext.form.Hidden</returns>
var hidden = new Ext.form.Hidden();
if(fName!=null)
hidden.name = fName;
if(value!=null)
hidden.value = value;
return hidden;
}
//#endregion
//#region Ext.form.Checkbox
function Checkbox(fName,fLabel,value,boxLabel,inputValue,checked)
{
/// <summary>
/// Ext.form.Checkbox封装
/// </summary>
/// <param name="fName">name</param>
/// <param name="fLabel">fieldLabel</param>
/// <param name="value">value</param>
/// <param name="boxLabel"></param>
/// <param name="inputValue"></param>
/// <param name="checked"></param>
/// <returns>Ext.form.Checkbox</returns>
var checkbox = new Ext.form.Checkbox();
if(fName!=null)
checkbox.name = fName;
if(fLabel!=null)
checkbox.fieldLabel = fLabel;
if(value!=null)
checkbox.value = value;
if(boxLabel!=null && typeof(boxLabel) == "string")
checkbox.boxLabel = String(boxLabel);
if(inputValue!=null)
checkbox.inputValue = inputValue;
if(checked!=null && typeof(checked) == "boolean")
checkbox.checked = Boolean(checked);
return checkbox;
}
//#endregion
//#region Ext.form.FieldSet
function FieldSet(fName,title,items)
{
/// <summary>
/// Ext.form.FieldSet封装
/// </summary>
/// <param name="fName">fieldLabel</param>
/// <param name="title">title</param>
/// <param name="items">数据源</param>
/// <returns>Ext.form.FieldSet</returns>
var fieldset = new Ext.form.FieldSet();
if(fName!=null)
fieldset.fieldLabel = fName;
if(title!=null && typeof(title) == "string")
fieldset.title = String(title);
if(items!=null)
fieldset.add(items);
return fieldset;
}
//#endregion
//#region Ext.Panel
function Panel(title,width,height,frame)
{
/// <summary>
/// Ext.Panel封装
/// </summary>
/// <param name="title">name</param>
/// <param name="width">value</param>
/// <param name="height">height</param>
/// <param name="frame">frame</param>
/// <returns>Ext.Panel</returns>
if(title ==null)
title = ''; //默认值 如果为此值则不显示标题栏
var panel = new Ext.Panel({
title:title
});
if(width!=null && typeof(width) == "number")
panel.width = Number(width);
if(height!=null && typeof(height) == "number")
panel.height = Number(height);
if(frame!=null && typeof(frame) == "boolean")
panel.frame = Boolean(frame);
return panel;
}
//#endregion
//#region MessageBox
function MsgConfirm(msg,title,fn,width)
{
/// <summary>
/// Ext.Msg.show 问题确认框
/// </summary>
/// <param name="msg">设置要输出的信息</param>
/// <param name="title">设置确认框标题</param>
/// <param name="fn">设置回调fn函数</param>
/// <param name="width">设置确认框宽</param>
/// <returns>Ext.Msg.show</returns>
if(msg ==null)
msg = "";
if(title == null || typeof(title) != "string")
title = "问题";
if(width == null || typeof(width) != "number")
width = 400;
if(fn == null || typeof(fn) != "function")
fn = new function(){};
return Ext.Msg.show({
title: title,
msg: msg,
width: width,
icon:Ext.MessageBox.QUESTION,
buttons: Ext.MessageBox.YESNO,
fn:fn
});
}
function MsgInfo(msg,title,width)
{
/// <summary>
/// Ext.Msg.show 信息提示框
/// </summary>
/// <param name="msg">设置要输出的信息</param>
/// <param name="title">设置标题</param>
/// <param name="width">设置提示框宽</param>
/// <returns>Ext.Msg.show</returns>
if(msg ==null)
msg = "";
if(title == null || typeof(title) != "string")
title = "提示";
if(width == null || typeof(width) != "number")
width = 400;
return Ext.MessageBox.show({
title: title,
msg: msg,
width: width,
icon:Ext.MessageBox.INFO,
buttons: Ext.MessageBox.OK
});
}
function MsgError(msg,title,width)
{
/// <summary>
/// Ext.Msg.show 错误提示框
/// </summary>
/// <param name="msg">设置要输出的信息</param>
/// <param name="title">设置标题</param>
/// <param name="width">设置提示框宽</param>
/// <returns>Ext.Msg.show</returns>
if(msg ==null)
msg = "";
if(title == null || typeof(title) != "string")
title = "错误";
if(width == null || typeof(width) != "number")
width = 400;
return Ext.MessageBox.show({
title: title,
msg: msg,
width: width,
icon:Ext.MessageBox.ERROR,
buttons: Ext.MessageBox.OK
});
}
function MsgWarning(msg,title,width)
{
/// <summary>
/// Ext.Msg.show 警告提示框
/// </summary>
/// <param name="msg">设置要输出的信息</param>
/// <param name="title">设置标题</param>
/// <param name="width">设置提示框宽</param>
/// <returns>Ext.Msg.show</returns>
if(msg ==null)
msg = "";
if(title == null || typeof(title) != "string")
title = "警告";
if(width == null || typeof(width) != "number")
width = 400;
return Ext.MessageBox.show({
title: title,
msg: msg,
width: width,
icon:Ext.MessageBox.WARNING,
buttons: Ext.MessageBox.OK
});
}
//#endregion
代码说明:
这里封装了常用的Form表单控件、Panel控件、以及弹出消息提示的封装。这里为什么要封装MSG框呢,根据我使用ext3.0rc2的经验,如果不指定MSG宽且MSG字符串过少的话可能出现对话框残缺的情况,不知道是不是它的BUG,3.0正式版好像没有这情况,但还是封装了,这样能兼容前面的版本。
三、说明
1. 写好封装js后,还需要把它加入到head里面,以便其他地方也能方便使用,注意上篇文章ExtHelper.cs我注释的部分,解除注释即可。注意这里文件名称可能有变化,对应修改即可。
2. 封装的好处在贴esayadd.aspx代码后面的说明里面有说,对于动辄几百行的JS代码,这样还是能有效的减少代码量,也不容易出错。一旦封装好后就不要轻易修改了,如果要修改也必须保证只能增加参数,这样才能保证你前面写的代码调用没有问题,对于特殊的复杂的设置可以在封装的基础上继续设置(你可以看到return 都是Ext的对象)或者重新写一个可能比较好!
四、下载
1. ExtJS2009-9-20.rar
结束语
有点忙,今天不加班,所以也赶紧把这系列尽早写完吧: )