【ExtJS】FormPanel 布局(一)

---

准备工作，布置一个最简单的Form，共5个组件，都为textfield。

 Ext.onReady(function(){
     Ext.create('Ext.form.Panel', {
         width: 500,
         title: 'Layout',
 　　　　　renderTo : 'form',
         items: [{
             xtype : 'textfield',
             fieldLabel : 'edit1',
             name : 'edit1',
         },{
             xtype : 'textfield',
             fieldLabel : 'edit2',
             name : 'edit1',
         },{
             xtype : 'textfield',
             fieldLabel : 'edit3',
             name : 'edit1',
         },{
             xtype : 'textfield',
             fieldLabel : 'edit4',
             name : 'edit1',
         },{
             xtype : 'textfield',
             fieldLabel : 'edit5',
             name : 'edit1',
         }],
 　　　　　buttons : [{
 　　　　　　　text : 'upDate',
 　　　　　　　handler : function(){
 　　　　　　　　　//do something...
 　　　　　　　}
 　　　　　}]
     });
 })

效果：

---

1、Absolute绝对布局：

　　使用标准x,y属性进行x/y坐标定位。

 Ext.create('Ext.form.Panel', {
 　　title: 'Absolute',
 　　renderTo: 'absolute',
 　　width: 500,
 　　height: 250,
 　　layout: 'absolute',
 　　items: [{
    　　xtype : 'textfield',
  　　　fieldLabel : 'edit1',
    　　width : 100,
    　　name : 'edit1',
    　　x : 10,
       y : 10
    },{
    　　xtype : 'textfield',
    　　fieldLabel : 'edit2',
   　　 width : 160,
    　　name : 'edit1',
    　　x : 20,
    　　y : 40
    },{
    　　xtype : 'textfield',
    　　fieldLabel : 'edit3',
    　　width : 60,
    　　name : 'edit1',
     　 x : 30,
    　　y : 70
   　},{
     　　xtype : 'textfield',
    　　 fieldLabel : 'edit4',
     　　width : 190,
        name : 'edit1',
    　　 x : 40,
     　　y : 100
 　　},{
 　　　　xtype : 'textfield',
 　　　　fieldLabel : 'edit5',
 　　　　width : 220,
 　　　　name : 'edit1',
 　　　　x : 50,
 　　　　y : 130
 　　}],
 　　buttons : [{
 　　　　text : 'upDate',
 　　　　handler : function() {
       　　　　//do something...
 　　　　}
 　　}]
 });

效果：

ps:在调试的时候遇到一个情况，如果仅设置宽width而不设置高height的话，会出现“Layout run failed ”错误。不过若是仅设置高而不设置宽，则Form宽填充整个页面，而不会出现错误。

---

2、accordion手风琴式布局:

注意：只有 Ext的各种Panel和Ext.panel.Panel的子类可以用于这种布局的容器中.

诸如Header、Table、Tool等，子类有:

　　Ext.container.ButtonGroup

　　Ext.form.Panel

　　Ext.menu.Menu

　　Ext.panel.Table

　　Ext.tab.Panel

　　Ext.tip.Tip

　　Ext.window.Window

 Ext.create('Ext.form.Panel', {
     width: 500,
     height: 250,
     title: 'Accordion',
     renderTo: 'accordion',
     layout : 'accordion',
     items: [{
         title: 'Panel1',
         html: 'Panel content!'
     },{
         itle: 'Panel2',
         html: 'Panel content!'
     },{
         title: 'Panel3',
         html: 'Panel content!'
     }],
     buttons : [{
        text : 'open Panel3',
     　　handler : function() {
           Ext.getCmp('Panel3').expand(true);
     　　}
     }]
 });                    

效果：

---

3、Anchor式布局：

根据父控件宽高，以固定百分比或者固定偏移量来决定子控件的尺寸。

 Ext.create('Ext.form.Panel',{
     width: 500,
     height: 400,
     title: 'Anchor',
     renderTo: 'anchor',
     layout: 'anchor',
     buttonAlign : 'center',
     items: [{
     　　　　xtype: 'panel',
         　　title: '75% Width and 20% Height',
        　　　anchor: '75% 20%'
         },{
        　　xtype: 'panel',
         　　title: 'Offset -300 Width and -200 Height',
             anchor: '-300 -200'
         },{
             xtype: 'panel',
             title: 'Offset -200 Width and 40% Height',
             anchor: '-250 40%'
         }],
     buttons : [{
         text : 'upDate',
         handler : function() {
             //do something..
         }
     }]
 });                

效果：

---

4、Auto布局:

 Ext.create('Ext.form.Panel',{
     width: 500,
     height: 400,
     title: 'Auto',
     renderTo: 'auto',
     layout: 'auto',
     buttonAlign : 'center',
     margin: '50 150 50 50',
     border: true,
     items: [{
          type: 'panel',
          title: 'AutoLayout1',
          margin: '10 10 10 10',
          border: true,
     },{
         xtype: 'panel',
     title: 'AutoLayout2',
     border: true,
     margin: '10 10 10 10'
     }],
     buttons : [{
         text : 'upDate',
         handler : function() {
             //do something..
     }
     }]
 });          

效果：

---

---

一些常用配置与问题：

1、border 边框设置

　　默认为false,边框不可见。true为边框可见。

2、margin 组件页边

　　margin 可以是一个数值适用于所有边 或者它可以是每个样式的CSS样式规范, 例如: '10 5 3 10'。

3、buttonAlign 按钮Button位置

　　指定Panel中按钮的位置。可配置的值有'right', 'left' 和 'center'(对于所有的buttons/fbar默认为'right'，对于toolbar 则默认为'left')。

4、handler : function(){}

　　按钮点击事件的触发。

5、关于标签fieldLabel与title

　　title为要现实的标签文本。

　　fieldLabel为域标签。它被附加了labelSeparator， 其位置和大小被labelAlign、 labelWidth和labelPad配置确认。

　　　　labelSeparator: 插入到fieldLabel后面的字符。默认为":"

　　　　labelAlign: 控制fieldLabel的位置和对齐方式。有效值为:

　　　　　　　"left" (默认) - 标签位于域的左边，其文本左对齐。其宽度由labelWidth配置确定。

　　　　　　　"top" - 标签位于域的顶端。

　　　　　　　"right" - 标签位于域的右边，其文本右对齐。其宽度由labelWidth配置确定。

　　　　labelWidth: fieldLabel以像素为单位的宽度。只适用于 labelAlign设置了“left”或“right”。默认为"100"。

　　　　labelPad: fieldLabel和输入域之间的像素空间的合计。默认为"5"。