只读字段与标签字段

<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//隐藏字段标签
        }]
    });
    
});