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,位置分别是上下左右中,效果如图:

image

如果你需要对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布局是我们使用最频繁的布局之一,好处自然不必多少,我们单来扒一扒它的不足,眼下就有两处:

  1. 不支持将多个控件设置为一个区域。例如我们想要在左侧停靠两个panel,那么我们必须要进行嵌套,因为ExtJS本身不支持同时将两个panel的region设置为west。
  2. 当上下两个区域存在的时候,左右区域不会占满。这个可以参照上面的例子,上下两个区域的宽度和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>

效果如下:

image

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>

效果如下:

image




本文转自齐师傅博客园博客,原文链接:http://www.cnblogs.com/youring2/p/3551470.html,如需转载请自行联系原作者
相关文章
|
5月前
|
并行计算 算法 调度
(学习笔记)U-net++代码解读
python: 3.10 U-net++结构图
295 0
|
开发框架 前端开发 .NET
ASP.NET Core 核心特性学习笔记「下」
ASP.NET Core 核心特性学习笔记「下」
|
开发框架 前端开发 中间件
ASP.NET Core 核心特性学习笔记「上」
ASP.NET Core 核心特性学习笔记「上」
|
传感器 设计模式 开发框架
ASP.NET MVC5学习笔记01
ASP.NET MVC5学习笔记01
122 0
ASP.NET MVC5学习笔记01
|
1月前
|
开发框架 前端开发 JavaScript
ASP.NET MVC 教程
ASP.NET 是一个使用 HTML、CSS、JavaScript 和服务器脚本创建网页和网站的开发框架。
29 7
|
1月前
|
存储 开发框架 前端开发
ASP.NET MVC 迅速集成 SignalR
ASP.NET MVC 迅速集成 SignalR
40 0
|
2月前
|
开发框架 前端开发 .NET
ASP.NET MVC WebApi 接口返回 JOSN 日期格式化 date format
ASP.NET MVC WebApi 接口返回 JOSN 日期格式化 date format
37 0
|
2月前
|
开发框架 前端开发 安全
ASP.NET MVC 如何使用 Form Authentication?
ASP.NET MVC 如何使用 Form Authentication?
|
2月前
|
开发框架 .NET
Asp.Net Core 使用X.PagedList.Mvc.Core分页 & 搜索
Asp.Net Core 使用X.PagedList.Mvc.Core分页 & 搜索
96 0