ExtJS 4.2.1学习笔记（一）——MVC架构与布局
1 ExtJS入门
1.1 支持所有主流浏览器
调试推荐：chrome、Safari、Firefox
1.2 推荐目录结构
- appname （包含所有程序代码，是根目录）
- app （包含所有类，按包的规则命名子目录）
- namespace
- Class1.js
- Class2.js
- ...
- extjs （ExtJS 4 SDK）
- resources （CSS图片等资源文件）
- css
- images
- ...
- app.js （程序入口，包含程序逻辑）
- index.html （入口文件）
ExtJS 4 SDK部分说明：
- extjs/resources/css/ext-all.css 包含了所有样式
- extjs/ext-debug.js 包含了最基础的一些类，ExtJS 4 Core核心部分，只在开发时使用，任何附加的类都通过动态加载引入（会造成n多请求，所以发布应用的时候不要用这个）
- extjs/ext.js 功能和ext-debug.js一致，但是是用于对外发布的，它和app-all.js一起使用
- extjs/ext-all-debug.js 包含ExtJS全部内容，全部class，它可以像ExtJS 3那样使用，可以减少学习成本，官方还是推荐ext-debug.js这种引入了新机制的方式
- extjs/ext-all.js 是ext-all-debug.js的压缩版本，内容跟其一致，可用于发布，但是它包含所有内容，官方不推荐
- all-classes.js 包含app自定义的所有类，这个文件没有压缩可以方便调试
- app-all.js 这个文件是压缩过的，包含所有app代码和依赖的类，相当于一个可以用于发布的 all-classes.js + app.js
- builds：是extjs压缩后的代码，体积更小，加载更快
- docs ：extjs的文档
- examples：官方示例
- locale：多国语言的资源文件
- packages：extjs各部分功能的打包文件
- resource：extjs要用到的图片文件与样式文件。
- src：未压缩过的代码目录
- bootstrap.js：extjs库的引导文件
- ext-all.js ：必须引入的核心库
- ext-all-debug.js：ext-all.js的调试版
1.3 支持动态按需加载
2 MVC架构
u Model模型 是字段和它们的数据的集合，例如User模型带有username和password字段，模型知道如何持久化自己的数据，并且可以和其他模型关联，模型跟ExtJS 3 中的Record类有点像（区别是，Record只是单纯的扁平结构，而Model可以nest），通常都用在Store中去展示grid和其他组件的数据
u View视图 是组件的一种，专注于界面展示。例如， grid, tree, panel 都是view
u Controllers控制器 一个安放所有使你的app正确工作的代码的位置，具体一点应该是所有动作，例如如何渲染view，如何初始化model，和app的其他逻辑
3 布局和容器
ExtJS的UI由组件(Component)构建而成，容器(Container)是一种可以盛放其他组件的特殊类型组件，每个典型的ExtJS应用都是数层嵌套的组件组成的。
每个容器都由布局来管理子组件的大小和位置。
3.1 通用布局方式
3.1.1 Absolute绝对布局
可使用坐标（x、y）进行布局
3.1.2 Accordion手风琴布局
实现Accordion效果的布局，也可叫可折叠布局。也就是说使用该布局的容器的子组件是可折叠的形式表现。
3.1.3 Anchor固定布局
会根据容器的大小固定其相对于容器的尺寸
这个布局就是表单面板默认支持的，每一项占据一行，支持用anchor配置项分配各个子项的高度和宽度。为百分比时表示当前大小占父容器的百分比；为数字时一般为负数，表示父容器的值减去差值，剩下的为子项的大小。
说明 ：
anchor: '80% 20%'，中间用一个空格隔开，空格前后是%的数字。第一个参数80%：意思是宽度设置为整体的80%；第二个参数20%：是设置高度为整体的20%。
anchor:'-50 -150' ，中间用一个空格隔开，空格前后是整数，第一个参数-50：表示距离右侧的相对距离；第二个参数-150：表示距离底部的相对距离。
3.1.4 Auto默认布局
不给下级组件指定大小和位置
3.1.5 Border边界布局
可将一个容器划分为几个区域，每个区域可以展开或折叠
它将页面分隔成为：west、east、south、north、center 这五个部分，我们在items里面使用region参数为它组织定义具体的位置。
north和south部分只能设置高度（height），west和east部分只能设置宽度（width）。North、south、west、east区域变大了，center区域就变小了。
参数 split:true 可以拖动除了center四个区域的大小。
参数 collapsible:true 激活折叠功能。
3.1.6 Card卡片布局
该布局可维护多个子组件，每个子组件都会自适应于容器，而每次只会显示一个子组件。可以看做是一叠卡片一样，从上面看起来就像是一张卡片，我们可以把中间的卡片抽出来，放到最上面，可是每次只能显示一张卡片。
我们可以定义翻页按钮来控制当前处于活动状态的子组件，像卡片一样的切换每个子组件。因而该布局多用于实现向导功能。
3.1.7 Column列布局
该布局是把子组件按照列进行划分。在往里面放入子组件的时候，可以通过子组件的columnWidth和width来制定列的宽度，columnWidth是按百分比（4/10、.25）来制定列的宽度，width是按照绝对像素来制定列的宽度。在实际应用中可以将两种混合使用。
注意items 中 columnWidth 的数值必须是0~1之间的小数，它表示每个子组件在整体中所占的百分比。它们的总和应该是1，否则会出现没有填满或超出换行的情况。
3.1.8 Fit自适应布局
如果布局内只有一个组件，会将该组件自动填充满容器
它解决了自适应的问题：当客户要求一个窗口里显示一个Grid表格，可以让它自动适应窗体的大小的变化，窗体变大时候Grid表格也变大，窗体变小的时候也变小。
注意：layout : 'fit' 组件的items只能放一个组件，如果放了多个组件，那么也只有一个子组件会起作用。
3.1.9 HBox水平布局
用于水平划分容器的布局。
² align：字符类型，指示组件在容器内的对齐方式。有如下几种属性。
1、top（默认）：排列于容器顶端。
2、middle：垂直居中排列于容器中。
3、stretch：垂直排列且拉伸义填补容器高度。
4、stretchmax:垂直拉伸，并且组件以最高高度的组件为准。
² pack : 字符类型，指示组件在容器的位置，有如下几种属性。
1、start（默认）：组件在容器左边。
2、center：组件在容器中间。
3、end：组件在容器的右边。
3.1.10 Table表格布局
该布局把页面定义成一个表格（HTML中Table）包括行和列，我们可以像表格一样设置rowspan和colspan。它在生成代码的时候就是生成了html代码中的<table></table>标签。
心得：容器table只能设置有几列，不能设置有几行；子组件设置rowspan后，高度不会自适应，colspan后的宽度可以自适应；子组件本身的高宽不能自适应。
3.1.11 VBox垂直布局
用于垂直划分容器的布局。
² align：字符类型，指示组件在容器内的对齐方式。有如下几种属性。
1、left（默认）：排列于容器左侧。
2、center ：控件在容器水平居中。
3、stretch：控件横向拉伸至容器大小。
4、stretchmax：控件横向拉伸，宽度为最宽控件的宽。
² pack : 字符类型，指示组件在容器的位置，有如下几种属性。
1、start（默认）：组件在容器上边。
2、center：组件在容器中间。
3、end：组件在容器的下边。
