Ext.NET 4.1.0 搭建页面布局

Ext.NET目前的最新版本为4.1.0，可以从官网：ext.net上下载，具体下载网址为：http://ext.net/download/。

文件下载下来后，在\lib\目录下存在3个文件夹，分别对应不同的版本，我这里使用net40下的dll，使用的开发工具是visual studio 2013。

先来看一下最终的效果图：

第一步：首先部署开发环境：

步骤1：新建一个ASP.NET Web应用程序，空项目即可。

步骤2：引入dll，net40下的所有dll(包括：Ext.Net.dll、Ext.Net.Utilities.dll、Newtonsoft.Json.dll、Transformer.NET.dll)，如下图：

步骤3：添加内容到配置文件(Web.config)。在下载下来的文件中，有个“1. README.md”，里面有具体的配置文件内容，在这里我贴出我所用到的：

<?xml version="1.0" encoding="utf-8"?>

<configuration>
  <configSections>
    <section name="extnet" type="Ext.Net.GlobalConfig" requirePermission="false" />
  </configSections>
  <extnet theme="Triton" licenseKey="** Ext.NET LICENSE KEY HERE **" initScriptMode="Linked" />
  <system.web>
    <compilation debug="true" targetFramework="4.5" />
    <httpRuntime targetFramework="4.5" />
    <pages>
      <controls>
        <add assembly="Ext.Net" namespace="Ext.Net" tagPrefix="ext" />
      </controls>
      <namespaces>
        <add namespace="Ext.Net"/>
      </namespaces>
    </pages>
  </system.web>
  <system.webServer>
    <validation validateIntegratedModeConfiguration="false" />
    <modules>
      <add name="DirectRequestModule" preCondition="managedHandler" type="Ext.Net.DirectRequestModule, Ext.Net" />
    </modules>
    <handlers>
      <add name="DirectRequestHandler" verb="*" path="*/ext.axd" preCondition="integratedMode" type="Ext.Net.ResourceHandler" />
    </handlers>
  </system.webServer>
  <runtime>
    <assemblyBinding xmlns="urn:schemas-microsoft-com:asm.v1">
      <dependentAssembly>
        <assemblyIdentity name="Newtonsoft.Json" publicKeyToken="30ad4fe6b2a6aeed" />
        <bindingRedirect oldVersion="0.0.0.0-8.0.0.0" newVersion="8.0.0.0" />
      </dependentAssembly>
      <dependentAssembly>
        <assemblyIdentity name="Ext.Net.Utilities" publicKeyToken="2c34ac34702a3c23" />
        <bindingRedirect oldVersion="0.0.0.0-2.5.0" newVersion="2.5.0" />
      </dependentAssembly>
      <dependentAssembly>
        <assemblyIdentity name="Transformer.NET" publicKeyToken="e274d618e7c603a7" />
        <bindingRedirect oldVersion="0.0.0.0-2.1.1" newVersion="2.1.1" />
      </dependentAssembly>
    </assemblyBinding>
  </runtime>

</configuration>

至此，配置完成，下面就可以来体验一下Ext.NET(版本4.1.0)的功能了。

添加一个Web窗体，然后就可以看到ext:控件了，注意：如果ext:控件没有出来，清理新生成一下或者等一会就可以了。

 <ext:Button ID="btnLogin" runat="server" Text="登录" />

如下图：

第二步：搭建布局

整个布局分为三个部分：North、West和Center。North块基本上为固定的区域；Center块为主要业务处理块，对于West区域的每个菜单项都将会显示在Center块中。

这三个部分用Region="North"、Region="West"、Region="Center"来区分，这个和以前的版本有所不同。

1. North

整个页面的北面，即顶部，用一个面板(Panel)来刻画。代码如下：(这里需要用到一张图片top.jpg)

<ext:Panel ID="NorthPanel" Region="North" runat="server">
     <Content>
           <div style="background-image: url(‘image/top.jpg‘); height: 70px;">
           </div>
      </Content>
</ext:Panel>

2.West

整个页面的西部，即各个菜单项所在之处，在这里我只写了2个菜单，如果需要直接在下面添加即可，代码如下：

