ExtJs中column与form布局的再次领悟-优快云博客

本文详细解析了ExtJS中使用column与form布局的实现方式，通过实例展示了如何利用column宽度设置来灵活布局form组件，适用于前端开发者深入理解ExtJS组件布局技巧。

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

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

var entinfos = {                   xtype: 'fieldset',            baseCls:'x-fieldset',                       autoHeight: true,                   items: [{                      layout:'column',                      items:[{                   border: false,                      columnWidth: .33,                      layout: 'form',                      items: [{}]                  },{                      border: false,                      columnWidth: .33,                      layout: 'form',                      items: [{}]                  },{                   border: false,                      columnWidth: .33,                      layout: 'form',                      items: [{}]              }]                   },{                      layout:'column',                      items:[{  columnWidth: .39,   border: false,  layout: 'form',   items: [receiver]   }]                  },{                      layout:'column',                      items:[{}]                   },{                      layout:'column',                      items:[{}]                   },{                      layout:'column',                      items:[{}]                   },{                      layout:'column',                      items:[{}]                   },{                      layout:'column',                      items:[{}]                   },{                      layout:'column',                      items:[{}]                   },{                      layout:'column',                      items:[{}]                   },{                      layout:'column',                      items:[{}]                   }]               };

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

本文出自 “乔磊的博客学习进步” 博客，请务必保留此出处http://sucre.blog.51cto.com/1084905/971121

转载于:https://my.oschina.net/sucre/blog/296246