前段时间转了一篇有关于ExtJs中column与form的布局问题(可以参考这篇文章http://sucre.blog.51cto.com/1084905/884279 ),今天在设计页面时又用到了这个布局,所以再次理解了一遍,将自己的心得与大家分享。

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

  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,列和列之间都是平行的,掌握了这一点就好理解了。