Ext.Net系列:安装与使用

 

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

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

Ext.Net介绍：非ExtJS，封装了ExtJS的内容，用于ASP.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.net2.2版本开始收费，不开源。最后一个开源版本是ext.net2.1。

下载后要运行Ext.Net需要 下载ASP.NET MVC3，Ext.NET需要这个支持

下载地址：http://www.microsoft.com/zh-cn/download/details.aspx?id=1491

下载其中的：

发布的服务器上也需要安装ASP.NET MVC3

安装：

 

装完后，Visual Studio中多了如下：

Ext.Net安装和使用:
1.下载最新版本
2.打开下载文件，将包含以下文件找到：
 2.1 Ext.Net.dll
 2.2 Ext.Net.xml

2.3 Ext.Net.Utilities.dll

2.4 Ext.Net.Utilities.xml
 2.5 Newtonsoft.Json.dll
 2.6 Newtonsoft.Json.xml

3.打开 Visual Studio,创建C#网站项目
 3.1打开VS2010菜单创建网站
 3.2弹出"创建网站"窗口，选择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 theme="Gray" renderScripts="CDN" renderStyles="CDN" initScriptMode="Linked" />-->

  <extnet scriptMode="Debug" theme="Gray" />

  <!--<appSettings>

    <add key="ShowHiddenExamples" value="False" />

    <add key="LocalLogging" value="True" />

    <add key="GoogleAnalytics" value="False" />

  </appSettings>-->

  <system.web>

    <!-- DO NOT change this trust level. Application MUST run in "Medium" trust. -->

    <!-- Full trust is required for the FeedViewer example because of outbound HTTP requests to fetch RSS feeds -->

    <trust level="Full" />

    <webServices>

      <protocols>

        <add name="HttpGet" />

        <add name="HttpPost" />

      </protocols>

    </webServices>

    <customErrors mode="Off">

      <error statusCode="404" redirect="~/404.aspx" />

    </customErrors>

    <compilation targetFramework="4.0" debug="true">

      <assemblies>

        <add assembly="System.Data.Linq, Version=4.0.0.0, Culture=neutral, PublicKeyToken=B77A5C561934E089" />

      </assemblies>

    </compilation>

    <authentication mode="Windows" />

    <authorization>

      <allow users="*" verbs="GET,POST,PUT,DELETE" />

    </authorization>

    <pages controlRenderingCompatibilityVersion="3.5" clientIDMode="AutoID">

      <controls>

        <add tagPrefix="src" src="~/HighLighter/HighLighterButton.ascx" tagName="SourceButton" />

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

      </controls>

    </pages>

    <httpModules>

   

      <add name="DirectRequestModule" type="Ext.Net.DirectRequestModule, Ext.Net" />

    </httpModules>

    <httpHandlers>

      <add path="*/ext.axd" verb="*" type="Ext.Net.ResourceHandler" validate="false" />

    </httpHandlers>

  </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>

    <staticContent>

      <mimeMap fileExtension=".json" mimeType="application/json" />

      <mimeMap fileExtension=".woff" mimeType="application/x-woff" />

    </staticContent>

    <modules>

   

      <add name="DirectRequestModule" preCondition="managedHandler" type="Ext.Net.DirectRequestModule, Ext.Net" />

    </modules>

    <security>

      <authorization>

        <remove users="*" roles="" verbs="" />

        <add accessType="Allow" users="*" verbs="GET,POST,PUT,DELETE" />

      </authorization>

    </security>

    <validation validateIntegratedModeConfiguration="false" />

    <handlers>

      <add name="DirectRequestHandler" verb="*" path="*/ext.axd" preCondition="integratedMode" type="Ext.Net.ResourceHandler" />

    </handlers>

  </system.webServer>

</configuration>

6.打开页面添加：! 必须的

从工具栏,Ext面板中拖入一个ResourceManger，所有的Ext.NET框架页面都需要首先添加这个ResourceManager。

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

7.拖入一个Ext控件到页面。如：
添加一个ViewPort

代码：

ext:CycleButton runat="server" ShowText="true" PrependText="View As ">
<ext:Viewport ID="Viewport1" runat="server" Layout="border">

            <Items>

                <ext:Panel runat="server" Collapsible="True" Height="100" Region="North"

                    Split="True" Title="North">

                    <Items>

                    </Items>

                </ext:Panel>

                <ext:Panel runat="server" Collapsible="true" Layout="Fit" Region="East"

                    Split="true" Title="East" Width="175">

                    <Items>

                        <ext:TabPanel runat="server" ActiveTabIndex="0" Border="false"

                            TabPosition="Bottom" Title="Title">

                            <Items>

                                <ext:Panel runat="server" Title="Tab 1">

                                    <Items>

                                    </Items>

                                </ext:Panel>

                                <ext:Panel runat="server" Title="Tab 2">

                                    <Items>

                                    </Items>

                                </ext:Panel>

                            </Items>

                        </ext:TabPanel>

                    </Items>

                </ext:Panel>

                <ext:Panel runat="server" Collapsible="true" Height="100" Region="South"

                    Split="true" Title="South">

                    <Items>

                    </Items>

                </ext:Panel>

                <ext:Panel runat="server" Collapsible="true" Layout="accordion" Region="West"

                    Split="true" Title="West" Width="175">

                    <Items>

                        <ext:Panel runat="server" Border="false" Collapsed="True" Icon="FolderGo"

                            Title="Item 1">

                            <Items>

                            </Items>

                        </ext:Panel>

                        <ext:Panel runat="server" Border="false" Collapsed="true" Icon="FolderWrench"

                            Title="Item 2">

                            <Items>

                            </Items>

                        </ext:Panel>

                    </Items>

                </ext:Panel>

                <ext:Panel runat="server" Layout="Fit" Region="Center" Title="Center">

                    <Items>

                        <ext:TabPanel runat="server" ActiveTabIndex="0" Border="false" Title="Center">

                            <Items>

                                <ext:Panel runat="server" Closable="true" Title="Tab 1">

                                    <Items>

                                    </Items>

                                </ext:Panel>

                                <ext:Panel runat="server" Title="Tab 2">

                                    <Items>

                                    </Items>

                                </ext:Panel>

                            </Items>

                        </ext:TabPanel>

                    </Items>

                </ext:Panel>

            </Items>

        </ext:Viewport>

8.页面点击右键“在浏览器中查看”效果如下：

从此踏上Ext.Net之路