EXTJS4自學手冊——頁面控件（表單控件）

一、Ext.form.Panel

說明：Form fields包括：hiddenfield，displayfield，textfield，textareafield，filefield，timefield，datefield，combobox，numberfield，checkboxfield，radiofield，multislider，sliderfield

例子：

<script type="text/javascript">
    <!--在頁面加載完成后調用JS代碼-->
    Ext.onReady(function(){
    Ext.create('Ext.form.Panel', {
        frame: true,
        title: 'Form Fields',
        width: 340,
        bodyPadding: 5,
        renderTo: 'myForm',
        fieldDefaults: {
        labelAlign: 'left',
        labelWidth: 90,
        anchor: '100%'
        },
        items: [{
        //隱藏的文本框
        xtype: 'hiddenfield', //1
        name: 'hiddenfield1',
        value: '隱藏的文本框'
        },{
        //顯示文本框，相當於label
        xtype: 'displayfield', //2
        name: 'displayfield1',
        fieldLabel: 'Display field',
        value: '顯示文本框'
        },{
        //輸入文本框
        xtype: 'textfield', //3
        name: 'textfield1',
        fieldLabel: 'Text field',
        value: '輸入文本框'
        },{
        //輸入密碼的文本框，輸入的字符都會展現為.
        xtype: 'textfield', //4
        name: 'password1',
        inputType: 'password',
        fieldLabel: 'Password field'
        },{
        //多行文本輸入框
        xtype: 'textareafield', //5
        name: 'textarea1',
        fieldLabel: 'TextArea',
        value: '啦啦啦，我是賣報的小行家'
        },{
        //上傳文件文本框
        xtype: 'filefield', //6
        name: 'file1',
        fieldLabel: 'File upload'
        },{
        //時間文本框
        xtype: 'timefield', //7
        name: 'time1',
        fieldLabel: 'Time Field',
        minValue: '8:00 AM',
        maxValue: '5:00 PM',
        increment: 30
        },{
        //日期文本框
        xtype: 'datefield', //8
        name: 'date1',
        fieldLabel: 'Date Field',
        value: new Date()
        },{
        //下拉列表框
        xtype: 'combobox', //9
        fieldLabel: 'Combobox',
        displayField: 'name',
        store: Ext.create('Ext.data.Store', {
        fields: [
        {type: 'string', name: 'name'}
        ],
        data: [
        {"name":"Alabama"},
        {"name":"Alaska"},
        {"name":"Arizona"},
        {"name":"Arkansas"},
        {"name":"California"}
        ]
        }),
        queryMode: 'local',
        typeAhead: true
        },{
        //只能輸入數字的文本框
        xtype: 'numberfield',
        name: 'numberfield1', //10
        fieldLabel: 'Number field',
        value: 20,
        minValue: 0,
        maxValue: 50
        },{
        //復選框
        xtype: 'checkboxfield', //11
        name: 'checkbox1',
        fieldLabel: 'Checkbox',
        boxLabel: '復選框'
        },{
        //單選框，注意name和下面的單選框相同
        xtype: 'radiofield', //12
        name: 'radio1',
        value: 'radiovalue1',
        fieldLabel: 'Radio buttons',
        boxLabel: 'radio 1'
        },{
        //單選框，注意name和上面的單選框相同
        xtype: 'radiofield', //13
        name: 'radio1',
        value: 'radiovalue2',
        fieldLabel: '',
        labelSeparator: '',
        hideEmptyLabel: false,
        boxLabel: 'radio 2'
        },{
        //拖動組件
        xtype: 'multislider', //14
        fieldLabel: 'Multi Slider',
        values: [25, 50, 75],
        increment: 5,
        minValue: 0,
        maxValue: 100
        },{
        //拖動組件
        xtype: 'sliderfield', //15
        fieldLabel: 'Single Slider',
        value: 50,
        increment: 10,
        minValue: 0,
        maxValue: 100
        }]
        });
    });
</script>

執行結果：

二、數據驗證

例子：

<script type="text/javascript">
    <!--在頁面加載完成后調用JS代碼-->
    Ext.onReady(function(){
    Ext.create('Ext.form.Panel', {
        frame: true,
        title: 'Form Fields Validation',
        width: 340,
        bodyPadding: 5,
        renderTo: 'myForm',
        fieldDefaults: {
        labelAlign: 'left',
        labelWidth: 90,
        anchor: '100%',
        //錯誤提示顯示在下方，還可以配置為side、title、none
        msgTarget: 'under'
        },
        items: [{
        xtype: 'textfield',
        name: 'textfield1',
        fieldLabel: '必須輸入',
        //不允許為空驗證
        allowBlank: false //1
        },{
        xtype: 'textfield',
        name: 'textfield2',
        fieldLabel: '知道兩個字符',
        //輸入的字符長度驗證（至少輸入2個字符）
        minLength: 2 //2
        },{
        xtype: 'textfield',
        name: 'textfield3',
        fieldLabel: '最長5個字符',
        //輸入的字符長度驗證（最多輸入2個字符）
        maxLength: 5 //3
        },{
        xtype: 'textfield',
        name: 'textfield7',
        fieldLabel: '正則表達式驗證電話號碼',
        //通過正則表達式驗證
        regex: /^\d{3}-\d{3}-\d{4}$/, //4
        regexText: 'Must be in the format xxx-xxx-xxxx'
        },{
        xtype: 'textfield',
        name: 'textfield4',
        fieldLabel: '驗證用戶輸入的是否為email',
        //已經定義好的驗證，請通過文檔查看vtype
        vtype: 'email' //5
        },{
        xtype: 'textfield',
        name: 'textfield6',
        fieldLabel: '驗證用戶輸入的是否是URL',
        vtype: 'url' //8
        }]
        });
    });
</script>

執行結果：

三、動態加載數據

說明：通過load方法加載json數據

 

四、提交數據

說明：通過submit方法提交數據