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

<% @ Page Language = " C# "  AutoEventWireup = " true "  CodeFile = " esayadd.aspx.cs "  Inherits = " esayadd "   %>

<! DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd" >
< html  xmlns ="http://www.w3.org/1999/xhtml" >
< head  runat ="server" >
     < title > 表单控件 </ title >
</ head >
< body >
     < form  id ="form1"  runat ="server" >
< script  type ="text/javascript" >
    Ext.onReady( function () {
    
        Ext.QuickTips.init();
        Ext.form.Field.prototype.msgTarget  =   ' side ' ;

         var  form1  =   new  Ext.FormPanel({
            layout:  ' form ' ,
            collapsible:  true ,
            autoHeight:  true ,
            frame:  true ,
            renderTo: Ext.getBody(),
            title:  ' <center style="curor:hand" onclick="window.location.reload();">表单控件</center> ' ,
            style:  ' margin-left:auto;margin-right:auto;width:500px;margin-top:8px; ' ,
             // 设置标签对齐方式
            labelAlign:  ' right ' ,
             // 设置标签宽
            labelWidth:  170 ,
             // 设置按钮的对齐方式
            buttonAlign: ' center ' ,
             // 默认元素属性设置
            defaults:{
                    width: 180
                },
            items: [
                 new  TextField( ' TextBox ' , ' 文本框控件 ' ),
                 new  NumberField( ' TextBoxNumber ' , ' 只允许输入数字 ' ),
                 new  ComboBox( ' DropDownList ' , ' 下拉框控件 ' ,[[ 1 , ' 男 ' ],[ 0 , ' 女 ' ]]),
                 new  DateField( ' DateControl ' , ' 日历控件 ' ),
                 new  RadioGroup( ' RadioItems ' , ' 单选控件 ' ,[[ ' 选我 ' , ' A ' , true ],[ ' 选我吧 ' , ' B ' ]]),
                 new  CheckboxGroup( ' CheckboxItems ' , ' 复选控件 ' ,[[ ' 香蕉 ' , ' A ' ],[ ' 苹果 ' , ' B ' ],[ ' 橘子 ' , ' C ' ],[ ' 桃子 ' , ' D ' ]], 3 ),
                 new  TextArea( ' textarea ' , ' 文本域控件 ' , null , 50 , ' 可以输好多字！ ' ),
                 new  TimeField( null , ' 时间控件 ' , 60 , ' H:i ' ),
                 new  FieldSet( ' 标签页 ' , ' 标签页 ' ,[ new  Panel( ' 标签页中的面板 ' , null , 50 , true )]),
                 new  HtmlEditor( ' htmleditor ' , ' 在线编辑器 ' , 260 , 100 )
            ],
            buttons: [{
                text:  " 保 存 "
                ,handler: function (){
                    MsgError( ' 错误 ' );
                    MsgWarning( ' 警告 ' );
                    MsgInfo( ' 提示 ' );
                    MsgConfirm( ' 确认 ' );
                }
            }, {
                text:  " 取 消 "
                ,handler: function (){
                    form1.form.reset();
                }
            }]
        });
    });
     </ script >
     </ form >
</ body >
</ html >

// / <reference path="../adapter/ext/ext-base.js" />
// / <reference path="../ext-all.js" />

// <><><><><><><><><><><><><><><><><><><><>
//  作 者：农民伯伯
//  邮 箱：over140@gmail.com
//  博 客：http://over140.cnblogs.com/
//  时 间：2009-9-16
// <><><><><><><><><><><><><><><><><><><><>

// #region Ext.form.TextField
function  TextField(fName,fLabel,defaultValue)
{
     // / <summary>
     // / Ext.form.TextField封装
     // / </summary>
     // / <param name="fName">name</param>
     // / <param name="fLabel">fieldLabel</param>
     // / <param name="defaultValue">默认值</param>
     // / <returns>Ext.form.TextField</returns>
     var  text  =   new  Ext.form.TextField();
    
     if (fName != null )
        text.name  =  fName;
    
     if (fLabel != null )
        text.fieldLabel  =  fLabel;
    
     // 设置默认值
     if (defaultValue  !=   null )
        text.setValue(defaultValue);
    
     return  text;
}
// #endregion

