004-webbuilder所有布局

viewport

• viewport表示整个页面的显示视口，他把页面渲染到浏览器的body中，他的大小等于浏览器body的大小,如果整个页面需要占据整个浏览器body(全屏显示)，可以使用该控件作为顶层控件。
• 大部分需要在浏览器中显示的模块通常都会使用viewport作为顶层控件，然后在其下添加其他界面控件。
• 在模块文件中，非容器控件只有被添加到viewport或者容器（如panel控件）才会被显示，比如文本框控件text只有被添加到viewport或者panel才会被显示，佛祖额如果模块不在单独的窗口中运行text不会被直接显示。

面板panel

面板panel是常用的容器控件，它具有标题栏，顶部底部左侧右侧工具条栏，底部按纽栏以及伸缩等特性。继承自panel的控件包括容器form,window,tab等，非容器grid,tree等，这些控件都具有panel的基本特性。

工具条和菜单

工具条和菜单是常用的界面交互控件，通过点击工具条按钮或菜单项来选择功能项并触发相应的操作。工具条通常位于界面的顶部，菜单可以嵌入到工具条或者作为右键弹出式菜单。

工具条菜单项item的使用

item控件可以作为工具条按钮，菜单，标签和菜单分割线等使用，添加到工具条即可作为工具条按钮。
设置item的text属性为’-’,可以把item作为分割线，
设置为“->”可以作为填充条；
设置为item的xtype属性为tbtext，可以作为标签使用，也可以添加label作为标签控件，
在工具条中添加标签建议使用前者。在item下添加子item控件，可以自动生成菜单项，以此类推可以生成递归的子菜单项。在工具条下添加text控件可以把文本框嵌入到工具条。

工具条toolbar的使用

工具条是容器控件，在工具条下可以添加任意的控件，包括item,text,combo等。
工具条经典的用法有两种：

嵌入到容器控件tbar中

1. 在模块根节点下添加viewport，并设置vireport的layout属性为fit
2. 在viewport下添加panel控件
3. 在panel下添加toolbar,并把toolbar的itemId属性设置为tbar,isConfig设置为true
4. 在toolbar中添加item控件，并且设置text属性为button

isConfig

指定该控件是否作为父控件的配置项，true作为父控件的配置项，false作为父控件的子控件。

窗口window

窗口window控件时浮动的弹出式容器控件,常用作对话框界面。window控件一般添加到模块的根节点下，这样窗口可以在全屏自由显示和拖动，如果window控件添加到viewport控件内。则窗口的显示仅限制在本模块视图内

可编辑控件:文本框Text

text控件可以编辑任意的单行字符串，他的值类型是文本型。

• fieldLabel：控件带的标签，运行期间读使用getFieldLabel方法，写使用setFieldLabel方法

界面布局方式

界面布局是指容器对直属子控件的位置采取的排列方式，常见的布局方式有-

• absolute
• accordion
• anchor
• auto
• border
• card
• center
• column
• fit
• form
• hbox
• table
• vbox
  布局通常针对容器控件而言，容器控件是指可以包含子控件的控件，常见的容器控件包括
• viewport
• panel
• window
• form
• tab
• fieldset
• container
  器中viewport作为顶层控件来使用，以全屏显示界面。
  容器控件通常具有layout属性，通过该属性来指定采用的布局方式。

absolute:绝对位置布局

容器内的子控件通过指定x和y属性来定位其相对于容器的坐标位置。该布局可以通过IEDE“布局设计器”来设计，可以可视化地设置子控件的位置和大小。

accordion:折叠布局

通过折叠子控件来设置布局，该布局每次仅展开一个子控件，对其他控件折叠。该布局添加的子控件通常为容器，比如panel.设置子控件的title属性为子项标题，iconCls为子项图标。

layoutType：

layoutType是预定义的布局方式类型，可以快速配置容器的布局。以下为有效类型：anchorForm:设置layout为anchor布局。使所有子控件垂直排列，并且锚定子控件相对于容器的位置。容器和子控件之间设置合适的间距，子控件标签默认右对齐。
我写这个主要使因为我看都没有用layout这个属性的基本都是用的layoutType
之后每一种布局如果存在对应的这layoutType我都会开子标题写下来

fit:适配布局

把首个子控件布满整个容器控件。使用该布局的容器只能包含单个控件，如果包含多个控件只有首个控件被展示。

效果如下：确实只有一个子控件可以显示

layoutType

fit好像没有预加载内容

anchor: 锚定布局

子控件锚定相对于容器控件的位置和大小。如果容器大小变动，所有锚定的子控件会根据锚定规则自动设置位置和大小。

layoutType: anchorForm

anchorForm，设置layout为anchor布局。使所有子控件垂直排列，并锚定子控件相对于容器的位置。容器和子控件之间设置合适的间距，子控件默认右对齐。

vbox：垂直盒子布局

在容器内对所有子控件按垂直方向进行排列。设置子控件的flex属性可以按照比例指定高度。
vertical是垂直

layoutType: vboxForm

vboxForm：设置layout为vbox布局。使所有子控件垂直排列。容器和子控件之间设置合适的间距，子控件标签默认右对齐

layoutType: vboxLeft

vboxLeft: 设置layout为vbox布局，并且设置布局的对齐方式为left

layoutType: vboxCentor

vboxCentor:设置layout为vbox布局。并设置布局的对齐方式为centor

layoutType: vboxPackCentor

设置layout为vbox布局。并且设置布局的对齐方式为centor,pack为centor

table:表格布局

按表格的方式对所有子控件进行布局。容器layout属性设置为“@{type:‘table’, columns:3}”表示表格占3列。设置子控件rowspan和colspan属性可以指定跨几行几列。

可以看出控件4使垮了两列的。

其他layoutType还有tableColumn1,2,3,4,5,6就使跨几列的问题不在详细写了

card:卡片布局

把所有子控件作为卡片，每次仅显示一张卡片，其他卡片都隐藏。该类布局很适合作为向导界面，或应用于需要动态切换界面的场景。该布局添加的子控件通常作为容器控件，比如container或者panel;

tagConfigs

是panel的一个属性：对象或任意的脚本添加到该控件的配置项中。如设置为{foo:‘bar’}将为该控件增加配置项foo,其值为bar.
这里定义了一个函数：

{
  viewCard: function(card){
    var me = this;
    me.getLayout().setActiveItem(card);
  }
}

这里card也没有typeLayout

cilckEvent

为每一个item设置一个cilck事件，使得点击该item可以跳转到对应的panel面板

app.cardLayout.viewCard('panel1');//viewCard()方法在cardLayout的tagConfigs里面定义

具体截图：

效果截图：

其他布局实在再多了，等我有空在慢慢补齐。