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，如需转载请自行联系原作者

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

热门文章

最新文章

相关电子书