ExtJs 备忘录(1)—— Form表单(一) [ 控件使用 ](1)

简介:

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

 

 二、代码讲解
如果项目中大量采用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 > ();

 

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

相关文章
|
6月前
|
Web App开发 前端开发 JavaScript
SAP UI5 控件库里 Form 控件和 SimpleForm 控件的区别和联系讲解试读版
SAP UI5 控件库里 Form 控件和 SimpleForm 控件的区别和联系讲解试读版
33 0
|
JavaScript 前端开发 索引
前端备忘录--JQuery选择器
基本选择器   基本选择器是最常用的选择器,也是最简单的选择器. $("#test") //选取id为test的元素 $(".test") //选取class为test的元素 $("div.
1096 0