ext.net 开发学习——常用布局（八）

于 2019-01-08 01:39:41 发布
阅读量278 收藏
点赞数

 Ext.Net 官网Demo 有几种布局http://examples.ext.net/

 

因需求不同，布局也同样多种多样，现整理部分常用的布局+源码

源码：

<form id="form1" runat="server">
    <ext:ResourceManager ID="RMEmployeeInfos" runat="server" />
    <div>
        <ext:Viewport ID="Viewport1" runat="server" Layout="FitLayout">
            <Items>
                <ext:RowLayout ID="RowLayout1" runat="server">
                    <Rows>
                        <ext:LayoutRow RowHeight="0.03">
                            <ext:Toolbar ID="toolBarMenu" runat="server">
                                <Items>
                                    <ext:Button ID="btnCreate" runat="server" Text="新建" Icon="FilmAdd">
                                    </ext:Button>
                                    <ext:Button ID="Button1" runat="server" Text="打开" Icon="FilmGo">
                                    </ext:Button>
                                    <ext:Button ID="Button2" runat="server" Text="编辑">
                                    </ext:Button>
                                    <ext:Button ID="Button3" runat="server" Text="删除">
                                    </ext:Button>
                                    <ext:Button ID="Button4" runat="server" Text="转抄">
                                    </ext:Button>
                                    <ext:Button ID="Button5" runat="server" Text="红字">
                                    </ext:Button>
                                    <ext:Button ID="Button6" runat="server" Text="蓝字">
                                    </ext:Button>
                                    <ext:ToolbarSeparator />
                                    <ext:Button ID="Button7" runat="server" Text="打印">
                                    </ext:Button>
                                    <ext:ToolbarSeparator />
                                    <ext:Button ID="Button8" runat="server" Text="提交">
                                    </ext:Button>
                                    <ext:Button ID="Button9" runat="server" Text="通过">
                                    </ext:Button>
                                    <ext:Button ID="Button10" runat="server" Text="退回">
                                    </ext:Button>
                                    <ext:Button ID="Button11" runat="server" Text="加签">
                                    </ext:Button>
                                    <ext:Button ID="Button12" runat="server" Text="委托">
                                    </ext:Button>
                                    <ext:Button ID="Button13" runat="server" Text="收回">
                                    </ext:Button>
                                    <ext:Button ID="Button14" runat="server" Text="催办">
                                    </ext:Button>
                                    <ext:Button ID="Button15" runat="server" Text="意见">
                                    </ext:Button>
                                    <ext:ToolbarSeparator />
                                    <ext:Button ID="Button16" runat="server" Text="关联">
                                    </ext:Button>
                                    <ext:ToolbarSeparator />
                                    <ext:Button ID="Button17" runat="server" Text="附件">
                                    </ext:Button>
                                    <ext:Button ID="Button18" runat="server" Text="历史">
                                    </ext:Button>
                                    <ext:Button ID="Button19" runat="server" Text="自定义">
                                    </ext:Button>
                                    <ext:ToolbarSeparator />
                                    <ext:Button ID="Button20" runat="server" Text="帮助">
                                    </ext:Button>
                                    <ext:Button ID="Button21" runat="server" Text="关闭">
                                    </ext:Button>
                                </Items>
                            </ext:Toolbar>
                        </ext:LayoutRow>
                        <ext:LayoutRow RowHeight="0.957">
                            <ext:Panel runat="server">
                                <Items>
                                    <ext:BorderLayout runat="server">
                                        <West Collapsible="true" MaxWidth="500" >
                                            <ext:Panel ID="Panel5" runat="server" Title="West" Width="200">
                                                <Items>
                                                </Items>
                                            </ext:Panel>
                                        </West>
                                        <Center>
                                            <ext:Panel runat="server">
                                                <Items>
                                                    <ext:BorderLayout ID="BorderLayout1" runat="server">
                                                        <Center MaxHeight="700" MinHeight="100">
                                                            <ext:Panel ID="Panel3" runat="server" Height="500" Layout="Accordion" Title="North">
                                                            </ext:Panel>
                                                        </Center>
                                                        <South Collapsible="true">
                                                            <ext:Panel ID="Panel4" Height="150" runat="server" Title="South">
                                                            </ext:Panel>
                                                        </South>
                                                    </ext:BorderLayout>
                                                </Items>
                                            </ext:Panel>
                                        </Center>
                                    </ext:BorderLayout>
                                </Items>
                            </ext:Panel>
                        </ext:LayoutRow>
                    </Rows>
                </ext:RowLayout>
            </Items>
        </ext:Viewport>
    </div>
    </form>

