codecamp

DockLayout

DockLayout是Dorado中最常用的布局方式(经常作为页面的总体布局).DockLayout的基本说明: 停靠式布局将控件分成5中区域:left、top、right、bottom和center。每个控件选择一种区域由布局管理器按照顺序进行排列。选择center区域的控件总是到最后才被放置,他总是占尽所有剩余的空间。除center区域之外,其他4中区域都可以出现0到n个, center区域最多只能出现一次。如果某控件没有显式的声明选择哪种区域,那么布局管理器会尝试按照center区域对其进行布局。如果我们这么定义View的布局:

 <View title="DockLayout" layout="Dock">
    <HtmlContainer content="1) left" layoutConstraint="left" />
    <HtmlContainer content="2) top" layoutConstraint="top" />
    <HtmlContainer content="3) right" layoutConstraint="right" />
    <HtmlContainer content="4) bottom" layoutConstraint="bottom" />
    <HtmlContainer content="5) bottom" layoutConstraint="bottom" />
    <HtmlContainer content="6) right" layoutConstraint="right" />
    <HtmlContainer content="center" />
</View>

我们设置布局的layout为Dock,不同的HtmlContainer的layoutConstraint属性分别设置为:left、top、right、bottom和center中的一种,则得到的布局效果图如下: 实际使用时并不一定要包含所有的区域,我们将其中的HtmlContainer更换为控件:

 <View layout="Dock" title="DockLayout">
  <ToolBar layoutConstraint="top">
    <ToolBarLabel>
      <Property name="text">菜单栏</Property>
    </ToolBarLabel>
  </ToolBar>
  <ToolBar layoutConstraint="bottom">
    <ToolBarLabel>
      <Property name="text">状态栏</Property>
    </ToolBarLabel>
  </ToolBar>
  <Panel layoutConstraint="left">
    <Property name="caption">导航树</Property>
    <Buttons/>
    <Children/>
    <Tools/>
  </Panel>
  <Panel layoutConstraint="center">
    <Property name="caption">工作空间</Property>
    <Buttons/>
    <Children/>
    <Tools/>
  </Panel>
</View>

查看页面执行效果:

AnchorLayout
FormLayout
温馨提示
下载编程狮App,免费阅读超1000+编程语言教程
取消
确定
目录

关闭

MIP.setData({ 'pageTheme' : getCookie('pageTheme') || {'day':true, 'night':false}, 'pageFontSize' : getCookie('pageFontSize') || 20 }); MIP.watch('pageTheme', function(newValue){ setCookie('pageTheme', JSON.stringify(newValue)) }); MIP.watch('pageFontSize', function(newValue){ setCookie('pageFontSize', newValue) }); function setCookie(name, value){ var days = 1; var exp = new Date(); exp.setTime(exp.getTime() + days*24*60*60*1000); document.cookie = name + '=' + value + ';expires=' + exp.toUTCString(); } function getCookie(name){ var reg = new RegExp('(^| )' + name + '=([^;]*)(;|$)'); return document.cookie.match(reg) ? JSON.parse(document.cookie.match(reg)[2]) : null; }