如何在VS2010中编写ExtJs

Ext.Net是一个对ExtJS进行封装了的.net控件库，可以在ASP.NET WebForm和MVC中使用。从今天开始记录我的学习笔记，这是第一篇，今天学习了如何在WebForm中使用Ext.Net控件库。

下载Ext.Net

首先要去Ext.Net网站上下载Ext.Net（http://www.ext.net/download/），我先学习的是WebForm版：

当前版本是2.4.0，压缩包里面包含了不同版本，分别用在相应.net版本的程序中。

在项目中引用

要使用Ext.Net，首先创建一个WebForm程序，我们这里使用4.0版。

下面的dll文件也可以在我的网盘中下载（链接: http://pan.baidu.com/s/1bnthNUR 密码: 8ho6）

在引用管理器中，浏览到解压的目录，然后添加下面的引用：

配置VS工具箱

首先在VS中新建Web应用程序空项目，新建一个aspx页面，在工具箱中右键，新建选项卡，取名称为Ext.Net。在新建的选项卡中右键，选择项，浏览选择下载的Ext.Net.dll，如下图。

 

 

 

 

 

 

 

 

 

 

点“确定”后，刚才新建的选项卡中如下所示，

至此，选项卡添加完成。

PS:Ext.NET系列的通病就是设计时支持相当糟糕，，从工具箱中拖拽控件用处不大，其次官方能给出的文档少之又少，还好，大部分可以参考Sencha Ext JS API文档。

配置Web.config

尽管添加了引用，此时还不能算是完工。要想正确的使用Ext.Net，还需要对Web.config进行修改。

<?xml version="1.0"?>
<!--
  有关如何配置 ASP.NET 应用程序的详细消息，请访问
  http://go.microsoft.com/fwlink/?LinkId=169433
  -->
<configuration>
<system.web>
    <httpModules>
      <add name="DirectRequestModule" type="Ext.Net.DirectRequestModule, Ext.Net" />
    </httpModules>
<compilation debug="true" targetFramework="4.0">
<assemblies>
<add assembly="System.Web.Mvc, Version=4.0.0.0, Culture=neutral, PublicKeyToken=31BF3856AD364E35"/>
<add assembly="System.Design, Version=4.0.0.0, Culture=neutral, PublicKeyToken=B03F5F7F11D50A3A"/>
<add assembly="System.Web.WebPages, Version=2.0.0.0, Culture=neutral, PublicKeyToken=31BF3856AD364E35"/></assemblies></compilation>
</system.web>
</configuration>

第一步，添加httphandler和httpmodule节点的配置

经典模式配置：

<httpHandlers>  <add path="*/ext.axd" verb="*" type="Ext.Net.ResourceHandler"  validate="false" /></httpHandlers><httpModules>  <add name="DirectRequestModule" type="Ext.Net.DirectRequestModule, Ext.Net" /></httpModules>

集成模式配置：

<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节点中添加下面的配置：

<validation validateIntegratedModeConfiguration="false" />

第二步，配置页面控件

要在页面中使用Ext.Net的控件，需要添加针对Ext.Net控件的配置：

<pages>  <controls>    <add tagPrefix="ext" namespace="Ext.Net" assembly="Ext.Net"/>  </controls></pages>

第三步，添加Ext.Net全局配置节点

在完成上面两个步骤之后，我们已经可以在页面中使用Ext.Net控件了。

那么我们为什么还要进行第三步配置呢？第三步配置添加了全局的配置，例如我们要使用全局的皮肤，而不是每一个页面都去设置。

要添加全局配置，首先要在配置文件中添加自定义节点：

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

接下来是配置项：

<extnet theme="Neptune" />

在这里我们只设置了全局的皮肤，使用ExtJS 4.2.1中的Neptune皮肤。

在页面中的简单用法

在完成了配置之后，我们就可以在页面中使用Ext.Net控件了。

首先，在需要使用Ext.Net控件的页面中添加资源引用，就像使用ScriptManager一样，需要在页面中添加如下控件：

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

有了这个控件，就等于我们已经在页面中添加了ExtJS的引用。

接下来我们来看看上面那个示例窗口的代码：

<ext:Window runat="server"     ID="win"     Title="示例窗口"     Width="300"     Height="200"     AutoShow="true"></ext:Window>

然后运行页面，可以看到我们刚才的示例窗口。

如果你对ExtJS有所了解，那么你会发现，Ext.Net在很大程度上模拟了ExtJS的写法，大大的提高了我们的生产力。

今天算是一个开篇，我会将自己的Ext.Net学习历程通过日志的形式记录下来的。加油！

 

补充：关于Ext.Net版权的问题

Ext.Net 是一个开源的项目，有收费授权和免费授权两种，两个版本之间基本上没有什么区别，我们可以在学习的时候使用免费的授权，如果以后需要商业授权，可以去官网买一套，授权版包含了ExtJS的授权，你可以在Ext.Net官网查看相应授权的价格。

参考链接：http://blog.csdn.net/studyblog/article/details/25373375

参考链接：http://wind-wolf.blog.sohu.com/207430284.html