二


源码：

  <form id="form1" runat="server">
    <div>
        <ext:ResourceManager ID="ResourceManager1" runat="server">
        </ext:ResourceManager>
        <ext:Viewport ID="vpMainCenter" runat="server" Layout="Fit">
            <Items>
                <ext:RowLayout runat="server">
                    <Rows>
                        <ext:LayoutRow RowHeight="0.033">
                            <ext:Toolbar ID="toolBarMenu" runat="server">
                                <Items>
                                    <ext:Button ID="btnCreate" runat="server" Text="新建" Icon="FilmAdd">
                                    </ext:Button>
                                    <ext:Button ID="Button1" runat="server" Text="打开" Icon="FilmGo">
                                    </ext:Button>
                                    <ext:Button ID="Button2" runat="server" Text="编辑">
                                    </ext:Button>
                                    <ext:Button ID="Button3" runat="server" Text="删除">
                                    </ext:Button>
                                    <ext:Button ID="Button4" runat="server" Text="转抄">
                                    </ext:Button>
                                    <ext:Button ID="Button5" runat="server" Text="红字">
                                    </ext:Button>
                                    <ext:Button ID="Button6" runat="server" Text="蓝字">
                                    </ext:Button>
                                    <ext:ToolbarSeparator />
                                    <ext:Button ID="Button7" runat="server" Text="打印">
                                    </ext:Button>
                                    <ext:ToolbarSeparator />
                                    <ext:Button ID="Button8" runat="server" Text="提交">
                                    </ext:Button>
                                    <ext:Button ID="Button9" runat="server" Text="通过">
                                    </ext:Button>
                                    <ext:Button ID="Button10" runat="server" Text="退回">
                                    </ext:Button>
                                    <ext:Button ID="Button11" runat="server" Text="加签">
                                    </ext:Button>
                                    <ext:Button ID="Button12" runat="server" Text="委托">
                                    </ext:Button>
                                    <ext:Button ID="Button13" runat="server" Text="收回">
                                    </ext:Button>
                                    <ext:Button ID="Button14" runat="server" Text="催办">
                                    </ext:Button>
                                    <ext:Button ID="Button15" runat="server" Text="意见">
                                    </ext:Button>
                                    <ext:ToolbarSeparator />
                                    <ext:Button ID="Button16" runat="server" Text="关联">
                                    </ext:Button>
                                    <ext:ToolbarSeparator />
                                    <ext:Button ID="Button17" runat="server" Text="附件">
                                    </ext:Button>
                                    <ext:Button ID="Button18" runat="server" Text="历史">
                                    </ext:Button>
                                    <ext:Button ID="Button19" runat="server" Text="自定义">
                                    </ext:Button>
                                    <ext:ToolbarSeparator />
                                    <ext:Button ID="Button20" runat="server" Text="帮助">
                                    </ext:Button>
                                    <ext:Button ID="Button21" runat="server" Text="关闭">
                                    </ext:Button>
                                </Items>
                            </ext:Toolbar>
                        </ext:LayoutRow>
                        <ext:LayoutRow RowHeight="0.957">
                            <ext:TabPanel runat="server" Region="Center" ID="tblMain" Border="false">
                                <Items>
                                    <ext:Panel runat="server" ID="panel1" Title="Right" Border="false" AutoScroll="true">
                                        <Items>
                                            <ext:RowLayout runat="server" ID="layout1">
                                                <Rows>
                                                    <ext:LayoutRow RowHeight="0.8">
                                                        <ext:Panel ID="layout1Panel" runat="server" Title="North" Collapsible="true">
                                                            <Items>
                                                                <ext:TableLayout runat="server" ID="tblPanel1" Columns="2">
                                                                    <Cells>
                                                                        <ext:Cell CellId="tblPanel1Left">
                                                                            <ext:Panel runat="server" Border="false" Width="800">
                                                                                <Items>
                                                                                    <ext:FieldSet ID="FieldSet2" runat="server" Title="Details" Collapsible="true" Layout="form">
                                                                                        <Items>
                                                                                            <ext:TableLayout ID="TableLayout1" runat="server" Columns="3">
                                                                                                <Cells>
                                                                                                    <ext:Cell>
                                                                                                        <ext:TextField ID="TextField1" Text="1111" runat="server" FieldLabel="1" />
                                                                                                    </ext:Cell>
                                                                                                    <ext:Cell>
                                                                                                        <ext:TextField ID="TextField2" Text="2222" runat="server" FieldLabel="2" />
                                                                                                    </ext:Cell>
                                                                                                    <ext:Cell>
                                                                                                        <ext:TextField ID="TextField3" Text="3333" runat="server" FieldLabel="3" />
                                                                                                    </ext:Cell>
                                                                                                    <ext:Cell>
                                                                                                        <ext:TextField ID="TextField4" Text="4444" runat="server" FieldLabel="4" />
                                                                                                    </ext:Cell>
                                                                                                    <ext:Cell>
                                                                                                        <ext:TextField ID="TextField5" runat="server" FieldLabel="5" />
                                                                                                    </ext:Cell>
                                                                                                    <ext:Cell>
                                                                                                        <ext:TextField ID="TextField6" runat="server" FieldLabel="6" />
                                                                                                    </ext:Cell>
                                                                                                    <ext:Cell>
                                                                                                        <ext:TextField ID="TextField7" runat="server" FieldLabel="7" />
                                                                                                    </ext:Cell>
                                                                                                </Cells>
                                                                                            </ext:TableLayout>
                                                                                        </Items>
                                                                                    </ext:FieldSet>
                                                                                    <ext:FieldSet ID="FieldSet1" runat="server" Title="Details" Collapsible="true" Layout="form">
                                                                                        <Items>
                                                                                            <ext:TableLayout ID="TableLayout2" runat="server" Columns="3">
                                                                                                <Cells>
                                                                                                    <ext:Cell>
                                                                                                        <ext:TextField ID="TextField8" Text="1111" runat="server" FieldLabel="1" />
                                                                                                    </ext:Cell>
                                                                                                    <ext:Cell>
                                                                                                        <ext:TextField ID="TextField9" Text="2222" runat="server" FieldLabel="2" />
                                                                                                    </ext:Cell>
                                                                                                    <ext:Cell>
                                                                                                        <ext:TextField ID="TextField10" Text="3333" runat="server" FieldLabel="3" />
                                                                                                    </ext:Cell>
                                                                                                    <ext:Cell>
                                                                                                        <ext:TextField ID="TextField11" Text="4444" runat="server" FieldLabel="4" />
                                                                                                    </ext:Cell>
                                                                                                    <ext:Cell>
                                                                                                        <ext:TextField ID="TextField12" runat="server" FieldLabel="5" />
                                                                                                    </ext:Cell>
                                                                                                    <ext:Cell>
                                                                                                        <ext:TextField ID="TextField13" runat="server" FieldLabel="6" />
                                                                                                    </ext:Cell>
                                                                                                    <ext:Cell>
                                                                                                        <ext:TextField ID="TextField14" runat="server" FieldLabel="7" />
                                                                                                    </ext:Cell>
                                                                                                </Cells>
                                                                                            </ext:TableLayout>
                                                                                        </Items>
                                                                                    </ext:FieldSet>
                                                                                </Items>
                                                                            </ext:Panel>
                                                                        </ext:Cell>
                                                                        <ext:Cell CellId="tblPanel1Right">
                                                                            <ext:Panel ID="Panel3" runat="server" AutoHeight="true" AutoWidth="true">
                                                                                <Items>
                                                                                    <ext:Image ID="Image1" runat="server" Height="300" Width="400" FieldLabel="照片" ImageUrl="\Resource\Images\ss.jpg">
                                                                                    </ext:Image>
                                                                                    <ext:Image ID="Image2" runat="server" Height="200" FieldLabel="照片" ImageUrl="\Resource\Images\ss.jpg" />
                                                                                </Items>
                                                                            </ext:Panel>
                                                                        </ext:Cell>
                                                                    </Cells>
                                                                </ext:TableLayout>
                                                            </Items>
                                                        </ext:Panel>
                                                    </ext:LayoutRow>
                                                    <ext:LayoutRow RowHeight="0.2">
                                                        <ext:TabPanel runat="server" ID="panel2TabPanel" Border="false">
                                                            <Items>
                                                                <ext:Panel ID="Panel4" Border="false" runat="server" Title="高级" Layout="FitLayout">
                                                                </ext:Panel>
                                                            </Items>
                                                        </ext:TabPanel>
                                                    </ext:LayoutRow>
                                                </Rows>
                                            </ext:RowLayout>
                                        </Items>
                                    </ext:Panel>
                                    <ext:Panel runat="server" Title="right">
                                    </ext:Panel>
                                </Items>
                            </ext:TabPanel>
                        </ext:LayoutRow>
                    </Rows>
                </ext:RowLayout>
            </Items>
        </ext:Viewport>
    </div>
    </form>




