Ext.net学习笔记之ViewPort布局

前段时间开始学习Ext.net ,感觉很强大,对于我这菜鸟来说是这样。

我是学了又忘,忘了又去学的人,所以写写笔记,给自己长点记性。

 

在ViewPort布局中,主要是对Panel之类的Region属性的一个运用。Region属性有6个属性可以选择:North、South、West、East、Center和None。

比如下图的布局:

Ext.net学习笔记之ViewPort布局

相应的代码:

Ext.net学习笔记之ViewPort布局
<ext:Viewport runat="server" Layout="BorderLayout">
    <Items>
      <ext:Panel runat="server" Region="North" Title="North" Height="100"></ext:Panel>
      <ext:Panel runat="server" Region="West" Title="West" Width="200" Collapsible="true"><Items></Items></ext:Panel>
      <ext:Panel runat="server" Region="Center" Title="Center"></ext:Panel>
    </Items>
</ext:Viewport>
Ext.net学习笔记之ViewPort布局

关键的ViewPort的Layout属性必须设置为BorderLayout属性,才可以正确的显示。

在Panel中,只要添加你想要的内容就可以了,比如想在West中制作一个菜单,可以,把你做好的菜单布局放进Items中。也可以设置Panel是否可折叠,就是上面的West的Panel的Collapsible属性,true为可折叠,false反之;Collapsed属性设置是否处于折叠状态,true为折叠,false为展开。

折叠之后Center可以显示更多的内容。

Ext.net学习笔记之ViewPort布局

一般我都是布置好了布局之后才详细思考接下来要填充的东西,我喜欢这么做。

Ext.net学习笔记之ViewPort布局

上一篇:Ext.Net学习笔记之动态加载TabPanel


下一篇:与众不同 windows phone (22) - Device(设备)之摄像头(硬件快门, 自动对焦, 实时修改捕获视频)