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

// #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的对象)或者重新写一个可能比较好！

本文转自over140 51CTO博客，原文链接：http://blog.51cto.com/over140/586547，如需转载请自行联系原作者