ExtJs 备忘录（2）—— Form表单（二） [ 控件封装 ]

//#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

结束语
　　有点忙，今天不加班，所以也赶紧把这系列尽早写完吧:  )