【ExtJS】FormPanel 布局(一)

浏览数：62 / 时间：2015年06月09日

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

 1 Ext.onReady(function(){
 2     Ext.create(‘Ext.form.Panel‘, {
 3         width: 500,
 4         title: ‘Layout‘,
 5 　　　　　renderTo : ‘form‘,
 6         items: [{
 7             xtype : ‘textfield‘,
 8             fieldLabel : ‘edit1‘,
 9             name : ‘edit1‘,
10         },{
11             xtype : ‘textfield‘,
12             fieldLabel : ‘edit2‘,
13             name : ‘edit1‘,
14         },{
15             xtype : ‘textfield‘,
16             fieldLabel : ‘edit3‘,
17             name : ‘edit1‘,
18         },{
19             xtype : ‘textfield‘,
20             fieldLabel : ‘edit4‘,
21             name : ‘edit1‘,
22         },{
23             xtype : ‘textfield‘,
24             fieldLabel : ‘edit5‘,
25             name : ‘edit1‘,
26         }],
27 　　　　　buttons : [{
28 　　　　　　　text : ‘upDate‘,
29 　　　　　　　handler : function(){
30 　　　　　　　　　//do something...
31 　　　　　　　}
32 　　　　　}] 
33     });
34 })

效果：

1、Absolute绝对布局：

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

 1 Ext.create(‘Ext.form.Panel‘, {
 2 　　title: ‘Absolute‘,
 3 　　renderTo: ‘absolute‘,
 4 　　width: 500,
 5 　　height: 250,
 6 　　layout: ‘absolute‘,
 7 　　items: [{
 8    　　xtype : ‘textfield‘,
 9  　　　fieldLabel : ‘edit1‘,
10    　　width : 100,
11    　　name : ‘edit1‘,
12    　　x : 10,
13       y : 10
14    },{
15    　　xtype : ‘textfield‘,
16    　　fieldLabel : ‘edit2‘,
17   　　 width : 160,
18    　　name : ‘edit1‘,
19    　　x : 20,
20    　　y : 40
21    },{
22    　　xtype : ‘textfield‘,
23    　　fieldLabel : ‘edit3‘,
24    　　width : 60,
25    　　name : ‘edit1‘,
26     　 x : 30,
27    　　y : 70
28   　},{
29     　　xtype : ‘textfield‘,
30    　　 fieldLabel : ‘edit4‘,
31     　　width : 190,
32        name : ‘edit1‘,
33    　　 x : 40,
34     　　y : 100
35 　　},{
36 　　　　xtype : ‘textfield‘,
37 　　　　fieldLabel : ‘edit5‘,
38 　　　　width : 220,
39 　　　　name : ‘edit1‘,
40 　　　　x : 50,
41 　　　　y : 130
42 　　}],
43 　　buttons : [{
44 　　　　text : ‘upDate‘,
45 　　　　handler : function() {
46       　　　　//do something...
47 　　　　}
48 　　}]   
49 });

效果：

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

 1 Ext.create(‘Ext.form.Panel‘, {
 2     width: 500,
 3     height: 250,
 4     title: ‘Accordion‘,
 5     renderTo: ‘accordion‘,
 6     layout : ‘accordion‘,
 7     items: [{
 8         title: ‘Panel1‘,
 9         html: ‘Panel content!‘
10     },{
11         itle: ‘Panel2‘,
12         html: ‘Panel content!‘
13     },{
14         title: ‘Panel3‘,
15         html: ‘Panel content!‘
16     }],
17     buttons : [{
18        text : ‘open Panel3‘,
19     　　handler : function() {
20           Ext.getCmp(‘Panel3‘).expand(true);
21     　　}
22     }]   
23 });

效果：

3、Anchor式布局：

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

 1 Ext.create(‘Ext.form.Panel‘,{
 2     width: 500,
 3     height: 400,
 4     title: ‘Anchor‘,
 5     renderTo: ‘anchor‘,
 6     layout: ‘anchor‘,
 7     buttonAlign : ‘center‘,
 8     items: [{
 9     　　　　xtype: ‘panel‘,
10         　　title: ‘75% Width and 20% Height‘,
11        　　　anchor: ‘75% 20%‘
12         },{
13        　　xtype: ‘panel‘,
14         　　title: ‘Offset -300 Width and -200 Height‘,
15             anchor: ‘-300 -200‘     
16         },{
17             xtype: ‘panel‘,
18             title: ‘Offset -200 Width and 40% Height‘,
19             anchor: ‘-250 40%‘
20         }],
21     buttons : [{
22         text : ‘upDate‘,
23         handler : function() {
24             //do something..
25         }
26     }]  
27 });

效果：

4、Auto

 1 Ext.create(‘Ext.form.Panel‘,{
 2     width: 500,
 3     height: 400,
 4     title: ‘Auto‘,
 5     renderTo: ‘auto‘,
 6     layout: ‘auto‘,
 7     buttonAlign : ‘center‘,
 8     margin: ‘50 150 50 50‘,
 9     border: true,
10     items: [{
11          type: ‘panel‘,
12          title: ‘AutoLayout1‘,
13          margin: ‘10 10 10 10‘,
14          border: true,            
15     },{
16         xtype: ‘panel‘,
17     title: ‘AutoLayout2‘,
18     border: true,
19     margin: ‘10 10 10 10‘
20     }],
21     buttons : [{
22         text : ‘upDate‘,
23         handler : function() {
24             //do something..
25     }
26     }]  
27 });