Ext.Net系列:一安装与使用

  前言：

      笔者在开发过程中一直困扰与页面样式及其用户体验等问题。为了解决这些问题从而提高系统开发效率和增强人机交互能力，所以在网上一直寻找解决方案。

     最终决定使用Ext.net进行开发。

 Ext.Net介绍：

 　　是一组开源的Asp.net（WebForm,MVC）组件。基于Ext.Js库开发，含有100多个工具，如TextBox,Combox，Button，ToolBar，StateBar，Panel，TabPanel，ExplorerBar,MenuBar,PictureBox 等多种控件并支持Ajax无刷新效果。

　　下载地址：http://www.ext.net/download/

　　示例地址：http://examples.ext.net/

　　环境：VS2005+、服务器.NET Framework3.5+、网站系统.net 2.0+

Ext.Net特点：

　　1.多种控件。能快速的创建高视觉的用户界面

 　 2.300多个示例，能让你快速上手

　  3.丰富的Ext.js API提供支持

　  4开源闭源双协议

Ext.Net安装和使用

1.下载最新版本

2.打开下载文件，将包含以下文件：

Ext.Net.dll
Ext.Net.Utilities.dll
Ext.Net.xml
Newtonsoft.Json.dll
Newtonsoft.Json.xml

 3.打开  Visual Studio,创建C#网站项目

• 打开菜单创建网站
• 弹出"创建网站"窗口，选择Asp.net 网站,位置：文件系统, 语言:Visual C# 
• 点击确定

4.首次使用时

• 在工具箱中右键点击"添加选项卡"
• 选项卡名称Ext
• 在该选项卡中，右键点击“选择项”
• 弹出"选择箱项"对话框，点击“浏览” ，双击选择下载文件目录下的"Ext.Net.dll"
• 点击“确定”，将在Ext选项卡中出现多个控件

