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

作者：Xiaxia的肖肖 | 来源：互联网 | 2023-06-06 16:01

一.预备知识1.简介Ext.Net由起初的Coolite发展而来，Ext.Net是一个开源的ASP.NET(WebFormMVC)组件库，对跨浏览器的S

一. 预备知识

1. 简介

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

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

官方网站:www.ext.net

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

1. 配置开发环境

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

下载Ext.Net&＃xff0c;http://www.ext.net/download/

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

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

配置VS工具箱

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

点“确定”后&＃xff0c;刚才新建的选项卡中如下所示&＃xff0c;

至此&＃xff0c;选项卡添加完成。

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

配置Web.config

手动修改Web.config&＃xff0c;添加httpModules节,完整代码如下

xml version&＃61;"1.0"?>

<system.web>

httpModules>

assemblies>

compilation>

system.web>

configuration>

一. 从布局说起

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

<%&＃64; Register Assembly&＃61;"Ext.Net" Namespace&＃61;"Ext.Net" TagPrefix&＃61;"ext" %>

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

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

<%&＃64; Page Language&＃61;"C#" AutoEventWireup&＃61;"true" CodeBehind&＃61;"WebForm1.aspx.cs" Inherits&＃61;"Chapter1.WebForm1" %>

<%&＃64; Register Assembly&＃61;"Ext.Net" Namespace&＃61;"Ext.Net" TagPrefix&＃61;"ext" %><%--必须有--%>

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

<title>布局示例title>

head>

<body>

<ext:ResourceManager ID&＃61;"ResourceManager1" runat&＃61;"server" /><%--必须有--%>

<ext:Viewport ID&＃61;"Viewport1" runat&＃61;"server" Layout&＃61;"FitLayout"><%--Layout&＃61;"FitLayout" 拉伸布局--%>

<Items>

<ext:FormPanel runat&＃61;"server" Frame&＃61;"true" LabelWidth&＃61;"40"><%--LabelWidth&＃61;"40" Label宽40&＃xff0c;根据Label文字总宽度手动设定--%>

<Items>

<ext:Container ID&＃61;"Container1" runat&＃61;"server" Layout&＃61;"Column" Height&＃61;"106" LabelAlign&＃61;"Left">

<Items>

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

<Items>

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

<ext:RadioGroup runat&＃61;"server" ID&＃61;"rdoSex" FieldLabel&＃61;"性别">

<Items>

<ext:Radio runat&＃61;"server" ID&＃61;"rdoSexMen" BoxLabel&＃61;"男士" />

<ext:Radio runat&＃61;"server" ID&＃61;"rdoSexWoman" BoxLabel&＃61;"女士" />

Items>

ext:RadioGroup>

<ext:NumberField runat&＃61;"server" ID&＃61;"numAge" MinValue&＃61;"1" FieldLabel&＃61;"年龄" AnchorHorizontal&＃61;"95%" />

<ext:TextField runat&＃61;"server" ID&＃61;"txtEmail" AllowBlank&＃61;"false" FieldLabel&＃61;"邮箱" AnchorHorizontal&＃61;"95%" />

Items>

ext:Container>

<ext:Container ID&＃61;"Container3" runat&＃61;"server" ColumnWidth&＃61;".5" Layout&＃61;"FormLayout" LabelWidth&＃61;"40">

<Items>

<ext:TextField runat&＃61;"server" ID&＃61;"txtCode" FieldLabel&＃61;"编码" AnchorHorizontal&＃61;"100%" />

<ext:TextField runat&＃61;"server" ID&＃61;"txtTl" FieldLabel&＃61;"电话" AnchorHorizontal&＃61;"100%" Disabled&＃61;"true" />

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

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

Items>

ext:Container>

Items>

ext:Container>

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

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

Items>

ext:FormPanel>

Items>

ext:Viewport>

form>

body>

html>

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

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

如下图&＃xff0c;有13中布局可供参考。

转自&＃xff1a; http://www.cnblogs.com/goga21cn/archive/2011/06/19/ExtNetExample1.html

推荐阅读

format
VScode格式化文档换行或不换行的设置方法

本文介绍了在VScode中设置格式化文档换行或不换行的方法，包括使用插件和修改settings.json文件的内容。详细步骤为：找到settings.json文件，将其中的代码替换为指定的代码。 ... [详细]

蜡笔小新 2023-12-14 17:15:38
md5
Java工具类库Hutool介绍及功能概述

本文介绍了Java工具类库Hutool，该工具包封装了对文件、流、加密解密、转码、正则、线程、XML等JDK方法的封装，并提供了各种Util工具类。同时，还介绍了Hutool的组件，包括动态代理、布隆过滤、缓存、定时任务等功能。该工具包可以简化Java代码，提高开发效率。 ... [详细]

蜡笔小新 2023-12-14 14:29:36
md5
android listview OnItemClickListener失效原因

最近在做listview时发现OnItemClickListener失效的问题，经过查找发现是因为button的原因。不仅listitem中存在button会影响OnItemClickListener事件的失效，还会导致单击后listview每个item的背景改变，使得item中的所有有关焦点的事件都失效。本文给出了一个范例来说明这种情况，并提供了解决方法。 ... [详细]

蜡笔小新 2023-12-14 14:25:50
md5
Web学习历程记录（七）——Tomcat基本概念和配置