<ext:Panel ID="WestPanel" runat="server" Split="true" Region="West" Width="200" Layout="AccordionLayout" CollapseMode="Header">
                <Items>
                    <ext:Panel ID="Panel2" runat="server" Title="信息查看" CollapseMode="Header" Icon="ApplicationEdit"
                        AutoScroll="true" Layout="FitLayout">
                        <Items>
                            <ext:TreePanel ID="TreePanel1" runat="server" AutoScroll="true" Lines="true" ContainerScroll="false"
                                RootVisible="false" Header="false" HideParent="True">
                                <Root>
                                    <ext:Node Expandable="true">
                                        <Children>
                                            <ext:Node NodeID="1" Text="公司信息" Icon="Application" Href="#" Qtip="公司信息" Leaf="true">
                                                <CustomConfig>
                                                    <ext:ConfigItem Name="url" Value="Info.aspx" />
                                                    <ext:ConfigItem Name="hash" Value="123" />
                                                </CustomConfig>
                                            </ext:Node>
                                            <ext:Node NodeID="2" Text="职位信息" Icon="Application" Href="#" Leaf="true" Qtip="职位信息">
                                                <CustomConfig>
                                                    <ext:ConfigItem Name="url" Value="Mation.aspx" />
                                                    <ext:ConfigItem Name="hash" Value="234" />
                                                </CustomConfig>
                                            </ext:Node>
                                            <ext:Node NodeID="3" Text="员工信息" Icon="Application" Href="#" Leaf="true" Qtip="员工入职">
                                                <CustomConfig>
                                                    <ext:ConfigItem Name="url" Value="Mation.aspx" />
                                                    <ext:ConfigItem Name="hash" Value="234" />
                                                </CustomConfig>
                                            </ext:Node>
                                        </Children>
                                    </ext:Node>

                                </Root>
                                <Listeners>
                                    <ItemClick Handler="if (record.data.url) { addTab(#{TabPanel1}, record); return false;}" />
                                </Listeners>
                            </ext:TreePanel>
                        </Items>
                    </ext:Panel>
                    <ext:Panel ID="Panel1" runat="server" Title="开始管理" Icon="ApplicationAdd" Collapsible="true" CollapseMode="Header"
                        AutoScroll="true" Layout="AbsoluteLayout">
                        <Items>
                            <ext:TreePanel ID="TreePanel2" runat="server" AutoScroll="true" Lines="true" ContainerScroll="false"
                                RootVisible="false" Header="false" HideParent="True">
                                <Root>
                                    <ext:Node Expandable="true">
                                        <Children>
                                            <ext:Node NodeID="1" Text="员工管理" Icon="UserMagnify" Href="#" Qtip="公司信息" Leaf="true">
                                                <CustomConfig>
                                                    <ext:ConfigItem Name="url" Value="Info.aspx" />
                                                    <ext:ConfigItem Name="hash" Value="123" />
                                                </CustomConfig>
                                            </ext:Node>
                                            <ext:Node NodeID="2" Text="职位信息管理" Icon="UserMagnify" Href="#" Leaf="true" Qtip="职位信息">
                                                <CustomConfig>
                                                    <ext:ConfigItem Name="url" Value="Mation.aspx" />
                                                    <ext:ConfigItem Name="hash" Value="234" />
                                                </CustomConfig>
                                            </ext:Node>
                                            <ext:Node NodeID="3" Text="工资管理" Icon="UserMagnify" Href="#" Leaf="true" Qtip="员工入职">
                                                <CustomConfig>
                                                    <ext:ConfigItem Name="url" Value="Mation.aspx" />
                                                    <ext:ConfigItem Name="hash" Value="234" />
                                                </CustomConfig>
                                            </ext:Node>
                                        </Children>
                                    </ext:Node>

                                </Root>
                                <Listeners>
                                    <ItemClick Handler="if (record.data.url) { addTab(#{TabPanel1}, record); return false;}" />
                                </Listeners>
                            </ext:TreePanel>
                        </Items>
                    </ext:Panel>
                </Items>
</ext:Panel>

3.Center

整个页面的中部，业务处理模块部分，代码如下：