5.配置Web.Config

  
   
   
   
   

   
 
   
 
   
    
    
    
    <?
   
 
   
 
   
    
    
    
    xml version="1.0" encoding="utf-8"
   
 
   
 
   
    
    
    
    ?>
   
 
   
 
   
    
    
    
    

   
 
   
 
   
    
    
    
    <
   
 
   
 
   
    
    
    
    configuration
   
 
   
 
   
    
    
    
    >
   
 
   
 
   
    
    
    
    
 
   
 
   
 
   
    
    
    
    <
   
 
   
 
   
    
    
    
    configSections
   
 
   
 
   
    
    
    
    >
   
 
   
 
   
    
    
    
    
 
   
 
   
 
   
    
    
    
    <
   
 
   
 
   
    
    
    
    section 
   
 
   
 
   
    
    
    
    name
   
 
   
 
   
    
    
    
    ="extnet"
   
 
   
 
   
    
    
    
     type
   
 
   
 
   
    
    
    
    ="Ext.Net.GlobalConfig"
   
 
   
 
   
    
    
    
     requirePermission
   
 
   
 
   
    
    
    
    ="false"
   
 
   
 
   
    
    
    
     
   
 
   
 
   
    
    
    
    />
   
 
   
 
   
    
    
    
    

   
 
   
 
   
    
    
    
    <
   
 
   
 
   
    
    
    
    configSections
   
 
   
 
   
    
    
    
    >
   
 
   
 
   
    
    
    
    

   
 
   
 
   
    
    
    
    <
   
 
   
 
   
    
    
    
    extnet 
   
 
   
 
   
    
    
    
    />
   
 
   
 
   
    
    
    
    
 
   
 
   
 
   
    
    
    
    <!--
   
 
   
 
   
    
    
    
     
 The following system.web section is only requited for running ASP.NET AJAX under Internet
 Information Services 6.0 (or earlier). This section is not necessary for IIS 7.0 or later.
 
   
 
   
 
   
    
    
    
    -->
   
 
   
 
   
    
    
    
    
 
   
 
   
 
   
    
    
    
    <
   
 
   
 
   
    
    
    
    system.web
   
 
   
 
   
    
    
    
    >
   
 
   
 
   
    
    
    
    
 
   
 
   
 
   
    
    
    
    <
   
 
   
 
   
    
    
    
    httpHandlers
   
 
   
 
   
    
    
    
    >
   
 
   
 
   
    
    
    
    
 
   
 
   
 
   
    
    
    
    <
   
 
   
 
   
    
    
    
    add 
   
 
   
 
   
    
    
    
    path
   
 
   
 
   
    
    
    
    ="*/ext.axd"
   
 
   
 
   
    
    
    
     verb
   
 
   
 
   
    
    
    
    ="*"
   
 
   
 
   
    
    
    
     type
   
 
   
 
   
    
    
    
    ="Ext.Net.ResourceHandler"
   
 
   
 
   
    
    
    
     validate
   
 
   
 
   
    
    
    
    ="false"
   
 
   
 
   
    
    
    
     
   
 
   
 
   
    
    
    
    />
   
 
   
 
   
    
    
    
    
 
   
 
   
 
   
    
    
    
    </
   
 
   
 
   
    
    
    
    httpHandlers
   
 
   
 
   
    
    
    
    >
   
 
   
 
   
    
    
    
    
 
   
 
   
 
   
    
    
    
    <
   
 
   
 
   
    
    
    
    httpModules
   
 
   
 
   
    
    
    
    >
   
 
   
 
   
    
    
    
    
 
   
 
   
 
   
    
    
    
    <
   
 
   
 
   
    
    
    
    add 
   
 
   
 
   
    
    
    
    name
   
 
   
 
   
    
    
    
    ="DirectRequestModule"
   
 
   
 
   
    
    
    
     type
   
 
   
 
   
    
    
    
    ="Ext.Net.DirectRequestModule, Ext.Net"
   
 
   
 
   
    
    
    
     
   
 
   
 
   
    
    
    
    />
   
 
   
 
   
    
    
    
    
 
   
 
   
 
   
    
    
    
    </
   
 
   
 
   
    
    
    
    httpModules
   
 
   
 
   
    
    
    
    >
   
 
   
 
   
    
    
    
    
 
   
 
   
 
   
    
    
    
    </
   
 
   
 
   
    
    
    
    system.web
   
 
   
 
   
    
    
    
    >
   
 
   
 
   
    
    
    
    
 
 
   
 
   
 
   
    
    
    
    <!--
   
 
   
 
   
    
    
    
     
 The system.webServer section is required for running ASP.NET AJAX under Internet Information Services 7.0.
 It is not necessary for previous version of IIS.
 
   
 
   
 
   
    
    
    
    -->
   
 
   
 
   
    
    
    
    
 
   
 
   
 
   
    
    
    
    <
   
 
   
 
   
    
    
    
    system.webServer
   
 
   
 
   
    
    
    
    >
   
 
   
 
   
    
    
    
    
 
   
 
   
 
   
    
    
    
    <
   
 
   
 
   
    
    
    
    validation 
   
 
   
 
   
    
    
    
    validateIntegratedModeConfiguration
   
 
   
 
   
    
    
    
    ="false"
   
 
   
 
   
    
    
    
    />
   
 
   
 
   
    
    
    
    
 
   
 
   
 
   
    
    
    
    <
   
 
   
 
   
    
    
    
    modules
   
 
   
 
   
    
    
    
    >
   
 
   
 
   
    
    
    
    
 
   
 
   
 
   
    
    
    
    <
   
 
   
 
   
    
    
    
    add 
   
 
   
 
   
    
    
    
    name
   
 
   
 
   
    
    
    
    ="DirectRequestModule"
   
 
   
 
   
    
    
    
     preCondition
   
 
   
 
   
    
    
    
    ="managedHandler"
   
 
   
 
   
    
    
    
     type
   
 
   
 
   
    
    
    
    ="Ext.Net.DirectRequestModule, Ext.Net"
   
 
   
 
   
    
    
    
     
   
 
   
 
   
    
    
    
    />
   
 
   
 
   
    
    
    
    
 
   
 
   
 
   
    
    
    
    </
   
 
   
 
   
    
    
    
    modules
   
 
   
 
   
    
    
    
    >
   
 
   
 
   
    
    
    
    
 
   
 
   
 
   
    
    
    
    <
   
 
   
 
   
    
    
    
    handlers
   
 
   
 
   
    
    
    
    >
   
 
   
 
   
    
    
    
    
 
   
 
   
 
   
    
    
    
    <
   
 
   
 
   
    
    
    
    add 
   
 
   
 
   
    
    
    
    name
   
 
   
 
   
    
    
    
    ="DirectRequestHandler"
   
 
   
 
   
    
    
    
     verb
   
 
   
 
   
    
    
    
    ="*"
   
 
   
 
   
    
    
    
     path
   
 
   
 
   
    
    
    
    ="*/ext.axd"
   
 
   
 
   
    
    
    
     preCondition
   
 
   
 
   
    
    
    
    ="integratedMode"
   
 
   
 
   
    
    
    
     type
   
 
   
 
   
    
    
    
    ="Ext.Net.ResourceHandler"
   
 
   
 
   
    
    
    
     
   
 
   
 
   
    
    
    
    />
   
 
   
 
   
    
    
    
    
 
   
 
   
 
   
    
    
    
    </
   
 
   
 
   
    
    
    
    handlers
   
 
   
 
   
    
    
    
    >
   
 
   
 
   
    
    
    
    
 
   
 
   
 
   
    
    
    
    </
   
 
   
 
   
    
    
    
    system.webServer
   
 
   
 
   
    
    
    
    >
   
 
   
 
   
    
    
    
    

   
 
   
 
   
    
    
    
    </
   
 
   
 
   
    
    
    
    configuration
   
 
   
 
   
    
    
    
    >
  

  

  
   
   
   
   

 6.打开default.aspx。顶部添加：

  
   
   
   
   

   
 
   
 
   
    
    
    
    <%
   
 
   
 
   
    
    
    
    @ Register Assembly
   
 
   
 
   
    
    
    
    =
   
 
   
 
   
    
    
    
    "
   
 
   
 
   
    
    
    
    Ext.Net
   
 
   
 
   
    
    
    
    "
   
 
   
 
   
    
    
    
     Namespace
   
 
   
 
   
    
    
    
    =
   
 
   
 
   
    
    
    
    "
   
 
   
 
   
    
    
    
    Ext.Net
   
 
   
 
   
    
    
    
    "
   
 
   
 
   
    
    
    
     TagPrefix
   
 
   
 
   
    
    
    
    =
   
 
   
 
   
    
    
    
    "
   
 
   
 
   
    
    
    
    ext
   
 
   
 
   
    
    
    
    "
   
 
   
 
   
    
    
    
     
   
 
   
 
   
    
    
    
    %>
  

  

  
   
   
   
   