本文介绍了Web学习历程记录中关于Tomcat的基本概念和配置。首先解释了Web静态Web资源和动态Web资源的概念，以及C/S架构和B/S架构的区别。然后介绍了常见的Web服务器，包括Weblogic、WebSphere和Tomcat。接着详细讲解了Tomcat的虚拟主机、web应用和虚拟路径映射的概念和配置过程。最后简要介绍了http协议的作用。本文内容详实，适合初学者了解Tomcat的基础知识。 ... [详细]

蜡笔小新 2023-12-13 17:08:24
version
MyBatis多表查询与动态SQL使用

本文介绍了MyBatis多表查询与动态SQL的使用方法，包括一对一查询和一对多查询。同时还介绍了动态SQL的使用，包括if标签、trim标签、where标签、set标签和foreach标签的用法。文章还提供了相关的配置信息和示例代码。 ... [详细]

蜡笔小新 2023-12-12 17:12:51
range
MooTools和JQuery并排 - MooTools and JQuery Side by Side

IjustinheritedsomewebpageswhichusesMooTools.IneverusedMooTools.NowIneedtoaddsomef ... [详细]

蜡笔小新 2023-12-12 13:43:58
version
kotlin动画实现上下移动、放大缩小、旋转功能

本文介绍了使用kotlin实现动画效果的方法，包括上下移动、放大缩小、旋转等功能。通过代码示例演示了如何使用ObjectAnimator和AnimatorSet来实现动画效果，并提供了实现抖动效果的代码。同时还介绍了如何使用translationY和translationX来实现上下和左右移动的效果。最后还提供了一个anim_small.xml文件的代码示例，可以用来实现放大缩小的效果。 ... [详细]

蜡笔小新 2023-12-14 17:29:08
import
Spring源码解密之默认标签的解析方式分析

本文分析了Spring源码解密中默认标签的解析方式。通过对命名空间的判断，区分默认命名空间和自定义命名空间，并采用不同的解析方式。其中，bean标签的解析最为复杂和重要。 ... [详细]

蜡笔小新 2023-12-14 17:24:50
version
Spring特性实现接口多类的动态调用详解

本文详细介绍了如何使用Spring特性实现接口多类的动态调用。通过对Spring IoC容器的基础类BeanFactory和ApplicationContext的介绍，以及getBeansOfType方法的应用，解决了在实际工作中遇到的接口及多个实现类的问题。同时，文章还提到了SPI使用的不便之处，并介绍了借助ApplicationContext实现需求的方法。阅读本文，你将了解到Spring特性的实现原理和实际应用方式。 ... [详细]

蜡笔小新 2023-12-14 03:24:19
import
在重复造轮子的情况下用ProxyServlet反向代理来减少工作量

像不少公司内部不同团队都会自己研发自己工具产品，当各个产品逐渐成熟，到达了一定的发展瓶颈，同时每个产品都有着自己的入口，用户 ... [详细]

蜡笔小新 2023-12-13 15:19:01
version
自动轮播，反转播放的ViewPagerAdapter的使用方法和效果展示

本文介绍了如何使用自动轮播、反转播放的ViewPagerAdapter，并展示了其效果。该ViewPagerAdapter支持无限循环、触摸暂停、切换缩放等功能。同时提供了使用GIF.gif的示例和github地址。通过LoopFragmentPagerAdapter类的getActualCount、getActualItem和getActualPagerTitle方法可以实现自定义的循环效果和标题展示。 ... [详细]

蜡笔小新 2023-12-13 14:41:31
version
Android系统移植与调试之如何修改Android设备状态条上音量加减键在横竖屏切换的时候的显示于隐藏

本文介绍了如何修改Android设备状态条上音量加减键在横竖屏切换时的显示与隐藏。通过修改系统文件system_bar.xml实现了该功能，并分享了解决思路和经验。 ... [详细]

蜡笔小新 2023-12-13 13:12:05
version
Android 7自学笔记总结、移动架构视频、安卓面试真题、项目实战源码讲义

本文介绍了Android 7的学习笔记总结，包括最新的移动架构视频、大厂安卓面试真题和项目实战源码讲义。同时还分享了开源的完整内容，并提醒读者在使用FileProvider适配时要注意不同模块的AndroidManfiest.xml中配置的xml文件名必须不同，否则会出现问题。 ... [详细]

蜡笔小新 2023-12-13 10:06:58
version
Java学习笔记之面向对象编程（OOP）

本文介绍了Java学习笔记中的面向对象编程（OOP）内容，包括OOP的三大特性（封装、继承、多态）和五大原则（单一职责原则、开放封闭原则、里式替换原则、依赖倒置原则）。通过学习OOP，可以提高代码复用性、拓展性和安全性。 ... [详细]

蜡笔小新 2023-12-13 08:44:30
version
在Xamarin XAML语言中如何在页面级别构建ControlTemplate控件模板

本文介绍了在Xamarin XAML语言中如何在页面级别构建ControlTemplate控件模板的方法和步骤，包括将ResourceDictionary添加到页面中以及在ResourceDictionary中实现模板的构建。通过本文的阅读，读者可以了解到在Xamarin XAML语言中构建控件模板的具体操作步骤和语法形式。 ... [详细]

蜡笔小新 2023-12-12 17:52:50

Xiaxia的肖肖

这个家伙很懒，什么也没留下！

Tags | 热门标签

RankList | 热门文章