Form表单(一) [ 控件使用 ]

来源:互联网 发布:12306泄露数据库下载 编辑:程序博客网 时间:2024/05/21 06:24


using System;

usingSystem.Collections.Generic;

using System.Text;

usingSystem.Web.UI.HtmlControls;

using System.Reflection;

using ExtJS.Ext;

 

/// <summary>

/// 主要用于全局控制

/// </summary>

public class PageBase :System.Web.UI.Page

{

    #region Member Variable

 

    /// <summary>

    /// 路由搜索方法:search

    /// </summary>

    public const string ROUTE_METHOD_SEARCH ="search";

    /// <summary>

    /// 路由修改方法:modify

    /// </summary>

    public const string ROUTE_METHOD_MODIFY ="modify";

    /// <summary>

    /// 路由删除方法:remove

    /// </summary>

    public const string ROUTE_METHOD_REMOVE ="remove";

    /// <summary>

    /// 路由添加方法:add

    /// </summary>

    public const string ROUTE_METHOD_ADD ="add";

    /// <summary>

    /// 路由详情方法:detail

    /// </summary>

    public const string ROUTE_METHOD_DETAIL ="detail";

 

    #endregion

 

    #region Method

 

    #region override method

 

    /// <summary>

    /// 预初始化,在初始化页面OnInit事件前触发

    /// </summary>

    /// <paramname="e"></param>

    protected override void OnPreInit(EventArgse)

    {

        #region 权限认证

 

 

        #endregion

 

        #region 路由请求

 

        //路由请求

        string reqMethod =Request.QueryString["method"];

 

        if (!string.IsNullOrEmpty(reqMethod))

        {

            switch (reqMethod.ToLower())

            {

                case ROUTE_METHOD_MODIFY:

                    Response.Write(Modify());

                    break;

                case ROUTE_METHOD_SEARCH:

                    Response.Write(Search());

                    break;

                case ROUTE_METHOD_REMOVE:

                    Response.Write(Remove());

                    break;

                case ROUTE_METHOD_ADD:

                    Response.Write(Add());

                    break;

                case ROUTE_METHOD_DETAIL:

                    Response.Write(Detail());

                    break;

                default:

                    //反射

                    MethodInfo method =this.GetType().GetMethod(reqMethod);

                    if (method != null)

                    {

                       Response.Write(method.Invoke(this, null));

                    }

                    break;

            }

            End();

        }

 

        #endregion

 

        base.OnPreInit(e);

    }

 

    /// <summary>

    /// 初始化(OnInit)

    /// </summary>

    /// <paramname="e"></param>

    protected override void OnInit(EventArgs e)

    {

        #region ExtJS

 

        ExtHelper.Add(this.Header, this);

 

        #endregion

 

        base.OnInit(e);

    }

 

    #endregion

 

    #region virtual method

 

    /// <summary>

    /// 搜索

    /// </summary>

    /// <returns></returns>

    public virtual string Search()

    {

        return string.Empty;

    }

    /// <summary>

    /// 修改

    /// </summary>

    /// <returns></returns>

    public virtual string Modify()

    {

        return string.Empty;

    }

    /// <summary>

    /// 删除

    /// </summary>

    /// <returns></returns>

    public virtual string Remove()

    {

        return string.Empty;

    }

    /// <summary>

    /// 添加

    /// </summary>

    /// <returns></returns>

    public virtual string Add()

    {

        return string.Empty;

    }

    /// <summary>

    /// 详情

    /// </summary>

    /// <returns></returns>

    public virtual string Detail()

    {

        return string.Empty;

    }

 

    /// <summary>

    /// 可以覆盖做其他处理

    /// Response.End();

    /// </summary>

    public virtual void End()

    {

        Response.End();

    }

 

    #endregion

 

    #endregion

}

这个PageBase类主要做以下三个工作:

a).  权限判断

这里权限判断是空的,大家实际项目中可以加上或者与现在项目进行集成。

b).  ExtJS必须的资源文件加载

在OnInit页面的HtmlHead中按顺序加载ext-all.css、ext-base.js、ext-all.js、ext-lang-zh_CN.js

c).  路由请求

处理Ext的GET/POST请求,模拟服务器端控件的事件。

小技巧:

                       Request.QueryString["method"]中method参数名称是忽略大小写的。

 

using System;

usingSystem.Collections.Generic;

using System.Text;

usingSystem.Configuration;

usingSystem.Web.UI.HtmlControls;

 

namespace ExtJS.Ext

{

    public sealed class ExtHelper

    {

        #region MemberVariable

 

        public static readonly string EXT_BASE= ConfigurationManager.AppSettings["EXT_BASE"] ??"/js/ext";

        /// <summary>

        /// ext-all.css

        /// </summary>

        public static readonly stringEXT_CSS_ALL = EXT_BASE + "/resources/css/ext-all.css";

