![145434_bNXL_1773772.png](http://static.oschina.net/uploads/space/2016/0201/145434_bNXL_1773772.png)
<div id="displayText" class="w_320">
<h2>展示只读文本字段</h2>
</div>
<div id="labelForm" class="w_320">
<h2>标签字段</h2>
</div>
Ext.onReady(function(){
//Ext表单
//Ext.form.Basic 基本表单组件二(拾取器字段Picker)
//开发中使用表单面板组件Ext.form.Panel,它本质是一个标准的(面板)Ext.panel.Panel,它内置并自动创建了Ext.form.Basic基本表单组件
//与原始表单主要3点不同(1.提交方式 2.表单验证 3.表单组件)
//1.提交方式(同步---异步)
//2.表单验证(需要手动验证----配置即可使用)
//3.表单组件(基本的组件------扩展的功能强大的组件)
//Picker抽象类,具有唯一的触发按钮用于在字段下方动态弹出面板
//拾取器组件如:(1.ComboBox,2.Date,3.Time)
//初始化信息提示功能
Ext.QuickTips.init();
//一、只读字段Ext.form.field.Display
//不支持验证,也不支持提交,仅仅是展示表单附加或者描述信息
Ext.create('Ext.form.Panel',{
title :'Ext.form.field.Dispaly示例',
width : 200,
renderTo : 'displayText',
frame : true,
bodyStyle : 'padding:5px',
items : [{
labelWidth : 70,
labelSeparator : ': ',
fieldLabel : '展示字段',
xtype : 'displayfield',
value : '<b>ExtJs6 Welcome 登场</b>'
}]
});
//二、标签字段Ext.form.Label
//当布局不能满足要求是才使用标签字段
Ext.create('Ext.form.Panel',{
title : '标签字段',
width : 270,
renderTo : 'labelForm',
frame : true,
bodyPadding : 5,
items : [{
xtype : 'label',
forId : 'userName',//关联inputId为userName的表单字段
text : '用户名'
},{
name : 'age',
fieldLabel : '年龄',
xtype : 'textfield'
},{
name : 'userName',
fieldLabel : 'userName',
xtype : 'textfield',
inputId : 'userName',
hideLabel : true//隐藏字段标签
}]
});
});