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:'職位',
}]  
  
})
})

效果圖：

設置frame:false的效果：

複選控件的使用：

{
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
}]
}

效果圖：

HTML控件的使用：

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

效果圖：

源碼下載地址：http://download.csdn.net/detail/xu982604405/7338885