7.页面<form>中添加：

  
   
   
   
   

   
 
   
 
   
    
    
    
    <!--
   
 
   
 
   
    
    
    
     必须的
   
 
   
 
   
    
    
    
    -->
   
 
   
 
   
    
    
    
    

   
 
   
 
   
    
    
    
    <
   
 
   
 
   
    
    
    
    ext:ResourceManager ID
   
 
   
 
   
    
    
    
    =
   
 
   
 
   
    
    
    
    "
   
 
   
 
   
    
    
    
    ResourceManager1
   
 
   
 
   
    
    
    
    "
   
 
   
 
   
    
    
    
     runat
   
 
   
 
   
    
    
    
    =
   
 
   
 
   
    
    
    
    "
   
 
   
 
   
    
    
    
    server
   
 
   
 
   
    
    
    
    "
   
 
   
 
   
    
    
    
     
   
 
   
 
   
    
    
    
    />
  

  

  
   
   
   
   

8.拖入一个Ext控件到页面。

如：

  
   
   
   
   

   
 
   
 
   
    
    
    
    <
   
 
   
 
   
    
    
    
    ext:CycleButton ID
   
 
   
 
   
    
    
    
    =
   
 
   
 
   
    
    
    
    "
   
 
   
 
   
    
    
    
    CycleButton1
   
 
   
 
   
    
    
    
    "
   
 
   
 
   
    
    
    
     runat
   
 
   
 
   
    
    
    
    =
   
 
   
 
   
    
    
    
    "
   
 
   
 
   
    
    
    
    server
   
 
   
 
   
    
    
    
    "
   
 
   
 
   
    
    
    
     ShowText
   
 
   
 
   
    
    
    
    =
   
 
   
 
   
    
    
    
    "
   
 
   
 
   
    
    
    
    true
   
 
   
 
   
    
    
    
    "
   
 
   
 
   
    
    
    
     PrependText
   
 
   
 
   
    
    
    
    =
   
 
   
 
   
    
    
    
    "
   
 
   
 
   
    
    
    
    View As 
   
 
   
 
   
    
    
    
    "
   
 
   
 
   
    
    
    
    >
   
 
   
 
   
    
    
    
    
 
   
 
   
 
   
    
    
    
    <
   
 
   
 
   
    
    
    
    Menu
   
 
   
 
   
    
    
    
    >
   
 
   
 
   
    
    
    
    
 
   
 
   
 
   
    
    
    
    <
   
 
   
 
   
    
    
    
    ext:Menu ID
   
 
   
 
   
    
    
    
    =
   
 
   
 
   
    
    
    
    "
   
 
   
 
   
    
    
    
    Menu1
   
 
   
 
   
    
    
    
    "
   
 
   
 
   
    
    
    
     runat
   
 
   
 
   
    
    
    
    =
   
 
   
 
   
    
    
    
    "
   
 
   
 
   
    
    
    
    server
   
 
   
 
   
    
    
    
    "
   
 
   
 
   
    
    
    
    >
   
 
   
 
   
    
    
    
    
 
   
 
   
 
   
    
    
    
    <
   
 
   
 
   
    
    
    
    Items
   
 
   
 
   
    
    
    
    >
   
 
   
 
   
    
    
    
    
 
   
 
   
 
   
    
    
    
    <
   
 
   
 
   
    
    
    
    ext:CheckMenuItem ID
   
 
   
 
   
    
    
    
    =
   
 
   
 
   
    
    
    
    "
   
 
   
 
   
    
    
    
    CheckMenuItem1
   
 
   
 
   
    
    
    
    "
   
 
   
 
   
    
    
    
     runat
   
 
   
 
   
    
    
    
    =
   
 
   
 
   
    
    
    
    "
   
 
   
 
   
    
    
    
    server
   
 
   
 
   
    
    
    
    "
   
 
   
 
   
    
    
    
     Text
   
 
   
 
   
    
    
    
    =
   
 
   
 
   
    
    
    
    "
   
 
   
 
   
    
    
    
    Text Only
   
 
   
 
   
    
    
    
    "
   
 
   
 
   
    
    
    
     Icon
   
 
   
 
   
    
    
    
    =
   
 
   
 
   
    
    
    
    "
   
 
   
 
   
    
    
    
    Note
   
 
   
 
   
    
    
    
    "
   
 
   
 
   
    
    
    
     
   
 
   
 
   
    
    
    
    />
   
 
   
 
   
    
    
    
    
 
   
 
   
 
   
    
    
    
    <
   
 
   
 
   
    
    
    
    ext:CheckMenuItem ID
   
 
   
 
   
    
    
    
    =
   
 
   
 
   
    
    
    
    "
   
 
   
 
   
    
    
    
    CheckMenuItem2
   
 
   
 
   
    
    
    
    "
   
 
   
 
   
    
    
    
     runat
   
 
   
 
   
    
    
    
    =
   
 
   
 
   
    
    
    
    "
   
 
   
 
   
    
    
    
    server
   
 
   
 
   
    
    
    
    "
   
 
   
 
   
    
    
    
     Text
   
 
   
 
   
    
    
    
    =
   
 
   
 
   
    
    
    
    "
   
 
   
 
   
    
    
    
    Html
   
 
   
 
   
    
    
    
    "
   
 
   
 
   
    
    
    
     Icon
   
 
   
 
   
    
    
    
    =
   
 
   
 
   
    
    
    
    "
   
 
   
 
   
    
    
    
    Html
   
 
   
 
   
    
    
    
    "
   
 
   
 
   
    
    
    
     Checked
   
 
   
 
   
    
    
    
    =
   
 
   
 
   
    
    
    
    "
   
 
   
 
   
    
    
    
    true
   
 
   
 
   
    
    
    
    "
   
 
   
 
   
    
    
    
     
   
 
   
 
   
    
    
    
    />
   
 
   
 
   
    
    
    
    
 
   
 
   
 
   
    
    
    
    </
   
 
   
 
   
    
    
    
    Items
   
 
   
 
   
    
    
    
    >
   
 
   
 
   
    
    
    
    
 
   
 
   
 
   
    
    
    
    </
   
 
   
 
   
    
    
    
    ext:Menu
   
 
   
 
   
    
    
    
    >
   
 
   
 
   
    
    
    
    
 
   
 
   
 
   
    
    
    
    </
   
 
   
 
   
    
    
    
    Menu
   
 
   
 
   
    
    
    
    >
   
 
   
 
   
    
    
    
    
 
   
 
   
 
   
    
    
    
    </
   
 
   
 
   
    
    
    
    ext:CycleButton
   
 
   
 
   
    
    
    
    >
  

  

  
   
   
   
   

9.页面点击右键“在浏览器中查看”

从此你爱上了Ext.net。。。