今天在设计页面时又用到了这个布局,所以再次理解了一遍,将自己的心得与大家分享。
其实,这个布局是很简单的,先看一下大体的轮廓
- 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,列和列之间都是平行的,掌握了这一点就好理解了。
本文转自sucre03 51CTO博客,原文链接:http://blog.51cto.com/sucre/971121,如需转载请自行联系原作者