        /// <summary>

        /// ext-all.js

        /// </summary>

        public static readonly stringEXT_JS_ALL = EXT_BASE + "/ext-all.js";

        /// <summary>

        /// ext-base.js

        /// </summary>

        public static readonly stringEXT_JS_BASE = EXT_BASE + "/adapter/ext/ext-base.js";

        /// <summary>

        /// ext-lang-zh_CN.js

        /// </summary>

        public static readonly stringEXT_JS_LANGUAGE = EXT_BASE + "/source/locale/ext-lang-zh_CN.js";

        /// <summary>

        /// EasyExt.js

        /// </summary>

        public static readonly stringEXT_JS_EASYEXT = EXT_BASE + "/plugins/EasyExt.js";

 

        /// <summary>

        /// 0    ext-all.css

        /// 1    ext-base.js

        /// 2    ext-all.js

        /// 3    ext-lang-zh_CN.js

        /// 4    EasyExt.js

        /// </summary>

        private static readonlyIList<HtmlGenericControl> extresource;

 

        #endregion

 

        #region Constructors

 

        static ExtHelper()

        {

            extresource = newList<HtmlGenericControl>();

 

            //ext-all.css

            HtmlGenericControl css_ext_all =new HtmlGenericControl("link");

           css_ext_all.Attributes.Add("type", "text/css");

           css_ext_all.Attributes.Add("rel", "stylesheet");

           css_ext_all.Attributes.Add("href", EXT_CSS_ALL);

            extresource.Add(css_ext_all);

 

            //ext-base.js

            HtmlGenericControl js_ext_base =new HtmlGenericControl("script");

           js_ext_base.Attributes.Add("type","text/javascript");

           js_ext_base.Attributes.Add("src", EXT_JS_BASE);

            extresource.Add(js_ext_base);

 

            //ext-all.js

            HtmlGenericControl js_ext_all = newHtmlGenericControl("script");

           js_ext_all.Attributes.Add("type","text/javascript");

           js_ext_all.Attributes.Add("src", EXT_JS_ALL);

            extresource.Add(js_ext_all);

 

            //ext-lang-zh_CN.js

            HtmlGenericControl js_ext_lang =new HtmlGenericControl("script");

           js_ext_lang.Attributes.Add("type","text/javascript");

           js_ext_lang.Attributes.Add("src", EXT_JS_LANGUAGE);

            extresource.Add(js_ext_lang);

 

            //EasyExt.js

            HtmlGenericControl js_ext_easyext =new HtmlGenericControl("script");

           js_ext_easyext.Attributes.Add("type","text/javascript");

           js_ext_easyext.Attributes.Add("src", EXT_JS_EASYEXT);

            extresource.Add(js_ext_easyext);

 

        }

 

        #endregion

 

        #region Method

 

        /// <summary>

        /// 添加Ext资源文件

        /// </summary>

        /// <paramname="head"></param>

        /// <paramname="page"></param>

        public static void Add(HtmlHead head,System.Web.UI.Page page)

        {

            if (head != null)

            {

                if (extresource != null)

                {

                    //head.Controls[0]为title

                    head.Controls.AddAt(1,extresource[0]);

                    head.Controls.AddAt(2,extresource[1]);

                    head.Controls.AddAt(3,extresource[2]);

                    head.Controls.AddAt(4,extresource[3]);

                   // head.Controls.AddAt(5,extresource[4]);

                }

            }

        }

 

        #endregion

    }

}

根据配置文件指定Ext路径来加载ext的css和js文件,将来可方便的升级版本之用,仅需修改配置文件即可完成升级,但是需要注意ext并没有完全100%的向下兼容!

 

<%@ PageLanguage="C#" AutoEventWireup="true"CodeFile="add.aspx.cs" Inherits="add" %>

 

<!DOCTYPE html PUBLIC"-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<htmlxmlns="http://www.w3.org/1999/xhtml">

<headrunat="server">

    <title>表单控件</title>

</head>

<body>

    <form id="form1"runat="server">

