extjs 常用控件的使用 table layout

Ext.onReady(function() {
//定义下拉框中的值
var store = Ext.create('Ext.data.Store', {
fields: ['name', 'value'],
data: [{
name:'1', value:'男'
}, {
name:'0', value:'女'
}]
});

Ext.create('Ext.form.Panel', {
title: '添加人员信息',
//　设置表单的宽和高
width: 500,
height: 400,
frame:true, //采用渲染
floating: true,//居中对齐
draggable: true,
renderTo: Ext.getBody(),
bodyBorder:true,//加边框
bodyStyle: 'padding:10px',
layout: {
type: 'table', //采用表格布局，每行3列
columns:3,
},
bbar: ['->',  //底部设计，偏右
{
xtype: 'button',
text: '确定' ,
width:80,
style:'background-color:white;margin:10px;'
}],

defaults: {
labelWidth: 70,
width: 240,
colspan:2,
labelAlign: 'left'
},

items: [ {
colspan:1,
width: 240,
xtype: 'textfield',
fieldLabel: '姓名'
}, {
rowspan:1,
colspan:1,
xtype: 'label',
text: '个人照片：'
},{
rowspan:7,
colspan:1,
height:200,
width:150,
fieldLabel:'fsdfs',
xtype:'component',
autoEl:{
tag: 'img',    //指定为img标签

src: 'images/touxiang.jpg'    //指定url路径 ,一般为相对路径
}
}, {
xtype: 'numberfield',
fieldLabel: '年龄',
decimalPrecision: 0
}, {
xtype: 'datefield',

fieldLabel: '出生日期',
format: 'Y-m-d',
value: new Date()
},{
xtype:'textfield',
fieldLabel:'联系电话',
},{
xtype:'textfield',
regex:'[0-9]{11}',
fieldLabel:'手机号码'
},{
xtype:'textfield',
fieldLabel:'电子邮箱',
vtype:'email'
}, {
xtype: 'combo',
fieldLabel: '性别',
store: store,
displayField: 'value',
valueField: 'name',
queryMode: 'local',
editable:'false'
},{
colspan:3,
width:480,
xtype:'textfield',
fieldLabel:'身份证',
},{
colspan:3,
width:480,
xtype:'textfield',
fieldLabel:'具体地址',
},{
colspan:3,
width:480,
xtype:'textfield',
fieldLabel:'职位',
}]

})
})

{
xtype: 'checkboxgroup',
fieldLabel: '复选控件',
items: [{
boxLabel: '电影', name:'rb1', inputValue: '0'
}, {
boxLabel: '音乐', name:'rb1', inputValue: '1'
}, {
boxLabel: '游戏', name:'rb1', inputValue: '0'
}, {
boxLabel: '上网', name:'rb1', inputValue: '0'
}]
}

{
xtype: 'radiogroup',
fieldLabel: '单选控件',
items: [{
boxLabel: '男', name:'rb', inputValue: '0'
}, {
boxLabel: '女', name:'rb', inputValue: '1'
}]
}

{
xtype: 'fieldset',
title: '标签页',
items: [{
xtype: 'panel',
title: '标签页中的面板',
html: '这是内容',
height: 80
}]
}

{
xtype: 'htmleditor',
fieldLabel: 'HTML控件',
height: 150
}