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中
- 在模块根节点下添加viewport，并设置vireport的layout属性为fit
- 在viewport下添加panel控件
- 在panel下添加toolbar,并把toolbar的itemId属性设置为tbar,isConfig设置为true
- 在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里面定义
具体截图：
效果截图：
其他布局实在再多了，等我有空在慢慢补齐。
