2. 程序架构

2.1 目录结构

推荐下面这种目录结构(非强制，如果你足够懂和自信)

- appname
    - app
        - namespace
            - Class1.js
            - Class2.js
            - ...
    - extjs
    - resources
        - css
        - images
        - ...
    - app.js
    - index.html
appname 包含所有程序代码，是根目录
app 包含所有类，按包的规则命名子目录
extjs ExtJS 4 SDK
resources CSS 图片等 资源文件
index.html 入口文件
app.js 程序入口

布局

在Ext中，所有的布局都是从Ext.Container开始的，Ext.Container的父类是Ext.BoxComponent。与Ext.Container相似，所有的布局类也有一个共同的超类Ext。layout.ContainerLayout。凡是继承自该超类的子类都可以对Ext.Container和它的子类进行布局定义，这两颗继承树结合在一起便构成了Ext中完整的布局系统。另外要说明的是我们经常使用Viewport对整个页面进行布局，而且每个页面只能有一个Viewport。

在这里插入图片描述

1.Auto自动布局（系统默认）
Auto布局实际就是Ext.layout.ContainerLayout,一般这个布局是不会用到的。

2.Fit自适应布局
Fit布局的缺点是每次只能使用一个子组件，即使放了多个组件，也只有第一个组件会起作用。

3.Accordion折叠布局
注意Accordion 必须给每个子元素都要添加title参数，不设置标题是会出错。

4.Card卡片式布局
这种布局用来制作操作向导最合适，因为一次只能显示一个子面板，所以可以用setActiveItem方法来切换子面板

5.border布局
border布局是当前项目实现中经常使用到的一种布局形式。这种布局将整个页面划分为五个部分，分别是上（north）、下（south）、左（west）、右（east）、中（center）。通过region这个属性指定特定组件显示在页面中的特定位置，并可以指定待显示组件的宽度或高度。当然，宽度和高度的设置对于center中的组件是无效的，因为center中的组件默认布局为fit。

对于border布局来说，上、下、左、右这四个部分的显示内容不是必须存在的，但是一个border布局中center部分必不可少。

6.Anchor锚点布局

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

7.表单布局FormLayout

这是表单专用的布局，它是Ext.form.FormPanel的默认布局方式，首先FormLayout是AnchorLayout的一个子类，可以在它里面使用anchor设置宽和高的比例，但是它主要用于表单布局。

利用anchor对表单内的多个field进行布局

8.表格布局（TableLayout）：
layoutConfig中的column定义一共要分几列，然后在各个子面板中使用rowspan和columnspan设置如何进行行和列的合并。

9.分列布局（ColumnLayout）
将整个容器进行竖直切分的布局方式，可以使用具体值或者百分比以及两者混合的方式。

10.BoxLayout：分为水平布局（HBox）和竖直布局（VBox）

Extjs 中id与itemId的差别

为了方便表示或是指定一个组件的名称，我们一般会使用id或者itemId进行标识命名。
（推荐尽量使用itemId。这样能够降低页面唯一标识而产生的冲突）

id

id是作为整个页面的Component的唯一标识，这也意味着在整个页面中仅仅同意有唯一一个名称的id。同一时候这里的Component的id也将变为element中的id，所以假设出现了两个，页面将会出现崩塌变形等等不能够想象的问题。

而作为一个组件是必须有自己的唯一标识(id)的，在没有设置Component的id的时候系统将自己主动为组件加入id

itemId

itemId是用于container底下的元件的。这也说明itemId仅仅是一个局部的元件标识名称，在全局上是不须要遵循唯一性的。

从上面的叙述中能够看出一些使用上需注意的地方
若你要取得相关的Component 若是属于container 请设置id

若是仅仅属于某个container 底下的元件，请设置itemId；某些情况下当然你也能够连同id 一起设置，比方须要改变css style，除此之外itmeid 还是优先的选择

getCmp 以及getComponent 是不一样的，使用上必须注意。必须搭配id 以及itemid 使用

如此一来id 与itemid 就会有从属关系，非必要不需定义id。也不会造成在定义id 时须要编码避免重覆。而由于itemid 是属于某个id 底下的，所以即使itemid 重覆，也能够利用唯一的id 利用Ext.getCmp 取得參照后，在接着使用getComponent 取得所属itemId 的參照。

获取id和itemId的组件和元件（从以上能够明显的看出，itemId是个局部的元件名称）：
id： Ext.getCmp(id)；
itemId：Ext.getCmp(id).getComponent(itemId)；