// #region Ext.form.TextField
function  NumberField(fName,fLabel,defaultValue,allowDecimals,allowNegative,maxValue,minValue)
{
     // / <summary>
     // / Ext.form.NumberField封装
     // / </summary>
     // / <param name="fName">name</param>
     // / <param name="fLabel">fieldLabel</param>
     // / <param name="defaultValue">默认值</param>
     // / <param name="allowDecimals">是否允许小数点</param>
     // / <param name="allowNegative">是否允许负数</param>
     // / <param name="maxValue">最大值</param>
     // / <param name="minValue">最小值</param>
     // / <returns>Ext.form.NumberField</returns>
     var  number  =   new  Ext.form.NumberField();
    
     if (fName != null )
        number.name  =  fName;
    
     if (fLabel != null )
        number.fieldLabel  =  fLabel;
    
     // 设置默认值
     if (defaultValue  !=   null   &&   typeof (defaultValue)  ==   " number " )
        number.setValue(defaultValue);
    
     // 设置是否允许小数点，默认(不设置)为不允许
     if (allowDecimals  !=   null   &&   typeof (allowDecimals)  ==   " boolean " )
        number.allowDecimals  =  Boolean(allowDecimals);
        
     // 设置是否允许负数，默认(不设置)为不允许
     if (allowNegative  !=   null   &&   typeof (allowNegative)  ==   " boolean " )
        number.allowNegative  =  Boolean(allowNegative);     
    
     // 设置最大值
     if (maxValue  !=   null   &&   typeof (maxValue)  ==   " number " )
        number.maxValue  =  Number(maxValue);     
        
     // 设置最小值
     if (minValue  !=   null   &&   typeof (minValue)  ==   " number " )
        number.minValue  =  Number(minValue);
    
     return  number;
}
// #endregion

// #region Ext.form.DateField
function  DateField(fName,fLabel,defaultValue,format,editable)
{
     // / <summary>
     // / Ext.form.DateField封装
     // / </summary>
     // / <param name="fName">name</param>
     // / <param name="fLabel">fieldLabel</param>
     // / <param name="defaultValue">Boolean:true为当前日期/String: 按'Y-m-d'格式，如2009-1-1</param>
     // / <param name="format">设置日期格式化字符串</param>
     // / <param name="editable">是否允许输入，还是只能选择日期</param>
     // / <returns>Ext.form.DateField</returns>
     var  date  =   new  Ext.form.DateField();
    
     if (fName != null )
        date.name  =  fName;
    
     if (fLabel != null )
        date.fieldLabel  =  fLabel;
    
     // 设置日期格式化字符串
     if (format  ==   null )
        format  =   ' Y-m-d ' ;
    date.format  =  format;
    
     // 设置默认日期
     if (defaultValue  !=   null )
    {
         if ( typeof (defaultValue)  ==   " boolean "   &&  Boolean(defaultValue)  ==   true )
        {
            date.setValue( new  Date().dateFormat(format));
        }
         else   if ( typeof (defaultValue)  ==   " string " )
        {
             var  strDate  = String(defaultValue).split( " - " );
             if (strDate.length == 3 )
                date.setValue( new  Date(strDate[ 0 ],parseInt(strDate[ 1 ]) - 1 ,strDate[ 2 ]).dateFormat(format));
        }
    }
    
     // 是否允许编辑
     if (editable == null )
        editable  =   false ;
     else   if ( typeof (editable)  ==   " boolean " )
        editable  =  Boolean(editable);
    
    date.editable  =  editable;
    
     return  date;
}
// #endregion

// #region Ext.form.TimeField

