实例讲解布局---layout

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

例子截图:

源代码:

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