作者：PEPE
出处：http://pepe.cnblogs.com/
本文版权归作者和博客园共有，欢迎转载，但未经作者同意必须保留此段声明，且在文章页面明显位置给出原文连接，否则保留追究法律责任的权利。

weixin_34268310
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
EXT.NET各个版本下载地址
花海的专栏
07-05 1077
官网下载地址为：http://www.nuget.org/packages/Ext.NET
ext.net简介
编码改变世界
10-18 1237
Ext.NET原名Coolite，是Coolite发展到1.0版本后对该产品的重新命名。Ext.NET是基于.NET Framework 3.5的一套支持ASP.NET AJAX的Web控件，它基于跨浏览器的ExtJS 库开发而来并简化了开发步骤，包含有丰富的Ajax运用。 Ext.NET是开源的。由于Ext.NET基于ExtJS的缘故，所以不可避免会有类似ExtJS控件运行又大又慢的毛病，
.net EXT学习资料与源码
05-27
.net EXT学习资料与源码 ext是一个强大的js类库,以前是基于YAHOO-UI,现在已经完全独立了, 　　主要包括data,widget,form,grid,dd,menu,其中最强大的应该算grid了,编程思想是基于面对对象编程(oop),扩展性相当的好.可以自己写扩展.自己定义命名空间.web应用可能感觉太大.不过您可以根据需要按需加载您想要的类库就可以了. 　　主要包括三个大的文件ext-all.css,ext-base.js,ext-all.js(包括所有的类库,您可以根据需要进行删减.官方网站提供这一接口),在引用ext类库的时候.这三个文件必不可少. 　　它提供了丰富的，非常漂亮的外观体验，成为众多界面层开发人员的追捧！其核心的组件基本覆盖了我们构建富客户端的常用的组件。 　　从 Ext 2开始，商业版(针对那些以盈利为目的的开发方)要收费了。这可能会影响一些他的应用前景。 　　目前的最新版本为3.0RC，该版本是在2009年4月15日发布的。 三层架构， 　　三层架构(3-tier application) 通常意义上的三层架构就是将整个业务应用划分为：表现层（UI）、业务逻辑层（BLL）、数据访问层（DAL）。区分层次的目的即为了“高内聚，低耦合”的思想。 　　１、表现层（UI）：通俗讲就是展现给用户的界面，即用户在使用一个系统的时候他的所见所得。 　　２、业务逻辑层（BLL）：针对具体问题的操作，也可以说是对数据层的操作，对数据业务逻辑处理。 　　３、数据访问层（DAL）：该层所做事务直接操作数据库，针对数据的增添、删除、修改、更新、查找等。 [编辑本段]概述 　　在软件体系架构设计中，分层式结构是最常见，也是最重要的一种结构。微软推荐的分层式结构一般分为三层，从下至上分别为：数据访问层、业务逻辑层（又或成为领域层）、表示层。 　　三层结构原理： 　　3个层次中，系统主要功能和业务逻辑都在业务逻辑层进行处理。 　　所谓三层体系结构，是在客户端与数据库之间加入了一个“中间层”，也叫组件层。这里所说的三层体系，不是指物理上的三层，不是简单地放置三台机器就是三层体系结构，也不仅仅有B/S应用才是三层体系结构，三层是指逻辑上的三层，即使这三个层放置到一台机器上。 　　三层体系的应用程序将业务规则、数据访问、合法性校验等工作放到了中间层进行处理。通常情况下，客户端不直接与数据库进行交互，而是通过COM/DCOM通讯与中间层建立连接，再经由中间层与数据库进行交互。 　　表示层 　　　位于最外层（最上层），离用户最近。用于显示数据和接收用户输入的数据，为用户提供一种交互式操作的界面。 　　业务逻辑层 　　　业务逻辑层（Business Logic Layer）无疑是系统架构中体现核心价值的部分。它的关注点主要集中在业务规则的制定、业务流程的实现等与业务需求有关的系统设计，也即是说它是与系统所应对的领域（Domain）逻辑有关，很多时候，也将业务逻辑层称为领域层。例如Martin Fowler在《Patterns of Enterprise Application Architecture》一书中，将整个架构分为三个主要的层：表示层、领域层和数据源层。作为领域驱动设计的先驱Eric Evans，对业务逻辑层作了更细致地划分，细分为应用层与领域层，通过分层进一步将领域逻辑与领域逻辑的解决方案分离。 　　业务逻辑层在体系架构中的位置很关键，它处于数据访问层与表示层中间，起到了数据交换中承上启下的作用。由于层是一种弱耦合结构，层与层之间的依赖是向下的，底层对于上层而言是“无知”的，改变上层的设计对于其调用的底层而言没有任何影响。如果在分层设计时，遵循了面向接口设计的思想，那么这种向下的依赖也应该是一种弱依赖关系。因而在不改变接口定义的前提下，理想的分层式架构，应该是一个支持可抽取、可替换的“抽屉”式架构。正因为如此，业务逻辑层的设计对于一个支持可扩展的架构尤为关键，因为它扮演了两个不同的角色。对于数据访问层而言，它是调用者；对于表示层而言，它却是被调用者。依赖与被依赖的关系都纠结在业务逻辑层上，如何实现依赖关系的解耦，则是除了实现业务逻辑之外留给设计师的任务。 　　数据层 　　　数据访问层：有时候也称为是持久层，其功能主要是负责数据库的访问，可以访问数据库系统、二进制文件、文本文档或是XML文档。 　　简单的说法就是实现对数据表的Select，Insert，Update，Delete的操作。如果要加入ORM的元素，那么就会包括对象和数据表之间的mapping，以及对象实体的持久化。
如何在VS2010中编写ExtJs--001
随风的专栏
01-17 764
1.     配置开发环境 先从环境配置说起，本文及后续IDE皆以VS2010环境示例。 下载Ext.Net，http://www.ext.net/download/ 官方提供两个版本：社区版和专业版，这两个版本除了授权协议不一样外，对开发人员来说，没有任何区别。     顺便说一个问题，官方的要求的.NET Framework版本为3.5，其实需要装3.5SP1或直接4.0
浅谈EXT.NET布局
蚂蚁筑巢
08-19 830
当我们定义一个panel的时候，如果没有指定panel的布局，那么它就会使用Auto Layout来组织子元素。 AnchorLayout布局没有任何的直接配置选项（继承的除外），然而在使用AnchorLayout布局时，其子组件都有一个anchor属性，用来配置此子组件在父容器中所处的位置。 Anchor属性为一组字符串，可以使用百分比或者是-数字来表示。配置字符串使用空格隔开，例如： a
EXT.NET网站应用程序开发教程英文版
03-30
本教程“EXT.NET Web应用程序开发教程2012年英文版”是针对EXT.NET框架的一份详细学习资料，适合对.NET技术有一定基础，并希望深入学习EXT.NET的开发者。 教程内容可能涵盖以下几个方面： 1. **EXT.NET简介**：...
用ext.net开发的主界面
10-03
ext.net主界面，有了它后面自己再增加一些自己的内容就可以了
examples.ext.net-5.zip
10-12
总结来说，"examples.ext.net-5.zip"中的实例代码是学习EXT.NET 5.2与WebForm结合开发的宝贵资源。通过深入研究这些示例，开发者可以更好地掌握EXT.NET的组件使用、数据绑定、事件处理等方面的知识，从而提高Web应用...
EXTnet.zip_ext.net
09-24
EXT.NET是一种基于.NET Framework的开源JavaScript库，专为开发复杂的Web应用程序而设计。EXT.NET库扩展了Sencha Ext JS框架，使其与ASP.NET更紧密地集成，提供了丰富的UI组件、数据绑定、事件处理和强大的服务器...
Ext.NET 3.1破解版
01-17
Ext.NET 3.1破解版,仅供参考和学习!
Ext.NET中文API
01-22
Ext.NET中文API ext.net中文API接口说明，主要介绍ext.net下各个类的基本属性和方法及其简单用法
Ext.net开发教程(word文档,可复制粘贴代码)
06-30
市面上唯一一本基于EXT.NET框架的开发指南,非常值得学习;而且这是word文档类型,代码可直接复制粘贴,学习特别方便;
ext.net 中树加载及实现方式，初学者可以参考
12-04
ext.net 中树加载及实现方式，初学者可以参考,项目中一段代码片段，仅供参考
Ext.net后台分页增删改
09-25
Ext.net数据库后台分页，树状图，Grid增删改查，由于公司下个项目要用到Ext.net，所以就写了一个小小的列子，说实话Ext.net网上资源太少了！一直在琢磨中！
Ext.NET Pro 2.0.0 破解版(去除License弹窗)
12-31
　　本压缩包内提供的Ext.NET Assemblies（.dll）编译版本是由官方（http://www.ext.net/）2012-7-24发布的2.0.0 Pro源代码版本去除了与License有关的代码编译而成，功能上没有任何删减，使用方法和官方提供的编译包一样。 　　目前官方的最新版本为：2.1.1，2012/12/10发布，不使用这个版本的原因是因为有BUG。
Ext.NET-布局
Guog
05-12 1037
前一篇介绍了Ext.NET基础知识，并对Ext.NET的布局进行了简要的说明，本文中我们用一个完整的示例代码来看看Ext.NET的布局。
ExtAspNet控件库快速上手（一）
wangqiuyun的专栏
08-17 9599
今天试用了一下ExtAspNet控件库，感觉不错， 打算接下来几天好好看一下，同时也打算试着写一下相关教程和大家分享，欢饮拍砖！ 关于ExtAspNet以下是它的官方说明： ----------------------------------------------------------------------------------------- 基于 ExtJS 的专业 ASP.N
[EXT.NET]安装与使用
德仔
06-21 6311
前言：       笔者在开发过程中一直困扰与页面样式及其用户体验等问题。为了解决这些问题从而提高系统开发效率和增强人机交互能力，所以在网上一直寻找解决方案。      最终决定使用Ext.net进行开发。  Ext.Net介绍：  　　是一组开源的Asp.net（WebForm,MVC）组件。基于Ext.Js库开发，含有100多个工具，如TextBox,Combox，Button，Too
Ext入门(初次使用步骤)
fly_to_sky的专栏
03-30 1875
Ext入门      Ext是基于javscript脚本语言的一种编程框架，主要用于创建（B/S）客户端用户界面，借助与本身自带的Ajax框架的优势，撇开了对后台编程语言的依赖性。同时，客户端程序与服务器程序达到一种完全的分离，彼此之间可以相互独立的进行开发及维护。       本次要做的工作有：1.Ext库的部署Ext库下载地址：http://download.csdn.
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、付费专栏及课程。

余额充值