function  TimeField(fName,fLabel,increment,format)
{
     // / <summary>
     // / Ext.form.TimeField封装
     // / </summary>
     // / <param name="fName">name</param>
     // / <param name="fLabel">fieldLabel</param>
     // / <param name="increment">设置时间间隔，单位为分钟</param>
     // / <param name="format">格式化输出，支持格式如下："g:ia|g:iA|g:i a|g:i A|h:i|g:i|H:i|ga|ha|gA|h a|g a|g A|gi|hi|gia|hia|g|H"</param>
     // / <returns>Ext.form.TimeField</returns>
     var  time  =   new  Ext.form.TimeField();
    
     if (fName != null )
        time.name  =  fName;
    
     if (fLabel != null )
        time.fieldLabel  =  fLabel;
        
     // 设置时间间隔 默认为15分钟
     if (increment != null   &&   typeof (increment)  ==   " number " )
        time.increment  =  Number(increment);
        
     // 设置格式化输出 默认为 "g:i A"
     if (format  !=   null   &&   typeof (format)  ==   " string " )
        time.format  =  String(format);
    
     return  time;
}

// #endregion

// #region Ext.form.ComboBox
function  ComboBox(fName,fLabel,dataStore,defaultValue,displayField,valueField,editable)
{
     // / <summary>
     // / Ext.form.ComboBox封装
     // / </summary>
     // / <param name="fName">name</param>
     // / <param name="fLabel">fieldLabel</param>
     // / <param name="dataStore">数据源。本地模式，如[[1,'男'],[0,'女']]；远程模式，传入Ext.data.Store</param>
     // / <param name="defaultValue">默认值</param>
     // / <param name="displayField">选项的文本对应的字段</param>
     // / <param name="valueField">选项的值对应的字段</param>
     // / <param name="editable">是否可以输入,还是只能选择下拉框中的选项</param>
     // / <returns>Ext.form.ComboBox</returns>
     var  combo  =   new  Ext.form.ComboBox({
        mode:  ' local ' ,
        editable :  false ,
        typeAhead:  true ,
        triggerAction:  ' all ' ,
        selectOnFocus: true
    });
    
     if (fName != null )
        combo.name  =  fName;
    
     if (fLabel != null )
        combo.fieldLabel  =  fLabel;
        
     if (displayField == null   ||   typeof (displayField)  !=   " string " )
        displayField  =   " Name " ;
    combo.displayField  =  String(displayField);
        
     if (valueField == null   ||   typeof (valueField)  !=   " string " )
        valueField  =   " Id " ;
    combo.valueField  =  String(valueField);    
    
     // 设置数据源
     if (Ext.isArray(dataStore))
    {
        combo.store  =   new  Ext.data.SimpleStore({
            fields: [valueField, displayField],
            data:dataStore
        });
    }
     else
    {
        combo.store  =  dataStore;
        combo.mode  =   ' remote ' ;
    }
    
     // 设置默认值
     if (defaultValue != null )
        combo.setValue(defaultValue);
    
     // 是否允许编辑
     if (editable != null   &&   typeof (editable)  ==   " boolean " )
        combo.editable  =  Boolean(editable);  
    
     return  combo;
}
// #endregion

// #region Ext.form.TextArea

function  TextArea(fName,fLabel,width,height,value)
{
     // / <summary>
     // / Ext.form.TextArea封装
     // / </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.TextArea</returns>
     var  area  =   new  Ext.form.TextArea();

     if (fName != null )
        area.name  =  fName;
    
     if (fLabel != null )
        area.fieldLabel  =  fLabel;
        
     if (width != null   &&   typeof (width)  ==   " number " )
        area.width  =  Number(width);
        
     if (height != null   &&   typeof (height)  ==   " number " )
        area.height  =  Number(height);
        
     if (value != null )
        area.value  =  value;
        
     return  area;
}

// #endregion

// #region Ext.form.RadioGroup

function  RadioGroup(fName,fLabel,items,columns)
{
     // / <summary>
     // / Ext.form.RadioGroup封装
     // /     例子：new RadioGroup('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.RadioGroup</returns>
     var  rg  =   new  Ext.form.RadioGroup();
    
     if (fName != null )
        rg.name  =  fName;
    
     if (fLabel != null )
        rg.fieldLabel  =  fLabel;
    
     if (columns != null   &&   typeof (columns)  ==   " number " )
        rg.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 (rg.setItems){
            rg.setItems(rebuildiItems);
        }        
    }
    
     return  rg;
}

// #endregion

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