用户信息添加的表单 下面有源码下载地址！！！ Ext.onReady(function() {//定义下拉框中的值var store = Ext.create('Ext.data.Store
用户信息添加的表单
下面有源码下载地址！！！
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
