ExtJs 4.x MVC 架构

• Model模型 是字段和它们的数据的集合，例如User模型带有username和password字段，模型知道如何持久化自己的数据，并且可以和其他模型关联，模型跟ExtJS 3 中的Record类有点像（区别是，Record只是单纯的扁平结构，而Model可以nest），通常都用在Store中去展示grid和其他组件的数据
• View视图 是组件的一种，专注于界面展示。例如， grid, tree, panel 都是view
• Controllers控制器 一个安放所有使你的app正确工作的代码的位置，具体一点应该是所有动作，例如如何渲染view，如何初始化model，和app的其他逻辑 
• ExtJS 4 应用都遵循一个统一的目录结构，每个应有都相同 MVC中，所有类都放在app目录里面，这个目录可以有子目录，代表的是命名空间（一个子目录对应一个命名空间），使用不同的目录存放views,models,controllers,stores。当我们完成例子的时候，目录结构应该和下图一样：

 布局和容器

ExtJS的UI由组件(Component)构建而成，容器(Container)是一种可以盛放其他组件的特殊类型组件，每个典型的ExtJS应用都是数层嵌套的组件组成的。每个容器都由布局来管理子组件的大小和位置。 

 

通用布局方式

3.1.1  Absolute绝对布局

可使用坐标（x、y）进行布局 

3.1.2  Accordion手风琴布局

实现Accordion效果的布局，也可叫可折叠布局。也就是说使用该布局的容器的子组件是可折叠的形式表现。 

3.1.3  Anchor固定布局

会根据容器的大小固定其相对于容器的尺寸

这个布局就是表单面板默认支持的，每一项占据一行，支持用anchor配置项分配各个子项的高度和宽度。为百分比时表示当前大小占父容器的百分比；为数字时一般为负数，表示父容器的值减去差值，剩下的为子项的大小。