一步步Ext.Net(一)，配置及简单布局

最新推荐文章于 2017-08-11 17:12:05 发布
最新推荐文章于 2017-08-11 17:12:05 发布
阅读量3.9k 收藏 3
点赞数
分类专栏： Ext.Net


一.    预备知识

1.     简介

Ext.Net由起初的Coolite发展而来，Ext.Net是一个开源的ASP.NET(WebForm+MVC)组件库，对跨浏览器的Sencha Extjs javascript库进行了封装，其绝大多数组件及功能与Extjs提供的功能一致。

以上是官方解释，其实说白了，Ext.Net就是对extjs的asp.net封装，理论上可以不用再写js代码(可惜…)。

官方网站:www.ext.net

相信用过ext.net或extjs的朋友对下图很亲切了

 

1.     配置开发环境

先从环境配置说起，本文及后续IDE皆以VS2010环境示例。

下载Ext.Net，http://www.ext.net/download/

官方提供两个版本：社区版和专业版，这两个版本除了授权协议不一样外，对开发人员来说，没有任何区别。

 


 

顺便说一个问题，官方的要求的.NET Framework版本为3.5，其实需要装3.5SP1或直接4.0版本，因为Newtonsoft.Json.dll会对.NET Framework 3.5SP1中新增的一些地方有调用，所以建议开发环境为4.0版本。

配置VS工具箱

首先在VS中新建Web应用程序空项目，新建一个aspx页面，在工具箱中右键，新建选项卡，取名称为Ext.Net。在新建的选项卡中右键，选择项，浏览选择下载的Ext.Net.dll，如下图。

 


 

 


 

 


 

点“确定”后，刚才新建的选项卡中如下所示，

 

 

 

 

至此，选项卡添加完成。

PS:Ext.NET系列的通病就是设计时支持相当糟糕，，从工具箱中拖拽控件用处不大，其次官方能给出的文档少之又少，还好，大部分可以参考Sencha Ext JS API文档。

配置Web.config

手动修改Web.config，添加httpModules节,完整代码如下

 

<?xml version="1.0"?>

<configuration>

 <system.web>

    <httpModules>

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

    </httpModules>

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

      <assemblies>

        <add assembly="System.Design, Version=4.0.0.0, Culture=neutral, PublicKeyToken=B03F5F7F11D50A3A"/>

      </assemblies>

    </compilation>

 </system.web>

</configuration>

 

 

 

一.    从布局说起

从工具箱中拖拽一个ViewPort到在刚才新建的aspx页面Form1中，项目自动添加了对Ext.NET.DLL的引用，并在页面上面添加了如下代码，作用不解释，你懂得。

 

<%@ Register Assembly="Ext.Net" Namespace="Ext.Net" TagPrefix="ext" %>

 

 

 

 

下来看看一个简单的录入界面布局。

在aspx文件源视图中修改页面代码如下:

<%@ Page Language="C#" AutoEventWireup="true" CodeBehind="WebForm1.aspx.cs" Inherits="Chapter1.WebForm1" %>

 

<%@ Register Assembly="Ext.Net" Namespace="Ext.Net" TagPrefix="ext" %><%--必须有--%>

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">

<head runat="server">

    <title>布局示例</title>

</head>

<body>

    <form id="form1" runat="server">

    <ext:ResourceManager ID="ResourceManager1" runat="server" /><%--必须有--%>

    <ext:Viewport ID="Viewport1" runat="server" Layout="FitLayout"><%--Layout="FitLayout" 拉伸布局--%>

        <Items>

            <ext:FormPanel runat="server" Frame="true" LabelWidth="40"><%--LabelWidth="40" Label宽40，根据Label文字总宽度手动设定--%>

                <Items>

                    <ext:Container ID="Container1" runat="server" Layout="Column" Height="106" LabelAlign="Left">

                        <Items>

                            <ext:Container ID="Container2" runat="server" ColumnWidth=".5" Layout="FormLayout" LabelWidth="40"><%-- Layout="FormLayout" Form布局,ColumnWidth=".5" 列宽50% --%>

                                <Items>

                                    <ext:TextField runat="server" ID="txtName" FieldLabel="姓名" AnchorHorizontal="95%"/><%--AnchorHorizontal="95%",总体宽95% --%>

                                    <ext:RadioGroup runat="server" ID="rdoSex" FieldLabel="性别">

                                        <Items>

                                            <ext:Radio runat="server" ID="rdoSexMen" BoxLabel="男士" />

                                            <ext:Radio runat="server" ID="rdoSexWoman" BoxLabel="女士" />

                                        </Items>

                                    </ext:RadioGroup>

                                    <ext:NumberField runat="server" ID="numAge" MinValue="1" FieldLabel="年龄" AnchorHorizontal="95%" />

                                    <ext:TextField runat="server" ID="txtEmail" AllowBlank="false" FieldLabel="邮箱" AnchorHorizontal="95%" />

                                </Items>

                            </ext:Container>

                            <ext:Container ID="Container3" runat="server" ColumnWidth=".5" Layout="FormLayout" LabelWidth="40">

                                <Items>

                                    <ext:TextField runat="server" ID="txtCode" FieldLabel="编码" AnchorHorizontal="100%" />

                                    <ext:TextField runat="server" ID="txtTl" FieldLabel="电话" AnchorHorizontal="100%" Disabled="true" />

                                    <ext:ComboBox runat="server" ID="cmbProvince" FieldLabel="省份" AnchorHorizontal="100%" Editable="false" AllowBlank="false" />

                                    <ext:DateField runat="server" ID="dfBirthDay" FieldLabel="生日" AnchorHorizontal="100%" Editable="false" AllowBlank="false" Format="yyyy-MM-dd" />

                                </Items>

                            </ext:Container>

                        </Items>

                    </ext:Container>

                    <ext:HtmlEditor runat="server" ID="txtIntro" AllowBlank="true" FieldLabel="简介" AnchorHorizontal="100%" AnchorVertical="-106" />

                 <% --AnchorVertical="-106" 缩回了106px, 高度=页面总高-106,与Container1的Height对应,也就是此控件上面的总高度 -- %>

 

                </Items>

            </ext:FormPanel>

        </Items>

    </ext:Viewport>

    </form>

