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,如需转载请自行联系原作者

相关文章
|
6月前
|
前端开发
前端知识笔记(一)———button的type属性
前端知识笔记(一)———button的type属性
293 0
|
前端开发
前端工作总结182-element-ui el-table sortable属性 参数详解
前端工作总结182-element-ui el-table sortable属性 参数详解
396 0
前端工作总结182-element-ui el-table sortable属性 参数详解
|
前端开发
前端工作总结167-对element-form的理解
前端工作总结167-对element-form的理解
84 0
前端工作总结167-对element-form的理解
|
JavaScript 前端开发 测试技术
|
JavaScript 前端开发 HTML5
ExtJS中的accordion布局如何展开特定的item
因为项目需要,使用了extJS作为后台管理系统的前端框架。 众所周知,后台管理系统一般是根据权限来展示菜单的。 菜单使用了panel的accordion布局,然后内部使用panel包裹了一棵树(treepanel)。
1102 1