前言
　　ExtJS接触至今已有4个月(5.1 - 9.1)，小有心得，由于公司短期内并没有打算采用，所以备忘之以备他日之需。虽然网上资料不少，但学起来仍感费劲，所以还是想以自己的方式来与众分享。

系列
　　1.　　ExtJs 备忘录（1）—— Form表单（一） [ 控件使用 ]

版本
　　Ext 3.0.0

正文
　　一、效果图
　　　　先用美图勾引那些驻足观望之人：
　　　　

　　二、代码讲解
　　　　如果项目中大量采用ExtJS做前端，我建议采用PageBase方式来引用和使用它。
　　　　2.1　　目录结构
　　　　　　
　　　　　　　　项目中使用Ext并不需要把整个Ext拷贝到项目中，只需要把resources整个目录和如下几个人间拷贝到项目中即可：
　　　　　　　　ext-3.0.0\adapter\ext\ext-base.js
　　　　　　　　ext-3.0.0\ext-all.js
　　　　　　　　ext-3.0.0\src\locale\ext-lang-zh_CN.js

　　　　2.1　　PageBase.cs

using System;
using System.Collections.Generic;
using System.Text;
using System.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>
    /// <param name="e"></param>
    protected override void OnPreInit(EventArgs e)
    {
        #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>
    /// <param name="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参数名称是忽略大小写的。

　　　　2.2　　ExtHelper.cs

using System;
using System.Collections.Generic;
using System.Text;
using System.Configuration;
using System.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 string EXT_CSS_ALL = EXT_BASE + "/resources/css/ext-all.css";
        /// <summary>
        /// ext-all.js
        /// </summary>
        public static readonly string EXT_JS_ALL = EXT_BASE + "/ext-all.js";
        /// <summary>
        /// ext-base.js
        /// </summary>
        public static readonly string EXT_JS_BASE = EXT_BASE + "/adapter/ext/ext-base.js";
        /// <summary>
        /// ext-lang-zh_CN.js
        /// </summary>
        public static readonly string EXT_JS_LANGUAGE = EXT_BASE + "/source/locale/ext-lang-zh_CN.js";
        /// <summary>
        /// EasyExt.js
        /// </summary>
        public static readonly string EXT_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 readonly IList<HtmlGenericControl> extresource;

#endregion

#region Constructors

static ExtHelper()
        {
            extresource = new List<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 = new HtmlGenericControl("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>
        /// <param name="head"></param>
        /// <param name="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%的向下兼容！

　　　　2.3　　add.aspx
　　　　　　add页面注意是继承PageBase，由于本文仅使用控件，而cs内代码为空，所以仅贴页面代码：

<%@ Page Language="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">
<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" οnclick="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:new Ext.data.SimpleStore({
                    fields: ['Id', 'Name'],
                    data: [  [1,'男'],[0,'女'] ]
                })
            }, {
                fieldLabel: '日历控件',
                xtype: 'datefield',
                name: 'DateControl',
                format: "Y-m-d",
                editable : false
                //, 默认当前日期
                //value:new Date().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:i A|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文件里。

　　四、下载
　　　　ExtJS2009-9-6

结束语
　　如果心动了，你也来试试吧 : )下篇文章将完成一个完整的表单提交，包括验证和一些对ExtJS的封装。

ExtJs 备忘录（1）—— Form表单（一） [ 控件使用 ]相关推荐

  1. python嵌套html开发gui_python GUI库图形界面开发之PyQt5表单布局控件QFormLayout详细使用方法与实例...

    PyQt5布局控件QFormLayout简介 QFormLayout是label-field式的表单布局,顾明思议,就是实现表单方式的布局,表单是提示用户进行交互的一种模式,主要有两列组成,第一列用于 ...

  2. asp.net夜话之三：表单和控件

    在今天我主要要介绍的有如下知识点: HTML表单的提交方式 HTM控件 获取HTML表单内容 乱码问题 SQL注入 服务器端表单 HTML服务器控件 HTML表单的提交方式对于一个普通HTML表单来说 ...

  3. H5--新增表单元素控件属性事件

    H5网站重构 先简单回顾一下H5新标签:结构性标签.功能性标签 结构性标签:负责web上下文件结构的定义 功能性标签:功能性内容的表达 表单-新增控件类型 HTML5 增加了多个新的表单输入类型,这些 ...

  4. Blazor编辑表单状态控件

    目录 概述--Blazor EditFormState控件 代码和示例 Blazor编辑设置 EditForm EditContext FieldIdentifier 输入控件 重新审视EditCon ...

  5. 自定义表单picturecontrol控件使用

    一.后台配置 1)资料附件维护 定义附件类别和名称,以及属性: 2)附件文件夹配置 配置附件在Web服务器上存储的物理路径: 物理路径 二.存储表注意事项 1)Race Form Studio的数据库 ...

  6. Coolite Toolkit学习笔记九：表单布局控件FormLayout与FromPanel

    FormLayout在我们平时开发中使用频率非常高,使用它可快速.方便的实现表单界面布局,以及使用一些其他控件自身的特性组合起来实现丰富强大的UI界面.下面通过一个简单示例来体验FormLayout的 ...

  7. 驰骋工作流引擎表单设计控件-字段类控件(2)

    2019独角兽企业重金招聘Python工程师标准>>> Technorati Tags: 开源工作流引擎, 驰骋.net工作流引擎, 开源表单引擎, ccform, ccflow, ...

  8. VBA，表单及其控件，如何取得表单控件的名字，大小写注意

    1 如何取得表单控件的名字? 1.1 问题的由来 表单控件和 表单的 activeX控件,以及窗体控件不同 表单控件不能直接编写其相关代码,也看不到其属性栏 但是可以直接绑定一个sub 但是问题来了: ...

  9. php表单常用控件,常用表单控件元素(一)

    表单是网页中数据采集的工具 包含: (一)表单标签 (二)表单域 (三)表单按钮 表单标签 的属性 1 name 表单的名称 2 action 当表单提交时向何处发送表单数据 3 target 在何处 ...

  10. H3 BPM MVC表单SheetOffice控件使用分享

    SheetOffice控件使用分享 1. 控件属性及说明 Template:套用的模板目录(套用模板会使用到) 模板中必须包含书签: a. Body,这个是在代码中写死了的,是把当前文档的内容插入到模 ...

