一步步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的朋友对下图很亲切了

 一步步Ext.Net(一),配置及简单布局_第1张图片

1.     配置开发环境

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

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

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

 

一步步Ext.Net(一),配置及简单布局_第2张图片

 

顺便说一个问题,官方的要求的.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,如下图。

 

一步步Ext.Net(一),配置及简单布局_第3张图片

 

 

一步步Ext.Net(一),配置及简单布局_第4张图片

 

 

一步步Ext.Net(一),配置及简单布局_第5张图片

 

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

 

一步步Ext.Net(一),配置及简单布局_第6张图片

 

 

 

至此,选项卡添加完成。

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 调试效果如下,一个自适应高度及宽度的页面随之诞生了。

 

一步步Ext.Net(一),配置及简单布局_第7张图片

 

 

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

如下图,有13中布局可供参考。
一步步Ext.Net(一),配置及简单布局_第8张图片
转自:  http://www.cnblogs.com/goga21cn/archive/2011/06/19/ExtNetExample1.html
 

你可能感兴趣的:(一步步Ext.Net(一),配置及简单布局)