Ext学习_FormPanel布局1

Ext.namespace("com.deng");
/**
 * FormPanel布局与初始化
 * FormPanel有两种布局：form和column，form是纵向布局，column为横向布局。默认为后者
 * 使用layout属性定义布局类型。对于一个负责的布局表单，最重要的是正确分隔，分隔结果
 * 直接决定布局能否顺利实现。
 * 
 * 如果不再使用默认布局，那么我们必须为每一个元素指定一种布局方式，另外，还必须遵循一下几点
 *   落实到任何一个表单组件后，最后总是form布局
 *   defaultType属性不一定起作用，必须显示为每一个表单组件指定xtype或new出新对象
 *   在column布局中，通过columnWidth可以指定列所占宽度的百分比，如占50%宽度为.5
 *   
 *   学会分割
 *   布局其实是由行和列组成，分成由左往右和由上往下两个方向,从左往右叫column，由上往下叫form,其实就是行
 *   整个大的表单就是form布局,从图中可以看出，从上往下放置了5个小布局，以行n标记，以行1进行分析。行1从左往右
 *   有三个表单组件，所以是column布局，行1我们用结构这样定义：
 *   {
 *     layout："column",
 *     items:[{},{},{}] //items表示指定布局内的表单组件集合，在此有三个
 *   }
 *   行1内其实还有三个form布局，因为每个布局中只有一个表单组件，所以看起来并不是那么明显，我们完全可以放置
 *   多个表单组件到布局中。每一个布局使用下面的结构定义：
 *   {
 *     layout: "form",
 *     items: [{}] //只有一个表单组件
 *   }
 *   上面的两个结构最终要组装到一起：
 *   {
 *     layout："column"，
 *     items: [
 *        {
 *          layout: "form",
 *          items: [{}]
 *        },
 *        {
 *          layout: "form",
 *          items: [{}]
 *        },
 *        {
 *          layout: "form",
 *          items: [{}]
 *        }
 *     ]
 *   }
 * 
 * 其它行的分析也是如此
 */