<scripttype="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: '<centerstyle="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: [{

                fieldLabel: '文本框控件',

                name: 'TextBox',

                xtype: 'textfield'

                //,readOnly : true            //只读

                //,emptyText    :'请输入数据'   //为空时显示的文本,注意不是value

            },{

                fieldLabel: '只允许输入数字'

                ,name:'TextBoxNumber'

                ,xtype:'numberfield'

                //,allowDecimals: false     // 允许小数点

                //,allowNegative: false,     // 允许负数

                //,maxValue:1000      //最大值

                //,minValue:0            //最小值

            },{

                fieldLabel: '下拉框控件',

                name: 'DropDownList',

                xtype: 'combo',

                //本地数据源  local/remote

                mode:'local',

                //设置为选项的text的字段

                displayField:"Name",      

                //设置为选项的value的字段

                valueField: "Id",

                //是否可以输入,还是只能选择下拉框中的选项

                editable : false,

                typeAhead: true,

                //必须选择一项

                //forceSelection: true,

                //输入部分选项内容匹配的时候显示所有的选项

                triggerAction: 'all',

                //selectOnFocus:true,

                //数据

                store:newExt.data.SimpleStore({

                    fields: ['Id', 'Name'],

                    data: [  [1,'男'],[0,'女'] ]

                })

            }, {

                fieldLabel: '日历控件',

                xtype: 'datefield',

                name: 'DateControl',

                format: "Y-m-d",

                editable : false

                //, 默认当前日期

                //value:newDate().dateFormat('Y-m-d')

            },{

                fieldLabel: '单选控件'

                ,xtype:'radiogroup'

                ,name:'Radios'

                ,items:[

                    {name :'RadioItems',boxLabel:'选我',inputValue:'1',checked:true},

                    {name :'RadioItems',boxLabel:'选我吧',inputValue:'0'}

                ]

            },{

                fieldLabel: '复选控件'

                ,xtype:'checkboxgroup'

                ,name:'Checkboxs'

                //columns属性表示用2行来显示数据

                ,columns:2

                ,items:[

                    {name :'CheckboxItems',boxLabel:'香蕉',inputValue:'A'},

                    {name :'CheckboxItems',boxLabel:'苹果',inputValue:'B'},

                    {name :'CheckboxItems',boxLabel:'橘子',inputValue:'C'},

                    {name :'CheckboxItems',boxLabel:'桃子',inputValue:'D'}

                ]

            },{

                fieldLabel: '文本域控件'

                ,xtype:'textarea'

                ,value:'可以输好多字!'

                ,height:50

            },{

                fieldLabel: '时间控件'

                ,xtype:'timefield'

                //格式化输出 默认为 "g:i A"

                //"g:ia|g:iA|g:i a|g:iA|h:i|g:i|H:i|ga|ha|gA|h a|g a|g A|gi|hi|gia|hia|g|H"

                ,format:'H:i'

                //时间间隔(分钟)

                ,increment: 60

            },{

                fieldLabel: '标签页'

                ,xtype:'fieldset'

                ,title: '标签页'

                ,autoHeight:true

                ,items :[{

                    xtype: 'panel',

                    title: '标签页中的面板',

                    frame: true,

                    height: 50

                }]

            },{

                fieldLabel: '在线编辑器'

                ,xtype:'htmleditor'

                ,width:260

                ,height:100

                //以下为默认选项,其他请参照源代码

                //,enableColors: false

                //,enableFormat : true

                //,enableFontSize : true

                //,enableAlignments : true

                //,enableLists : true

                //,enableSourceEdit : true

                //,enableLinks : true

                //,enableFont : true

            }],

            buttons: [{

                text: "保 存"

                ,handler:function(){

                    MsgInfo('保存');

                }

            }, {

                text: "取 消"

                ,handler:function(){

                    form1.form.reset();

                }

            }]

        });

 

        function MsgInfo(str_msg)

        {

            Ext.MessageBox.show({

                title: '提示',

                msg: str_msg,

                width: 400,

                icon:Ext.MessageBox.INFO,

                buttons: Ext.MessageBox.OK

            });

        }

    });

    </script>

    </form>

</body>

</html>

这里并没有引入Ext相关的js、css文件,这个都在PageBase中处理加载了,这样只要需要用Ext的页面继承PageBase即可,也方便大家将来升级ext,只需要改下配置文件即可。

 

 

三、对ExtJS的一点看法

就是上面那段代码得以让效果图中的那副美图与大家见面,虽然对于美工来讲并非难事,可对于非美工的我是极尽享受的,且兼容我当前电脑中三种浏览器IE6、Firefox3.5.2、谷歌浏览器2.0。

在 使用IHttpHandler做权限控制中曾经提到过用PageBase中做权限控制,在ExtJs应用中也能很好的结合起来使用,节省了代码、解决了每次引用以及按顺序引用等问题,且便于版本迁移。

关于ExtJS慢这个问题。首先从适用性方面,如果你对于性能要求很高,基本上可以放弃,这本身就是富客户的应用,适合一些内部的管理系统、后台,对没有美工的小公司有很大的帮助;性能方面,大家可以google下关键字:“extjs性能优化”,有相关的文件来建议你改进它的性能,从ext资源文件加载方面,可以使用客户端缓存技术,比如你可以把这个文件放到登录的页面里面,然后客户端缓存起来,具体可以参照js客户端缓存;还需要特别注意的是需要你在代码中指定Ext.BLANK_IMAGE_URL,因为他默认会去extjs的官方网站下载s.gif图片,这里我把已经它加在了ext-lang-zh_CN.js文件里。

 

 

原创粉丝点击