ExtJs中column与form布局的再次领悟

今天在设计页面时又用到了这个布局，所以再次理解了一遍，将自己的心得与大家分享。

其实，这个布局是很简单的，先看一下大体的轮廓

1. var entinfos = { 
2.                  xtype: 'fieldset', 
3.           baseCls:'x-fieldset',     
4.                  autoHeight: true, 
5.                  items: [{ 
6.                     layout:'column', 
7.                     items:[{ 
8.                  border: false, 
9.                     columnWidth: .33, 
10.                     layout: 'form', 
11.                     items: [{}] 
12.                 },{ 
13.                     border: false, 
14.                     columnWidth: .33, 
15.                     layout: 'form', 
16.                     items: [{}] 
17.                 },{ 
18.                  border: false, 
19.                     columnWidth: .33, 
20.                     layout: 'form', 
21.                     items: [{}] 
22.             }] 
23.                  },{ 
24.                     layout:'column', 
25.                     items:[{
26. columnWidth: .39,
27. border: false,
28. layout: 'form',
29. items: [receiver]
30. }]
31.                  },{ 
32.                     layout:'column', 
33.                     items:[{}] 
34.                  },{ 
35.                     layout:'column', 
36.                     items:[{}] 
37.                  },{ 
38.                     layout:'column', 
39.                     items:[{}] 
40.                  },{ 
41.                     layout:'column', 
42.                     items:[{}] 
43.                  },{ 
44.                     layout:'column', 
45.                     items:[{}] 
46.                  },{ 
47.                     layout:'column', 
48.                     items:[{}] 
49.                  },{ 
50.                     layout:'column', 
51.                     items:[{}] 
52.                  },{ 
53.                     layout:'column', 
54.                     items:[{}] 
55.                  }] 
56.              }; 

看到了吗？一个column中可以放一个form,也可以放多个form关键的地方是columnwidth的设置，column是指在这列中要放多少个form，列和列之间都是平行的，掌握了这一点就好理解了。

本文转自sucre03 51CTO博客，原文链接：http://blog.51cto.com/sucre/971121，如需转载请自行联系原作者