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