Extjs form image box Layout

Form5 = new Ext. FormPanel ({
Frame: true,
Height: 500,
// LabelWidth: 90,
Items :[{
Layout: 'column ',
Items :[{
Layout: "form ",
Items :[{
Xtype: 'box', // or xtype: 'component ',
// FieldLabel: 'picture ',
LabelStyle: "text-align: center ;",
Width: 150, // The image width.
Height: 150
// Image Height
// AutoEl :{
// Tag: 'img ', // specify as an img tag
// Src:
// '/Sshas/UploadFile/ustm811744678, 3980154701&fm=23&gp=0.jpg'
//}
}]
}]
},{
Layout: 'column ',
Items :[{
ColumnWidth:. 3,
Layout: "form ",
Items: []
},{
ColumnWidth:. 5,
Layout: "form ",
Items :[{
FieldLabel: 'picture ',
LabelStyle: "font-size: '20px '; text-align: center ;"
// LabelStyle: "text-align: center ;"
},{
Xtype: 'box', // or xtype: 'component ',
Width: 150, // The image width.
Height: 150, // The Image Height
Autoel :{
Tag: 'img ', // specify as an IMG tag
SRC: '/sshas/uploadfile/ustm811744678, 3980154701&fm=23&gp=0.jpg'
}
}]
}]
}]
});

Form3 = new Ext. formpanel ({
// Renderto: "cyrydetail ",
Bodystyle: 'padding: 20 40 ',
Frame: True,
Fileupload: True,
Height: 500,
Title: "practitioners details ",
// 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> unit sequence number ',
Name: "dwid"
}]
},{
Columnwidth:. 5,
Layout: "form ",
Items :[{
Xtype: 'textfield ',
Name: 'job ',
Fieldlabel: '<Div style = \ "vertical-align: middle; color: red; display: inline \"> * </div> title'
}]
}]

},{
Layout: 'column ',
Items :[{
Columnwidth:. 5,
Layout: "form ",
Items :[{
Xtype: 'textfield ',
Name: 'pname ',
FieldLabel: '<div style = \ "vertical-align: middle; color: red; display: inline \"> * </div> name'
}]
},{
ColumnWidth:. 5,
Layout: "form ",
Items :[{
Xtype: 'textfield ',
Name: 'byname ',
FieldLabel: 'Alias'
}]
}]
},{
Layout: 'column ',
Items :[{
ColumnWidth:. 5,
Layout: "form ",
Items :[{
Xtype: 'textfield ',
Vtype: 'cardidyany ',
Name: 'cardid ',
FieldLabel: '<div style = \ "vertical-align: middle; color: red; display: inline \"> * </div> ID card No'
}]

},{
ColumnWidth:. 5,
Layout: "form ",
Items :[{
FieldLabel: 'gender ',
DefaultType: 'Radio ',
Layout: 'table ',
IsFormField: true,
Items :[{
ColumnWidth:. 25,
Checked: true,
Name: 'sex ',
BoxLabel: 'male ',
InputValue: 'male'
},{
ColumnWidth:. 25,
Name: 'sex ',
BoxLabel: 'femal ',
InputValue: 'femal'
}]
}]
}]
},{
Layout: 'column ',
Items :[{

Columnwidth:. 5,
Layout: "form ",
Items :[{
Xtype: 'datefield ',
Fieldlabel: 'birthday ',
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> mobile phone number ',
Name: "phone ",
Vtype: 'phoneany'
}]

}

]

}

,{
Layout: 'column ',
Items :[{
ColumnWidth:. 5,
Layout: "form ",
Items :[{
Xtype: 'textfield ',
FieldLabel: 'qq number ',
Name: "qq ",
Vtype: 'qqany'
}]
},{
ColumnWidth:. 5,
Layout: "form ",
Items :[{
Xtype: 'textfield ',
Fieldlabel: 'household register address ',
Name: "Address"
}]
}

]

},{
Layout: 'column ',
Items :[{
Columnwidth:. 5,
Layout: "form ",
Items :[{
Xtype: 'textfield ',
Fieldlabel: 'domicile address ',
Name: "adddetail"
}]
},{
Columnwidth:. 5,
Layout: "form ",
Items :[{
Xtype: 'textfield ',
Fieldlabel: '<Div style = \ "vertical-align: middle; color: red; display: inline \"> * </div> Current address ',
Name: "nowaddress"
}]
}

]

},{
Layout: 'column ',
Items :[{
ColumnWidth:. 5,
Layout: "form ",
Items :[{
Xtype: 'textfield ',
FieldLabel: 'address of the current location ',
Name: "nadddetail"
}]
},{
ColumnWidth:. 5,
Layout: "form ",
Items :[{
Xtype: 'textfield ',
Fieldlabel: '<Div style = \ "vertical-align: middle; color: red; display: inline \"> * </div> mailbox ',
Name: "email ",
Vtype: 'emailany'
}]
}

]

},{
Layout: 'column ',
Items :[{
Columnwidth:. 9,
Layout: "form ",
Items :[{
Fieldlabel: 'employee note'
},{
Xtype: 'textea ',
Name: 'detail ',
HideLabel: true,
Height: 50,
Anchor: '000000'
}]

}]

},{
Layout: 'column ',
Items :[{
ColumnWidth:. 5,
Layout: "form ",
Items :[{
Id: 'upload ',
Name: 'upload ',
Fieldlabel: "photo ",
Inputtype: "file ",
Xtype: "field ",
Vtype: 'uploadany'
}]
},{
Columnwidth:. 5,
Layout: "form ",
Items :[{
Xtype: 'textfield ',
FieldLabel: '<div style = \ "vertical-align: middle; color: red; display: inline \"> * </div> landline phone ',
Name: "tel ",
Vtype: 'telany'
}]
}]
},{
Layout: 'column ',
Items :[{
ColumnWidth:. 5,
Layout: "form ",
Items :[{
Xtype: 'textfield ',
FieldLabel: 'Other creden ',
Name: "otherzj"
}]
},{
ColumnWidth:. 5,
Layout: "form ",
Items :[{
Xtype: 'textfield ',
FieldLabel: 'Other credential contact information ',
Name: "othercon"
}]

}]
},{
Layout: 'column ',
Items :[{
ColumnWidth:. 5,
Layout: "form ",
Items :[{
Xtype: 'textfield ',
FieldLabel: 'reporter ',
Name: "iipersion"
}]

},{
ColumnWidth:. 5,
Layout: "form ",
Items :[{
Xtype: 'textfield ',
FieldLabel: 'reporting unit ',
Name: "idepname"
}]
}]
}

,{
Layout: 'column ',
Items :[{
ColumnWidth:. 5,
Layout: "form ",
Items :[{
Xtype: 'datefield ',
Format: 'Y-m-d ',
FieldLabel: 'reporting time ',
Name: "itime ",
Width: 125,
Editable: false
}]

},{
ColumnWidth:. 5,
Layout: "form ",
Items :[{
Xtype: 'datefield ',
FieldLabel: 'onboarding time ',
Format: 'Y-m-d ',
Name: "ruzhitime ",
Width: 125,
Editable: false

}]
}]

},{
Layout: 'column ',
Items :[
/*
*, {Columnwidth:. 5, layout: "form", items :[{
* Xtype: 'datefield ', fieldlabel: 'departure time', format: 'Y-m-d ',
* Name: "lizhitime", width: 120, Editable: false}]}
*/
]
}]

});
VaR window = new Ext. Window ({
Title: 'practitioners ',
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 ();