Ext.Net学习笔记04:Ext.Net布局
ExtJS中的布局功能很强大,常用的布局有border、accordion、fit、hbox、vbox等,Ext.Net除了将这些布局进行封装以外,更是对border进行了一些非常实用的改进,让我们来看看吧。
Ext.Net布局概述
Ext.Net中的布局是对ExtJS布局的封装,可以用在panel控件,或者继承自panel的控件,例如window、form、gridpanel、treepanel等。首先来看一个简单的例子:
<ext:Window runat="server" ID="win1"
Title="Layout示例" Width="600" Height="400"
Layout="BorderLayout">
<Items>
<ext:Panel runat="server"
Region="West" Title="西"
Width="100" Border="true">
</ext:Panel>
<ext:Panel runat="server"
Region="East" Title="东"
Width="100" Border="true">
</ext:Panel>
<ext:Panel runat="server"
Region="North" Title="北"
Height="100" Border="true">
</ext:Panel>
<ext:Panel runat="server"
Region="South" Title="南"
Height="100" Border="true">
</ext:Panel>
<ext:Panel runat="server"
Region="Center" Title="中"
Border="true">
</ext:Panel>
</Items>
</ext:Window>
在这段代码中,我们定义了一个window,然后将它的布局设置为border布局,在它内部有五个panel,位置分别是上下左右中,效果如图:
如果你需要对border布局进行配置,可以在window标签内添加layout标签,例如:
<ext:Window runat="server" ID="win1"
Title="Layout示例" Width="600" Height="400"
Layout="BorderLayout">
<LayoutConfig
> <ext:BorderLayoutConfig Padding="10"></ext:BorderLayoutConfig> </LayoutConfig
>
<Items>……</Items>
</ext:Window>
不光的border布局这样使用,所有的布局都是这样使用的。通过上面的例子,我们能够对Ext.Net的布局有一个整体的认知,然后再去查看ExtJS的文档,针对不同的布局都有哪些配置项,该如何使用,相信会有很大的提高,我有一篇文章专门介绍ExtJS布局的:ExtJS 4.2 教程-08:布局系统详解
Ext.Net对border布局的改进
border布局是我们使用最频繁的布局之一,好处自然不必多少,我们单来扒一扒它的不足,眼下就有两处:
- 不支持将多个控件设置为一个区域。例如我们想要在左侧停靠两个panel,那么我们必须要进行嵌套,因为ExtJS本身不支持同时将两个panel的region设置为west。
- 当上下两个区域存在的时候,左右区域不会占满。这个可以参照上面的例子,上下两个区域的宽度和window的宽度相同,而左右两个区域的高度则受到它们的影响。如果要实现左右区域的高度占满整个window的高度,那么我们必须进行嵌套。
知道了这两个不足,来让我们看看Ext.Net对它们的改进吧。
Ext.Net支持多个控件使用相同的region
这个功能可以解决第一个问题。代码如下:
<ext:Window runat="server" ID="win1"
Title="Layout示例" Width="600" Height="400"
Layout="BorderLayout">
<Items>
<ext:Panel ID="Panel1" runat="server"
Region="West" Title="西"
Width="100" Border="true">
</ext:Panel>
<ext:Panel ID="Panel2" runat="server"
Region="West" Title="西"
Width="100" Border="true">
</ext:Panel>
<ext:Panel ID="Panel5" runat="server"
Region="Center" Title="中"
Border="true">
</ext:Panel>
</Items>
</ext:Window>
效果如下:
Ext.Net支持weight属性
weight属性,我理解为绘制时候的权重。在多个region中,优先绘制权重高的控件,它的高度(或宽度)将占满整个容器。有了这个属性,我们可以轻松应对第二个问题。
<ext:Window runat="server" ID="win1"
Title="Layout示例" Width="600" Height="400"
Layout="BorderLayout">
<Items>
<ext:Panel ID="Panel1" runat="server"
Region="West" Title="西"Weight="10"
Width="100" Border="true">
</ext:Panel>
<ext:Panel ID="Panel2" runat="server"
Region="South" Title="南"
Height="100" Border="true">
</ext:Panel>
<ext:Panel ID="Panel5" runat="server"
Region="Center" Title="中"
Border="true">
</ext:Panel>
</Items>
</ext:Window>
Ext.Net学习笔记04:Ext.Net布局的更多相关文章
- 【Ext.Net学习笔记】02:Ext.Net用法概览、Ext.Net MessageBus用法、Ext.Net布局
Ext.Net用法概览 Ext.Net还是很强大,如果运用熟练可以极大的提高编程效率.如果你也要学习Ext.Net,原文博主推荐书籍:<Ext.Net Web 应用程序开发教程>,是英文的 ...
- 【Ext.Net学习笔记】04:Ext.Net中使用数据、Ext.Net Store的用法、Ext.Net ComboBox用法
之前的几篇文章都是介绍Ext.Net较为基础的东西,今天的这一篇将介绍数据的一些用法,包括XTemplate绑定数据.Store(Modal.Proxy).ComboBox的用法等. XTemplat ...
- 【Ext.Net学习笔记】03:Ext.Net DirectEvents用法详解、DirectMethods用法详解
Ext.Net通过DirectEvents进行服务器端异步的事件处理.[Ext.Net学习笔记]02:Ext.Net用法概览.Ext.Net MessageBus用法.Ext.Net布局 中已经简单的 ...
- Ext.Net学习笔记20:Ext.Net FormPanel 复杂用法
Ext.Net学习笔记20:Ext.Net FormPanel 复杂用法 在上一篇笔记中我们介绍了Ext.Net的简单用法,并创建了一个简单的登录表单.今天我们将看一下如何更好是使用FormPanel ...
- 【Ext.Net学习笔记】06:Ext.Net GridPanel的用法(GridPanel 折叠/展开行、GridPanel Selection、 可编辑的GridPanel)
GridPanel 折叠/展开行 Ext.Net GridPanel的行支持折叠/展开功能,这个功能个人觉得还说很有用处的,尤其是数据中包含图片等内容的时候. 下面来看看效果: 使用行折叠/展开功能之 ...
- 【Ext.Net学习笔记】05:Ext.Net GridPanel的用法(包含Filter、Sorter、Grouping、汇总(Summary)的用法)
GridPanel是用来显示数据的表格,与ASP.NET中的GridView类似. GridPanel用法 直接看代码: <ext:GridPanel runat="server&qu ...
- 【Ext.Net学习笔记】01:在ASP.NET WebForm中使用Ext.Net
Ext.NET是基于跨浏览器的ExtJS库和.NET Framework的一套支持ASP.NET AJAX的开源Web控件,包含有丰富的Ajax运用,其前身是Coolite. 下载地址:http:// ...
- Ext JS4 学习笔记之发送表单(Form)时也将表单下的表格(Grid)数据一同发送的方法
Ext JS4 学习笔记之发送表单(Form)时也将表单下的表格(Grid)数据一同发送的方法 昨天在开发的时候遇到个小问题,就是如何将Grid的内容与Form一起发送到服务器端.默认情况下,表单(F ...
- Ext.Net学习笔记22:Ext.Net Tree 用法详解
Ext.Net学习笔记22:Ext.Net Tree 用法详解 上面的图片是一个简单的树,使用Ext.Net来创建这样的树结构非常简单,代码如下: <ext:TreePanel runat=&q ...
随机推荐
- VS2010+WINDBG+VMWARE9.0和fatal error RC1106: invalid option: -ologo错误
提供属性配置文件一份: http://pan.baidu.com/s/1iS1Ix <?xml version="1.0" encoding="utf-8" ...
- as3+java+mysql(mybatis) 数据自动工具(一)
在页游中,大部分的开发模式都是:客户端(as3)+ 服务端(java)+ 数据库(mysql). 在这3个部分会有一个相同的部分就是数据结构.比如一个用户数据,在客户端使用类 UserVO(as3) ...
- Javascript检测浏览器对CSS属性的支持 /* supports */
//检测浏览器对CSS属性的支持 supports = (function() { var div = document.createElement('div'), vendors = 'Khtml ...
- vijosP1115 火星人
vijosP1115 火星人 链接:https://vijos.org/p/1115 [思路] 排列组合. 题目要求为求第下m个排列. 这里有两种方法,首选的是调用algorithm中的next_pe ...
- WCF入门介绍
内容介绍 1.WCF是什么? 2.WCF能干什么? 3.WCF与以往的分布式技术有何区别? 一.WCF是什么? 比较贴近官方的说法是:WCF(原代号为Indigo)是一个用于创建和运行分布式系 ...
- Yii 图片FTP批量上传 并生成缩略图
图片批量上传,前台使用 uploadify.swf,这个就不介绍了.这里使用两个扩展,一个是FTP上传的扩展,还有一个是生成缩略图的扩展地址:http://www.yiiframework.com/e ...
- 如何将可执行文件打包至APK并运行(转)
原文链接:http://www.lupaworld.com/home.php?mod=space&uid=345712&do=blog&id=248921 好久没有写bolg了 ...
- 框架技术--S2SH框架整合(spring部分)No 3--声明式事务
声明式事务:就是讲事务的处理,通过配置进行配置. 几种传播特性 1. PROPAGATION_REQUIRED: 如果存在一个事务,则支持当前事务.如果没有事务则开启(比较常用) 2. PROPA ...
- 如何调试什么时候SaveFileDialog会被Dispose
博客搬到了fresky.github.io - Dawei XU,请各位看官挪步.最新的一篇是:如何调试什么时候SaveFileDialog会被Dispose.
- 在DDMS中访问data目录
转自 http://blog.csdn.net/catoop/article/details/7584746 由于某些原因,需要通过eclipse访问/data/下的文件. 打开eclipse-DDM ...