<ext:TabPanel ID="CenterPanel" Region="Center" runat="server">
                <Items>
                    <ext:Panel ID="CenterTab1" runat="server" Icon="House" Title="欢迎" Border="false">
                        <Loader Url="Welcome.htm" runat="server" AutoLoad="true" />
                    </ext:Panel>
                </Items>
                <Plugins>
                    <ext:TabCloseMenu ID="TabCloseMenu1" runat="server" CloseTabText="关闭" CloseOtherTabsText="除此之外全部关闭"
                        CloseAllTabsText="关闭所有窗口" />
                </Plugins>
</ext:TabPanel>

上面介绍了布局的基本情况，下面介绍核心步骤：如何将各个菜单项在Center部分依次显示出来，在ext.net官网的Examples中(网址：http://examples.ext.net/#/TreePanel/Basic/SiteMap/)给出了在后台加载节点的方式，这里我要给出的是直接在ext:node中给出节点。下面给出点击菜单项加载到Center的ExtJS代码：

<script type="text/javascript">
        var addTab = function (tabPanel, record) {
            var id = record.id;
            var url = record.data.url;
            var text = record.data.text;
            var tab = tabPanel.getComponent(id);
            if (!tab) {
                tab = tabPanel.add({
                    id: id,
                    title: text,
                    closable: true,
                    autoLoad: {
                        showMask: true,
                        scripts: true,
                        mode: "iframe",
                        url: url,
                        maskMsg: "正在加载：<span style=‘font-weight:bold‘>" + text + "</span> 页面..."
                    }
                });
            }
            tabPanel.setActiveTab(tab);
        }
    </script>

至此，所有工作都已经完成，下面给出整个页面的所有代码(可以直接运行)。

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

<!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></title>
    <script type="text/javascript">
        var addTab = function (tabPanel, record) {
            var id = record.id;
            var url = record.data.url;
            var text = record.data.text;
            var tab = tabPanel.getComponent(id);
            if (!tab) {
                tab = tabPanel.add({
                    id: id,
                    title: text,
                    closable: true,
                    autoLoad: {
                        showMask: true,
                        scripts: true,
                        mode: "iframe",
                        url: url,
                        maskMsg: "正在加载：<span style=‘font-weight:bold‘>" + text + "</span> 页面..."
                    }
                });
            }
            tabPanel.setActiveTab(tab);
        }
    </script>
</head>
<body>

    <ext:ResourceManager ID="ResourceManager1" runat="server" Theme="Default" />
    <ext:Viewport ID="ViewPort1" runat="server" Layout="BorderLayout">
        <Items>
            <ext:Panel ID="Panel3" Region="North" runat="server">
                <Content>
                    <div style="background-image: url(‘image/top.jpg‘); height: 70px;">
                    </div>
                </Content>
            </ext:Panel>
            <ext:Panel ID="WestPanel" runat="server" Split="true" Region="West" Width="200" Layout="AccordionLayout" CollapseMode="Header">
                <Items>
                    <ext:Panel ID="Panel2" runat="server" Title="信息查看" CollapseMode="Header" Icon="ApplicationEdit"
                        AutoScroll="true" Layout="FitLayout">
                        <Items>
                            <ext:TreePanel ID="TreePanel1" runat="server" AutoScroll="true" Lines="true" ContainerScroll="false"
                                RootVisible="false" Header="false" HideParent="True">
                                <Root>
                                    <ext:Node Expandable="true">
                                        <Children>
                                            <ext:Node NodeID="1" Text="公司信息" Icon="Application" Href="#" Qtip="公司信息" Leaf="true">
                                                <CustomConfig>
                                                    <ext:ConfigItem Name="url" Value="Info.aspx" />
                                                    <ext:ConfigItem Name="hash" Value="123" />
                                                </CustomConfig>
                                            </ext:Node>
                                            <ext:Node NodeID="2" Text="职位信息" Icon="Application" Href="#" Leaf="true" Qtip="职位信息">
                                                <CustomConfig>
                                                    <ext:ConfigItem Name="url" Value="Mation.aspx" />
                                                    <ext:ConfigItem Name="hash" Value="234" />
                                                </CustomConfig>
                                            </ext:Node>
                                            <ext:Node NodeID="3" Text="员工信息" Icon="Application" Href="#" Leaf="true" Qtip="员工入职">
                                                <CustomConfig>
                                                    <ext:ConfigItem Name="url" Value="Mation.aspx" />
                                                    <ext:ConfigItem Name="hash" Value="234" />
                                                </CustomConfig>
                                            </ext:Node>
                                        </Children>
                                    </ext:Node>

                                </Root>
                                <Listeners>
                                    <ItemClick Handler="if (record.data.url) { addTab(#{CenterPanel}, record); return false;}" />
                                </Listeners>
                            </ext:TreePanel>
                        </Items>
                    </ext:Panel>
                    <ext:Panel ID="Panel1" runat="server" Title="开始管理" Icon="ApplicationAdd" Collapsible="true" CollapseMode="Header"
                        AutoScroll="true" Layout="AbsoluteLayout">
                        <Items>
                            <ext:TreePanel ID="TreePanel2" runat="server" AutoScroll="true" Lines="true" ContainerScroll="false"
                                RootVisible="false" Header="false" HideParent="True">
                                <Root>
                                    <ext:Node Expandable="true">
                                        <Children>
                                            <ext:Node NodeID="1" Text="员工管理" Icon="UserMagnify" Href="#" Qtip="公司信息" Leaf="true">
                                                <CustomConfig>
                                                    <ext:ConfigItem Name="url" Value="Info.aspx" />
                                                    <ext:ConfigItem Name="hash" Value="123" />
                                                </CustomConfig>
                                            </ext:Node>
                                            <ext:Node NodeID="2" Text="职位信息管理" Icon="UserMagnify" Href="#" Leaf="true" Qtip="职位信息">
                                                <CustomConfig>
                                                    <ext:ConfigItem Name="url" Value="Mation.aspx" />
                                                    <ext:ConfigItem Name="hash" Value="234" />
                                                </CustomConfig>
                                            </ext:Node>
                                            <ext:Node NodeID="3" Text="工资管理" Icon="UserMagnify" Href="#" Leaf="true" Qtip="员工入职">
                                                <CustomConfig>
                                                    <ext:ConfigItem Name="url" Value="Mation.aspx" />
                                                    <ext:ConfigItem Name="hash" Value="234" />
                                                </CustomConfig>
                                            </ext:Node>
                                        </Children>
                                    </ext:Node>

                                </Root>
                                <Listeners>
                                    <ItemClick Handler="if (record.data.url) { addTab(#{CenterPanel}, record); return false;}" />
                                </Listeners>
                            </ext:TreePanel>
                        </Items>
                    </ext:Panel>
                </Items>
            </ext:Panel>
            <ext:TabPanel ID="CenterPanel" Region="Center" runat="server">
                <Items>
                    <ext:Panel ID="CenterTab1" runat="server" Icon="House" Title="欢迎" Border="false">
                        <Loader Url="Welcome.htm" runat="server" AutoLoad="true" />
                    </ext:Panel>
                </Items>
                <Plugins>
                    <ext:TabCloseMenu ID="TabCloseMenu1" runat="server" CloseTabText="关闭" CloseOtherTabsText="除此之外全部关闭"
                        CloseAllTabsText="关闭所有窗口" />
                </Plugins>
            </ext:TabPanel>
        </Items>
    </ext:Viewport>
</body>
</html>

最后，给出需要注意的地方：

1.<ext:ResourceManager ID="ResourceManager1" runat="server" Theme="Default" />这句话不可少，Theme为主题，也可以说成皮肤，可以自行设定；

2.Info.aspx、Mation.aspx，需要新建这两个页面；

3.更多信息见ext.net官网。

有了上面的布局，就可以很轻松的完成相关的管理系统。

以上只是个人理解。

如果有需要源代码的直接留下邮箱。

时间： 2024-10-23 11:42:46

Ext.NET 4.1.0 搭建页面布局的相关文章

完美解决 IOS系统safari5.0 浏览器页面布局iframe滚动栏失效问题

在iframe外层包一层div,加入例如以下样式: style="-webkit-overflow-scrolling:touch;overflow:auto;" 代码例如以下: <div  style="width:100%;-webkit-overflow-scrolling:touch;overflow:auto;"><iframe name="main" id="main" src="../

完美解决 IOS系统safari5.0 浏览器页面布局iframe滚动条失效问题，iossafari5.0

在iframe外层包一层div,添加如下样式:style="-webkit-overflow-scrolling:touch;overflow:auto;" 代码如下: <div  style="width:100%;-webkit-overflow-scrolling:touch;overflow:auto;"><iframe name="main" id="main" src="../demo.

jquery-easyui实现页面布局和增删改查操作（SSH2框架支持）转载

http://blessht.iteye.com/blog/1069749/ 已注册:ooip 关联的csdn 前几天心血来潮用jquery-easyui+spring.struts2.hibernate实现了一个系统的一小部分功能,下面给大家分享一下. 首先看运行效果: [图一:登录页] [图二:页面布局] [图三:用户编辑层] [图四:确认弹出框] 准备 easyui插件简介在这就不赘述了,大家可以在iteye上找到很多该插件的相关消息. 如果页面需要使用easyui插件,需要引进一下js和

如何在ASP.NET Web站点中统一页面布局[Creating a Consistent Layout in ASP.NET Web Pages(Razor) Sites]

如何在ASP.NET Web站点中统一页面布局[Creating a Consistent Layout in ASP.NET Web Pages(Razor) Sites] 一.布局页面介绍[About Layout Pages] 很多网站有些内容需要显示在各个页面中,比如Header,Footer或者告诉用户已经登录的部分.ASP.NET允许你创建一个单独的文件来包含文本.标签和代码的内容块,从而搭建一个风格整齐的网站.接下来你就可以将这个内容块插入到任何你想要让它展示的页面中.采用这种方法

无废话ExtJs 入门教程十六[页面布局：Layout]

无废话ExtJs 入门教程十六[页面布局:Layout] extjs技术交流,欢迎加群(201926085) 首先解释什么是布局: 来自百度词典的官方解释:◎ 布局 bùjú: [distribution;layout] 对事物的全面规划和安排,布:陈设:设置. 我对布局理解是“把**东西放在**位置显示”[动词]. ok,我们这节课就讲一下怎么样把 ExtJs 的组件,放到我们想放置的位置. 一.常用布局 (1)ContainerLayout:默认布局方式,其他布局继承该类进行扩展功能.显示:

一步一步构建手机WebApp开发——页面布局篇

继上一篇:一步一步构建手机WebApp开发——环境搭建篇过后,我相信很多朋友都想看看实战案例,这一次的教程是页面布局篇,先上图: 如上图所示,此篇教程便是教初学者如何快速布局这样的页面.废话少说,直接上代码 注意:此教程是接上一篇教程,也就是所有的内容是直接从body开始写,当然,也会贴出所有代码给大家. 第一步:框架的布局及幻灯片的布局(Html) ① 如上图所示,我们应该准备以下容器,方便填充内容 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19

ExtJS 页面布局

EXT标准布局类 面板相当于一张干净的白纸,如果直接在上面添加内容,将很难控制面板中内容的显示位置,面板元素越多就越显得凌乱,所以需要在面板上划分不同的区域,将面板内容展示到希望的位置上.ExtJS通过提供多种布局类来为面板提供支持,主要包括如下10种:     ContainerLayout(容器布局)     FitLayout(自适应布局)     AccordionLayout(折叠布局)     CardLayout(卡片式布局)     AnchorLayout(锚点布局)    

HTML页面布局

接下来的下面代码,只是给了一个大的前端编写布局,如果你已经是牛人了,就当没看到,如果是一些初学者,不妨拿去用用,里面也写了一些常用的css样式,现在虽然有很多牛逼的前段框架,用起来也非常得心应手,但是如果你要对自己很多定制化需求,最后肯定是要自己来编写前端页面的 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <!--网页标题-->

CSS3与页面布局学习总结（八）——浏览器兼容与前端性能优化

目录 一.浏览器兼容 1.1.概要 1.2.浏览器内核 1.3.浏览器市场份额(Browser Market Share) 1.4.兼容的一般标准 1.5.CSS Reset 1.6.CSS Hack 1.6.1.条件注释法 1.6.2.样式内属性标记法 1.6.3.选择器前缀法 1.7.文档模式 (X-UA-Compatible) 1.8.javascript兼容 二.前端性能优化 2.1.概要 2.2.减少HTTP请求数量 2.2.1.图片地图 2.2.2.精灵图片(Sprite) 2.2.