只讀字段與標籤字段

<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();
    
    //1、只讀字段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>'
        }]
    });
    //2、標籤字段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//隱藏字段標籤
        }]
    });
    
});