开发者社区> 科技小先锋> 正文
阿里云
为了无法计算的价值
打开APP
阿里云APP内打开

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

简介:
+关注继续查看

正文
一、使用封装后Ext表单控件
esayadd.aspx
 

<%@ 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>

    代码说明:
请大家比较ExtJs 备忘录(1)—— Form表单(上) [ 控件使用 ]中的add.aspx与本文esayadd.aspx,封装带来的简洁、易用和减少使用控件出错几率是显而易见的。需要注意的是,这里只是做了简单的封装,因为Ext表单控件属性太多,起码也有10个以上,这里不可能把所有的属性都列为函数参数,所以根据实际项目情况进行调整,可以在这个现有函数基础上补上常用的参数设置,只要能满足80%-90%的情况价值就体现了 : )

二、Ext表单控件封装
easy-ext.js    
 

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

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

相关文章
SSM中(Spring-SpringMVC-Mybatis)(二:整合)
使用Maven整合一个SSM,当然要配有Maven环境,Maven的环境配置自行百度,挺好配的 创建一个Maven项目以后,目录结构如图所示:   然后就是各部分配置:   首先pom导入依赖jar包: 1 3 4.
1206 0
6963
文章
0
问答
文章排行榜
最热
最新
相关电子书
更多
低代码开发师(初级)实战教程
立即下载
阿里巴巴DevOps 最佳实践手册
立即下载
冬季实战营第三期:MySQL数据库进阶实战
立即下载