·您现在的位置： 江北区云翼计算机软件开发服务部 >> 文章中心 >> 网站建设 >> 网站建设开发 >> ASP.NET网站开发 >> Ext.NET-基础篇
- dotNET.4.0中的新特性系列:07 垃圾回收机制入门——GC（楼炉群、金林）
- ASP.NET分页
- 如何在删除并重新安装 IIS 之后修复 IIS 映射
- WEB开发框架系列教程 （二）页面功能开发（1）
- vs2010“最近使用的项目”为空？解决办法！
- 15款代码语法高亮工具，美化你的代码
- Http压力测试工具HttpTest4Net
- C#基础知识
- 在Web Service中使用ASP.net状态保持
- ASP.Net 验证视图状态 MAC 失败
- Asp.Net原理Version2.0
- 解决错误：sql_variant is incompatible with xml (ASP.NET 2.0 / XML数据类型 )
- 查看Msi文件内容
- 分享个极好的无刷新二级联动下拉列表,同样适用与firefox
- 初识IO流之小型资源管理器
- 实现在页面中单击按钮关闭页面
- Mouse单击高亮GridView数据行
- 您可能不知道的.Net2.0小技巧
- IFRAME跨域名的解决方法，终结版（小张.NET原创）
- BUG修改纪录
- C#导出Excel那些事
- ASP.Net防止刷新自动触发事件的解决方案
- 在.NET下学习Extjs(第四个案例 Extjs扩展的原理)
- 转换成CSV文件、Word、Excel、PDF等的方法--读取CSV文件的方法
- ASP.net Membership角色与权限管理
- VS2012发布网站详细步骤
- asp.net MVC3 + JQuery 的ajax简单使用
- 《面试系列二》感觉一切都不美好了
- 关于“参数”的几个问题，也许面试会问到哦~
- 脚本获取选中文字及所在句子
Ext.NET-基础篇
Ext.NET-基础篇
概述
本文介绍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 最新版本是3.1，基于 EXTJS 5.1.0，与 EXT.NET 2.X 的主要区别是多了对平板设备的支持，当然，这主要是由于 Ext.NET 2.X 系列是基于 EXTJS 4.X，自从EXTJS 5.0 才有对平板设备的支持。
如下是EXT.NET官方下载页面给出的说明：
| 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呢？
- 一整套专业的前端框架，兼容各种主流浏览器(甚至IE6)，很少需要引入第三方库，降低了学习成本；
- 减少了javascript的代码量，易于维护，同时又不失ExtJs的灵活性；
- 提供的DirectEvents和DirectMethod，使调用服务器端方法更为简单；
- 使ASP.NET开发人员更容易理解和使用ExtJS;
总之，减少了工作量，降低了学习成本；不过在实际的使用中，还是需要写一些简单的Javascript代码。
关于ExtJS这里不多介绍，其提供的多种主题样式，尤其适用于企业应用开发，很少需要美工的介入，这一点对于小型团队来说，尤其缺少专业美工的情况下，颇为实用。关于请参见Sencha官方博客，其中有Extjs与AngularJS的比较。
开发环境配置
官方的Readme以及Visual Studio配置说明已经说的很清楚了，两种方法: 自动配置 和 手动配置。
至于添加到VS工具箱拖拽控件至页面，基本没用，还是省省时间吧，Ext.NET基本没有对设计时可视化支持的，这也是入门较难的原因之一。
自动配置(推荐)
使用NuGet，新手推荐使用这种方式，因为——简单。方法如下:
- 打开Visual Studio,菜单栏
工具>扩展和更新，安装NuGet程序包管理器，通常，VS2013已经自动安装了，若没有,左侧点联机，右上方搜索框中输入NuGet,具体安装过程 参见此处，安装完成会需要重启VS。若是搜不出来，改DNS/FQ/VPN/改Host文件等问度娘。 VS中新建空Web项目,解决方案资源管理器中项目名称上
右键>管理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的依赖关系:
也就意味着手动配置的话需要为项目添加这些依赖项的引用。自动添加的 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>若是<body>中输入 <ext 没有自动代码提示的话，重新加载Web项目或重新打开解决方案即可。
<ext:ResourceManager runat="server" />必须在<body></body>中第一行，因为它负责为页面添加js和各种css文件的引用。
为javascript代码添加EXTJS代码提示
Web项目开发，无法避免编写javascript脚本，VS提供的Intellisense方便快捷，如何添加javascript的EXTJS的代码提示支持?在Web项目的Scripts目录中(若没有新建)添加_references.js文件，并输入如下代码;
/// <autosync enabled="true" />/// <reference name="Ext.Net.Build.Ext.Net.extjs.ext-all-debug.js" assembly="Ext.Net" />/// <reference name="Ext.Net.Build.Ext.Net.extnet.extnet-all-debug.js" assembly="Ext.Net" />这样项目中的js文件中，就有了代码提示。支持的就不够全不够好？因为Sencha官方现在好像只提供对Sublime Text的支持，有好的方法别忘了告诉我，谢谢。使用时可查看 ExtJs官方API文档。
CSS说明
Ext.NET/EXTJS都是用的CSS来控制样式的，若想自定义，自己加一个css样式表文件引用至实际的ASPX页面中就可以。针对中文覆盖默认字体的CSS定义,新建ExtjsExtra.css文件，内容如下：
/*#region Extjs样式扩展*/* { font-family: 'Helvetica', 'Tahoma', 'Arial', "Microsoft YaHei", "微软雅黑",'STXihei', "华文细黑", 'SimSun', "宋体", 'Heiti', "黑体", 'sans-serif' !important;}/*#endregion */在ASPX文件的<head></head>中添加对此CSS文件的引用即可。
<link rel="stylesheet" type="text/css" href="/Content/ExtjsExtra.css" />布局(Layout)
前面说过，EXT.NET基本没有对设计时可视化支持的，这也是新手常常遇到的问题，在 官方示例 中，已经有详尽的示例代码，认真阅读官方示例，常见的布局问题都可以应付。
EXTJS有Sencha Architect提供了设计时的支持，不过生成的是纯js代码。
EXT.NET官方示例Layout节点中有各种布局的详细代码例子，如下
大致说明下：
- AbsoluteLayout: 绝对，指定控件的X和Y值(像素);
- AccordionLayout: 折叠式布局，常用于页面菜单之类;
- AnchorLayout: 配置高度和宽度，值可以是百分比(1-100%)或偏移量(正/负整数),详细说明参见 Anchor Layout的源码;
- BorderLayout: 以边框方式划分区域，通常用于整个页面(容器内部也可以用)的布局，如官方示例的首页就是这种布局;
- CardLayout: 卡片式布局，常用于需要上一步&下一步的向导页。
- CenterLayout: 始终居中，这个是3.x新加的功能，比较有用。
- ColumnLayout: 列式布局，用
ColumnWidth指定所占宽度比例(0到1之间的小
- 上一篇文章： Ext.NET-布局篇
- 下一篇文章： 解读ASP.NET 5 & MVC6系列
- 我们一起学习WCF第十篇Wcf中实现事务
- .NET 3.x新特性之自动属性及集合初始化
- ASP.NET讲座(1)-ASP.NET简介
- [视频教程]新科海_asp.net会员系统开发视频
- 对.NET Framework 反射的反思
- asp中cookie欺骗/注入原理与防范
- aspx网页以HTML形式存储的几个方法