extjs form image box 布局

form5 = new Ext.FormPanel({
  frame : true,
  height : 500,
  // labelWidth:90,
  items : [{
     layout : 'column',
     items : [{
        layout : "form",
        items : [{
         xtype : 'box', // 或者xtype: 'component',
         // fieldLabel : '照片',
         labelStyle : "text-align:center;",
         width : 150, // 图片宽度
         height : 150
          // 图片高度
          // autoEl : {
          // tag : 'img', // 指定为img标签
          // src :
          // '/sshas/UploadFile/u=811744678,3980154701&fm=23&gp=0.jpg'
          // }
         }]
       }]
    }, {
     layout : 'column',
     items : [{
        columnWidth : .3,
        layout : "form",
        items : []
       }, {
        columnWidth : .5,
        layout : "form",
        items : [{
         fieldLabel : '照片',
         labelStyle : "font-size:'20px';text-align:center;"
          // labelStyle : "text-align:center;"
        }, {
         xtype : 'box', // 或者xtype: 'component',
         width : 150, // 图片宽度
         height : 150, // 图片高度
         autoEl : {
          tag : 'img', // 指定为img标签
          src : '/sshas/UploadFile/u=811744678,3980154701&fm=23&gp=0.jpg'
         }
        }]
       }]
    }]
 });

 form3 = new Ext.FormPanel({
  // renderTo:"cyrydetail",
  bodyStyle : 'padding:20 40',
  frame : true,
  fileUpload : true,
  height : 500,
  title : "从业人员详细信息",
  // width:700,
  labelWidth : 104,
  url : "cyryadd",
  items : [{
   layout : 'column',
   items : [{
    columnWidth : .5,
    layout : "form",
    items : [{
     xtype : 'textfield',
     fieldLabel : '<div style=\"vertical-align:middle;color:red;display:inline\">*</div>单位序号',
     name : "dwid"
    }]
   }, {
    columnWidth : .5,
    layout : "form",
    items : [{
     xtype : 'textfield',
     name : 'job',
     fieldLabel : '<div style=\"vertical-align:middle;color:red;display:inline\">*</div>职务'
    }]
   }]

  }, {
   layout : 'column',
   items : [{
    columnWidth : .5,
    layout : "form",
    items : [{
     xtype : 'textfield',
     name : 'pname',
     fieldLabel : '<div style=\"vertical-align:middle;color:red;display:inline\">*</div>姓名'
    }]
   }, {
    columnWidth : .5,
    layout : "form",
    items : [{
       xtype : 'textfield',
       name : 'byname',
       fieldLabel : '别名'
      }]
   }]
  }, {
   layout : 'column',
   items : [{
    columnWidth : .5,
    layout : "form",
    items : [{
     xtype : 'textfield',
     vtype : 'cardidyan',
     name : 'cardid',
     fieldLabel : '<div style=\"vertical-align:middle;color:red;display:inline\">*</div>身份证号'
    }]

   }, {
    columnWidth : .5,
    layout : "form",
    items : [{
       fieldLabel : '性别',
       defaultType : 'radio',
       layout : 'table',
       isFormField : true,
       items : [{
          columnWidth : .25,
          checked : true,
          name : 'sex',
          boxLabel : '男',
          inputValue : '男'
         }, {
          columnWidth : .25,
          name : 'sex',
          boxLabel : '女',
          inputValue : '女'
         }]
      }]
   }]
  }, {
   layout : 'column',
   items : [{

      columnWidth : .5,
      layout : "form",
      items : [{
         xtype : 'datefield',
         fieldLabel : '出生日期',
         format : 'Y-m-d',
         name : "birthday",
         width : 125,
         editable : false
        }]
     }, {
      columnWidth : .5,
      layout : "form",
      items : [{
       xtype : 'textfield',
       fieldLabel : '<div style=\"vertical-align:middle;color:red;display:inline\">*</div>手机号码',
       name : "phone",
       vtype : 'phoneyan'
      }]

     }

   ]

  }

  , {
   layout : 'column',
   items : [{
      columnWidth : .5,
      layout : "form",
      items : [{
         xtype : 'textfield',
         fieldLabel : 'QQ号',
         name : "qq",
         vtype : 'qqyan'
        }]
     }, {
      columnWidth : .5,
      layout : "form",
      items : [{
         xtype : 'textfield',
         fieldLabel : '户籍地址',
         name : "address"
        }]
     }

   ]

  }, {
   layout : 'column',
   items : [{
      columnWidth : .5,
      layout : "form",
      items : [{
         xtype : 'textfield',
         fieldLabel : '户籍地详址',
         name : "adddetail"
        }]
     }, {
      columnWidth : .5,
      layout : "form",
      items : [{
       xtype : 'textfield',
       fieldLabel : '<div style=\"vertical-align:middle;color:red;display:inline\">*</div>现住地址',
       name : "nowaddress"
      }]
     }

   ]

  }, {
   layout : 'column',
   items : [{
      columnWidth : .5,
      layout : "form",
      items : [{
         xtype : 'textfield',
         fieldLabel : '现住地详址',
         name : "nadddetail"
        }]
     }, {
      columnWidth : .5,
      layout : "form",
      items : [{
       xtype : 'textfield',
       fieldLabel : '<div style=\"vertical-align:middle;color:red;display:inline\">*</div>邮箱',
       name : "email",
       vtype : 'emailyan'
      }]
     }

   ]

  }, {
   layout : 'column',
   items : [{
      columnWidth : .9,
      layout : "form",
      items : [{
         fieldLabel : '人员备注'
        }, {
         xtype : 'textarea',
         name : 'detail',
         hideLabel : true,
         height : 50,
         anchor : '99%'
        }]

     }]

  }, {
   layout : 'column',
   items : [{
      columnWidth : .5,
      layout : "form",
      items : [{
         id : 'upload',
         name : 'upload',
         fieldLabel : "照片",
         inputType : "file",
         xtype : "field",
         vtype : 'uploadyan'
        }]
     }, {
      columnWidth : .5,
      layout : "form",
      items : [{
       xtype : 'textfield',
       fieldLabel : '<div style=\"vertical-align:middle;color:red;display:inline\">*</div>固定电话',
       name : "tel",
       vtype : 'telyan'
      }]
     }]
  }, {
   layout : 'column',
   items : [{
      columnWidth : .5,
      layout : "form",
      items : [{
         xtype : 'textfield',
         fieldLabel : '其他证件',
         name : "otherzj"
        }]
     }, {
      columnWidth : .5,
      layout : "form",
      items : [{
         xtype : 'textfield',
         fieldLabel : '其他证件联系方式',
         name : "othercon"
        }]

     }]
  }, {
   layout : 'column',
   items : [{
      columnWidth : .5,
      layout : "form",
      items : [{
         xtype : 'textfield',
         fieldLabel : '填报人',
         name : "iipersion"
        }]

     }, {
      columnWidth : .5,
      layout : "form",
      items : [{
         xtype : 'textfield',
         fieldLabel : '填报人单位',
         name : "idepname"
        }]
     }]
  }

  , {
   layout : 'column',
   items : [{
      columnWidth : .5,
      layout : "form",
      items : [{
         xtype : 'datefield',
         format : 'Y-m-d',
         fieldLabel : '填报时间',
         name : "itime",
         width : 125,
         editable : false
        }]

     }, {
      columnWidth : .5,
      layout : "form",
      items : [{
         xtype : 'datefield',
         fieldLabel : '入职时间',
         format : 'Y-m-d',
         name : "ruzhitime",
         width : 125,
         editable : false

        }]
     }]

  }, {
   layout : 'column',
   items : [
   /*
    * ,{ columnWidth : .5, layout : "form", items : [{
    * xtype:'datefield', fieldLabel:'离职时间', format:'Y-m-d',
    * name:"lizhitime", width:120, editable:false }] }
    */
   ]
  }]

 });
 var window = new Ext.Window({
    title : '从业人员',
    width : 1000,
    height : 520,
    minWidth : 300,
    minHeight : 200,
    layout : 'fit',
    minimizable : true,
    maximizable : true,
    plain : true,
    bodyStyle : 'padding:5px;',
    buttonAlign : 'center',
    // items : form3
    items : [{
       baseCls : "x-plain",
       layout : "column",
       items : [{
          columnWidth : .7,
          layout : "form",
          items : [form3]

         }, {
          columnWidth : .3,
          layout : "form",
          items : [form5]
         }]
      }]
   });

 window.show();