extjs 布局

Ext.onReady(function(){
 var pnRow1=new Ext.Panel({
  border:false,
  layout:'column',
  items:[
   new Ext.Panel({
    columnWidth:.5,
    layout:'form',
    border:false,
    labelWidth:40,
    labelAlign:'right',
    items:[
     {
      xtype:'textfield',
      fieldLabel:'姓名',
      name:'uname',
      anchor:'95%'
     }
    ]
   }),
   new Ext.Panel({
    columnWidth:.3,
    layout:'form',
    border:false,
    labelWidth:40,
    labelAlign:'right',
    items:[
     {
      xtype:'radio',
      fieldLabel:'性别',
      boxLabel:'男',
      name:'sex',
      inputValue:'男',
      checked:true,
      anchor:"95%"
     }
    ]
   }),
   new Ext.Panel({
    columnWidth:.2,
    layout:'form',
    border:false,
    labelWidth:1,
    items:[
     {
      xtype:'radio',
      boxLabel:'女',
      name:'sex',
      inputValue:'女',
      labelSeparator:'',
      anchor:"95%"
     }
    ]
   })
  ]
 });
 var pnRow2=new Ext.Panel({
  layout:'column',
  border:false,
  items:[
   new Ext.Panel({
    columnWidth:.5,
    layout:'form',
    border:false,
    labelWidth:40,
    labelAlign:'right',
    items:[
     {
      xtype:'datefield',
      name:'birthday',
      fieldLabel:'生日',
      anchor:'95%'
     }
    ]
   }),
   new Ext.Panel({
    columnWidth:.5,
    layout:'form',
    border:false,
    labelWidth:40,
    labelAlign:'right',
    items:[
     {
      xtype:'combo',
      name:'study',
      store:['专科','本科','硕士','博士'],
      fieldLabel:'学历',
      anchor:'95%'
     }
    ]
   })
  ]
 });
 var pnRow3=new Ext.Panel({
  layout:'column',
  border:false,
  items:[
   new Ext.Panel({
    columnWidth:.3,
    layout:'form',
    border:false,
    labelWidth:40,
    labelAlign:'right',
    items:[
     {
      xtype:'checkbox',
      name:'hoby',
      inputValue:'computer',
      fieldLabel:'爱好',
      boxLabel:'计算机',
      anchor:'95%'
     }
    ]
   }),
   new Ext.Panel({
    columnWidth:.3,
    layout:'form',
    border:false,
    labelWidth:1,
    labelAlign:'right',
    items:[
     {
      xtype:'checkbox',
      name:'hoby',
      inputValue:'football',
      boxLabel:'足球',
      labelSeparator:'',
      anchor:'95%'
     }
    ]
   }),
   new Ext.Panel({
    columnWidth:.4,
    layout:'form',
    border:false,
    labelWidth:1,
    labelAlign:'right',
    items:[
     {
      xtype:'checkbox',
      name:'hoby',
      intputValue:'tinyTable',
      boxLabel:'乒乓球',
      labelSeparator:'',
      anchor:'95%'
     }
    ]
   })
  ]
 });
 
 var pnRow4=new Ext.Panel({//当然这里直接在FormPanel中添加TextField就可以了，因为只有一行，但是为了一致以及对齐方便我这里还是放到了panel中
  layout:'form',
  border:false,
  labelWidth:40,
  labelAlign:'right',
  items:[
   {
    xtype:'textfield',
    name:'email',
    fieldLabel:'住址',
    anchor:'98%'
   }
  ]
 });
 var pnRow5=new Ext.Panel({
  layout:'form',
  border:false,
  labelWidth:40,
  labelAlign:'right',
  items:[
   {
    xtype:'htmleditor',
    name:'note',
    fieldLabel:'备注',
    height:200,
    anchor:'98%'
   }
  ]
 });
 
 new Ext.FormPanel({
  renderTo:"divPanel",
  title:"个人信息录入",
  width:600,
  bodyStyle:'padding:10px',
  layout:"form",
  items:[
   pnRow1,
   pnRow2,
   pnRow3,
   pnRow4,
   pnRow5
  ]
 });
});