最新文章

  1. 2021-2027年中国玩具行业市场研究及前瞻分析报告
  2. 送100本书！涵盖Java 、大数据、推荐系统、机器学习、黑客、数据库、手游、少儿编程等！免费包邮！...
  3. Websphere设备、企业部署应用程序 【应用】
  4. 点击预览，有时可以打开，有时不可以
  5. xp计算机属性打不开,xp系统我的电脑右键属性打不开怎么办
  6. 190829课堂母版与子版
  7. 微课|中学生可以这样学Python（8.3节）：递推算法例题讲解
  8. ssm的餐饮点餐系统源码
  9. 小米游戏本bios更新_小米笔记本 Pro 15.6 独显MX150 版本升级BIOS.2019年1月7日.2020年5月8日补充结果.完本！...
  10. Transaction
  11. iphone5计算机没有了,电脑无法识别iphone5怎么解决
  12. [buuctf.reverse] 144_[XMAN2018排位赛]easyvm 147_[XNUCA2018]Code_Interpreter
  13. javascript满天小星星
  14. 十二星座物语，女生最喜欢的星座性格【1】
  15. 将PSD文件导出图层
  16. c语言中调用函数fn,C语言常见的函数调用
  17. 【慕课网】Web学习笔记———CSS3 （一）
  18. 分时系统和实时系统的区别
  19. 关于上海数据中心新政PUE小于1.3的节能对策解读-孙长青
  20. 2021上半年微信视频号直播的简单总结

热门文章

  1. dojo 加载自定义module的路径问题
  2. Android 5.0有哪些变化
  3. 在Red Hat或CentOS上安装 MongoDB-4.x 社区版
  4. oracle静默安装实例和静默删除实例
  5. 分布式面试 - 分布式锁的常见问题
  6. 如何在Red Hat Linux上安装和配置FreeIPA
  7. ajax header的bearer token验证
  8. 水一贴，用任何一种语言导出oracle存储过程（视图）脚本
  9. leetcode 删除排序数组中的重复项
  10. 【MATLAB】主要功能