</body>

</ html >
 
F5 调试效果如下,一个自适应高度及宽度的页面随之诞生了。

 

 

 

常用的页面布局示例在官方示例中都有涉及到。

如下图，有13中布局可供参考。
 

厦门德仔
关注
  • 0
    点赞
  • 踩
  • 3
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
订阅专栏
ext.net教程
09-21
ExtAspNet最初的设计目的就是让ASP.NET开发人员在不需要了解JavaScript和ExtJS的情况下快速开发出漂亮的Web2.0应用。因此每个控件的编写都尽量符合ASP.NET的开发习惯，从控件和属性的命名到复杂的AJAX交互，都让传统的ASP.NET开发人员感到很舒服，这也是ExtAspNet经过四年的风雨历程仍然深受广大开发者喜爱的原因。
Ext中文官网
jsczxy2
12-07 1857
http://extjs.org.cn/
EXT.NET各个版本下载地址
花海的专栏
07-05 1059
官网下载地址为：http://www.nuget.org/packages/Ext.NET
EXT.NET项目框架的搭建步骤
zhruifei的专栏
08-11 2191
原文链接：http://www.cnblogs.com/zhangtingzu/p/5746722.html 1、下载DLL文件 网址：http://ext.net/download/  解压后： 2、新建一个ASP.NET Web应用程序，空项目即可。 3、引入dll，net40下的所有dll(包括：Ext.Net.dll、Ext.Net.Utilities.dll、Newto
ExtJs官方网站中文的入门指南
fsh430623的专栏
05-27 494
无论你是Ext库的新手，抑或是想了解Ext的人，本篇文章的内容都适合你。本文将简单地介绍Ext的几个基本概念，和如何快速地做出一个动态的页面并运 行起来，假设读者已具备了一些JavaScript经验和初级了解HTML Dom。否则的话，请从阅读 初学JavaScript资源开始。 1 下载Ext 2 开始！ 3 Element：Ext的核心 4 获取多个DOM的节点 5 响应...
Ext.net中的MessageBox的简单应用实现代码
10-28
今天在项目中要用到简单的MessageBox的使用。在Ext.net中没有Winform那么简单，直接写MessageBox.show()的方法。于是就去examples.ext.net的例子网站找，想找到个实际能用的
ext.net2.5configer配置
12-25
关于配置ext.net webconfiger文件
Ext.NET 3.1破解版
01-17
Ext.NET 3.1破解版,仅供参考和学习!
examples.ext.net-5.zip
10-12
ext.net实例代码，应该是5.2版的，webform的，估计也是绝版了，珍惜吧大家。 ext.net实例代码，应该是5.2版的，webform的，估计也是绝版了，珍惜吧大家。
Ext.NET.WebForms.Pro.5.2.0
05-08
Ext.NET.WebForms.Pro.5.2.0 使用时注意事项： 该版本为5.2.0，若之前系统是用的非5.X版本时，切勿随意升级到该版本！ 新建项目可以使用该版本。 以上版本仅供学习使用，不做任何商业用途！！！！
ExtNet框架
08-11
Ext.Net框架代码
Ext 风格 样式 库
06-05
通过下拉菜单设置Ext样式及风格，里面包含了定义好的样式和使用方法！
ext4.0 ext4.0
07-15
最新的ext4.0，最新的ext4.0，最新的ext4.0。
【Ext.Net学习笔记】02：Ext.Net用法概览、Ext.Net MessageBus用法、Ext.Net布局
05-27 169
Ext.Net用法概览 Ext.Net还是很强大，如果运用熟练可以极大的提高编程效率。如果你也要学习Ext.Net，原文博主推荐书籍：《Ext.Net Web 应用程序开发教程》，是英文的，有基础的可以看下，可以百度到PDF文档的。 Ext.Net与ExtJS代码比较 上一篇中我们创建了一个使用Ext.Net创建了一个window窗口，代码非常简单： <ext:W...
EXT.NET常用控件使用
weixin_34061555的博客
07-17 136
（一）ComboBox的使用 1：绑定静态数据 <ext:ComboBox ID="cbSt" runat="server" FieldLabel="状态" LabelWidth="35" AnchorHorizontal="100%" 　　LabelSeparator="：" AllowBlank=...
extjs官网+extjs官网案例
热门推荐
GoodShot的专栏
04-25 2万+
extjs官网: http://www.sencha.com/ extjs官网案例： http://docs.sencha.com/extjs/4.2.0/extjs-build/examples/ 另外： http://extjs.org.cn/examples
EXT.NET - 基础
Guog
05-10 4302
本文介绍Ext.NET的基本概念，安装配置、布局以及容器，最后介绍了DirectEvents、DirectMethod、Listener，并提供了示例代码。
EXT.NET配置
mx5721的专栏
08-01 2272
1.下载EXT.dll文件 2. 配置web.config文件：     （1）在中添加以下信息：                                        validate="false"/>                                                                  type="Ext.Net.D
ext.net 5.3
最新发布
05-05
Ext.NET 5.3 是一个基于 ASP.NET Core 的 Web 应用程序开发框架，它提供了丰富的 UI 组件和工具，可帮助开发人员快速构建出现代化的 Web 应用程序。Ext.NET 5.3 还支持跨平台开发，可以在 Windows、Linux 和 macOS ...

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值