实例讲解布局---layout

来源：互联网发布：linux高级工程师招聘编辑：程序博客网时间：2024/05/20 02:55

今天结合自己做过的例子写一个布局的文章。方便大家学习：

例子截图:

源代码:

Ext.onReady(function(){              var panel=new Ext.Panel({                  id:'panel',                  renderTo:'hello',                  width:600,                  height:400,                  tbar:[btns],                  layout:'form',                  items:[                  //第一行                  {                  frame:true,                  height:80,                  layout:'column',                  items:                  [                  {                     width:250,                     layout:'form',                     labelWidth:70,                     items:                     [                         {xtype:'textfield',fieldLabel:'功能名称',width:160},                         {xtype:'combo',fieldLabel:'显示位置',width:160}                     ]                  },                  {                     width:250,                     layout:'form',                     labelWidth:70,                     items:                     [                         {xtype:'combo',fieldLabel:'类型',width:160},                         {xtype:'combo',fieldLabel:'LOAD加载'}                     ]                  }              ]           },{              //这样去掉它的border.表格层              bodyStyle : 'width:100%;border:0px solid #99bbe8;',              height:100,              layout:'column',              items:[grid]      //下面的表格           }]       });    });

注意事项：

1、布局是form-column-form

2、上面注明了第一行和第二行。一共就2行

3、grid代码没有给出。很普通的一个grid