EXT.NET - 基础

最新推荐文章于 2024-04-22 17:39:51 发布

VIP文章龙宜坡

最新推荐文章于 2024-04-22 17:39:51 发布

阅读量4.3k

点赞数 3

分类专栏： Ext.NET/ExtJS 文章标签： extjs sencha asp-net ext-net ajax

本文链接：https://blog.csdn.net/goga21cn/article/details/45619465

版权

概述

本文介绍Ext.NET的基本概念，安装配置、布局以及容器，最后介绍了DirectEvents、DirectMethod、Listener，并提供了示例代码。

示例代码下载地址>>>>>

Ext.NET 简介

Ext.NET 是基于跨浏览器的 Sencha ExtJS 库和.NET Framework的一套支持ASP.NET AJAX的非开源Web控件，包含有丰富的Ajax运用，其前身是Coolite 。

Ext.NET使用一种自己的翻译机制，将ASPX页面中的EXT.NET标记代码翻译成EXTJS，浏览器中执行的还是EXTJS代码，类似于 Sencha GXT ，至于EXTJS的由来不清楚的话可以问度娘。

EXT.NET也对EXTJS做了一些自己的扩展。EXT.NET在2.3之前是开源的；在1.0之前叫做Coolite。

	Ext.NET 3.1	Ext.NET 2.5.3
Ext Js 版本	Ext JS 5.1.0	Ext JS 4.2.1
发布时间	2015-02-17	2014-11-05
.NET Framework要求	.NET 4.0, 4.5 & 4.5.1	.NET 3.5, 4.0 , 4.5 & 4.5.1
CPU	32 & 64 bit	32 & 64 bit
Visual Studio	2010, 2012 & 2013	2008, 2010, 2012 & 2013
桌面浏览器支持	Chrome,Firefox,IE8+,Safari 6+,Opera 12+	Chrome,Firefox,IE6+,Safari 6+,Opera 12+
平板浏览器支持	Safari iOS6+,Chrome Android 4.1+,IE10+ Win8	不支持
	2015年2季度或3季度发布Ext.NET 3.2.0	不再发布新版本

为什么使用Ext.NET

上面提到，Ext.NET是对ExtJS的.NET封装，那么为么不直接用ExtJS呢？
1. 一整套专业的前端框架，兼容各种主流浏览器(甚至IE6)，很少需要引入第三方库，降低了学习成本；
2. 减少了javascript的代码量，易于维护，同时又不失ExtJs的灵活性；
3. 提供的DirectEvents和DirectMethod，使调用服务器端方法更为简单；
4. 使ASP.NET开发人员更容易理解和使用ExtJS;

总之，减少了工作量，降低了学习成本；不过在实际的使用中，还是需要写一些简单的javascript代码。

关于ExtJS这里不多介绍，其提供的多种主题样式，尤其适用于企业应用开发，很少需要美工的介入，这一点对于小型团队来说，尤其缺少专业美工的情况下，颇为实用。
关于请参见Sencha官方博客，其中有Extjs与AngularJS的比较。

ExtJS vs AngularJS

开发环境配置

官方的Readme以及Visual Studio配置说明已经说的很清楚了，两种方法: 自动配置和手动配置。

至于添加到VS工具箱拖拽控件至页面，基本没用，还是省省时间吧，Ext.NET基本没有对设计时可视化支持的，这也是入门较难的原因之一。

自动配置(推荐)

使用NuGet，新手推荐使用这种方式，因为——简单。
方法如下:
1. 打开Visual Studio,菜单栏 工具 > 扩展和更新，安装 NuGet程序包管理器，通常，VS2013已经自动安装了，若没有,左侧点 联机，右上方搜索框中输入 NuGet ,具体安装过程参见此处，安装完成会需要重启VS。
若是搜不出来，改DNS/翻墙/VPN/改Host文件等问度娘。
2. VS中新建空Web项目,解决方案资源管理器中项目名称上 右键 > 管理NuGet程序包 ,左侧点 联机,右上方搜索框中输入 ext.net，安装之。
NuGet安装EXT.NET
耐心等待，Ext.NET的DLL也要好几十M的，经过无聊的等待后，开发环境自动配置好了，来看看NuGet都自动做了些什么:

自动下载了相关DLL文件，请打开项目所在物理路径看看;

根据当前Web项目.NET Framework版本自动添加了Ext.NET的DLL对应.NET版本,包括Ext.NET本身的依赖DLL;

自动配置好了项目的Web.Config文件。

我们手动要做的无非就这几个事情。
下图是Ext.NET3.1.0的依赖关系:
Ext.NET3.1.0依赖项

也就意味着手动配置的话需要为项目添加这些依赖项的引用。
自动添加的 APP_Readme 目录和 Ext.Net.Default.aspx (测试页面)可以删除。

手动配置

下载DLL文件;
项目中添加对DLL的引用;
配置 Web.Config 文件。

至于如何手动配置，请参见前面提到的Readme以及Visual Studio配置说明。

WEB.CONFIG中`<extnet />`配置说明

默认的配置如下

<extnet theme="Crisp"
            licenseKey="** Ext.NET LICENSE KEY HERE **"
            initScriptMode="Linked" />

Readme文件中有详尽的<extnet/>属性配置说明，下面列出几个比较常用的:

ajaxTimeout : 设置默认的AJAX请求超时时间
默认为30000(30秒)，单位毫秒.

glyphFontFamily : 为支持Glyph的组件设置字体名称
如:FontAwesome，需要页面引入相关的字体css文件，默认为空.

licenseKey : Ext.NET License key

scriptMode: 指定javascript代码呈现方式。
默认值: “Release”. 可选项有 Release、Debug、Development

Release (压缩过的)

Debug(不压缩)

Development(非压缩且带debug信息) 经验证，此项不可用

sourceFormatting : 是否格式化EXT.NET生成的javascript代码
默认值为 is ‘false’. 可选项有 [true|false]

theme : 默认主题样式
默认值为”Default” (经典的蓝色主题). 可选项有 Default、Access、Gray、Neptune、Neptune Touch、Crisp、Crisp Touch

开始之前

模板窗体

新建WebForm页面,默认body中的内容删除掉。

<%@ Page Language="C#" AutoEventWireup="true" CodeBehind="ExtNetTemplate.aspx.cs" Inherits="WebFormDemo.ExtNetTemplate" %>
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
    <title>ExtNetTemplate</title>
</head>
<body>
    <ext:ResourceManager runat="server" />
</body>
</html