zoukankan      html  css  js  c++  java
  • Ext.Net学习笔记01:在ASP.NET WebForm中使用Ext.Net

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

    下载Ext.Net

    首先要去Ext.Net网站上下载Ext.Net,我先学习的是WebForm版:

    1

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

    在项目中引用

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

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

    2

    配置Web.config

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

    第一步,添加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控件了。

    3

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

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

    <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="ExtNET示例窗口  By Webwang" 
        Width="300" 
        Height="200" 
        AutoShow="true">
    </ext:Window>

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

  • 相关阅读:
    使用 Rails Webpacker 安裝 Foundation 6
    如何验证 Email 地址:SMTP 协议入门教程
    PHPStorm.WebStrom等系列官方开发工具配置本地项目与运程服务器同步
    前端整合MathjaxJS的配置笔记
    支付宝2018年账单发布,更注重用户隐私保护
    公告!关于微信7.0安卓版已解决问题进展
    畅快买买买!购物类应用页面响应时间测评及优化建议
    是什么让我们走到最后,看完泪目!
    安卓绿色联盟执行组会议又双叒叕召开了
    华为如何打造智能终端的有趣灵魂?(上)
  • 原文地址:https://www.cnblogs.com/webwang/p/extnet-learn-001.html
Copyright © 2011-2022 走看看