ExtJs 备忘录(2)—— Form表单(二) [ 控件封装 ](2)-阿里云开发者社区

开发者社区> 大数据> 正文
登录阅读全文

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

版权声明:本文内容由阿里云实名注册用户自发贡献,版权归原作者所有,阿里云开发者社区不拥有其著作权,亦不承担相应法律责任。具体规则请查看《阿里云开发者社区用户服务协议》和《阿里云开发者社区知识产权保护指引》。如果您发现本社区中有涉嫌抄袭的内容,填写侵权投诉表单进行举报,一经查实,本社区将立刻删除涉嫌侵权内容。

分享: