Extjs6組件——Form大家族成員介紹

本文基於ext-6.0.0

一、xtype

　　form一共有12種xtype，下面來一一舉例說一下。

1、textfield

　　這個是用的最多的form之一。

 

        {
            xtype: 'textfield',
            fieldLabel:'姓名（textfield）',
            name:'userName',
        },    

 

2、combo

 　combo是有下拉菜單的表單，所以需要store來存放下拉菜單的數據，數據可以是本地的，也可以是ajax請求的。（還有個下拉樹，會單獨寫一篇）　

　　 value：設置默認值。

　　 queryMode：默認是 'remote',動態加載數據；也可以設置為‘local’，加載本地數據。

　　 displayField：顯示的數據。

　　 valueField：表單的值。

　　 triggerAction: 'all',all是默認，還有last和query，具體表示什么不太清楚，大概是下拉菜單查詢值的設置。

　　editable:false， ： 只可以選擇，不可以編輯，combo加上這個還是很有必要的。

 

（1）本地數據

　　　　{
            xtype:'combo',
            fieldLabel:'性別（combo）',
            name: 'sex',
            value:1,
            store: Ext.create('Ext.data.Store', {
                fields: ['name', 'val'],
                data: [
                    {name: '男',val: 0},
                    {name: '女',val: 1} ] }),
            queryMode: 'local',  
            displayField: 'name',
            valueField: 'val',
            triggerAction: 'all',
　　　　　　　editable:false,
        },

 （2）ajax請求數據

    　　{
            fieldLabel: '狀態',
            xtype: 'combo',
            name: 'enable',
            store: Ext.create('report.store.selectstore.EnableTypeStore',{}),
            queryMode: 'remote',
            displayField: 'value',
            valueField: 'key',
            value:1,
            allowBlank: false,
            triggerAction: 'all',
        },

　　store：

Ext.define('report.store.selectstore.EnableTypeStore',{
    extend: 'Ext.data.Store',
    alias: 'store.selectstore_EnableTypeStore',
    proxy:{
        type: 'ajax',
        url: Ext.ewms.getApiUrl("/selectType/enableType"),
        actionMethods: {
            read: 'post'
        },
        reader: {
            type: 'json',
            rootProperty: "body"
        }
    },
    autoLoad: true,
});

 

3、numberfield

 選擇這個類型，則只能輸入數字。默認樣式是含有上下小箭頭的。

　　maxValue，minValue：最大最小值，數字專用。

　　hideTrigger: true ：去掉默認的小箭頭。

　　keyNavEnabled: false,mouseWheelEnabled: false ：去掉鼠標、鍵盤事件。

　　　　{
            xtype: 'numberfield',
            name: 'age',
            fieldLabel: '年齡（numberfield）',
            minValue: 0, //prevents negative numbers
            // Remove spinner buttons, and arrow key and mouse wheel listeners
            hideTrigger: true,
            keyNavEnabled: false,
            mouseWheelEnabled: false
        },

 只能是2的倍數 ↓↓↓

　　　{
            xtype: 'numberfield',
            name: 'evens',
            fieldLabel: 'Even(numberfield)',
            // Set step 表示執行幾步，例如改為3，則每次加4
            step: 2,
            value: 0,
            // Add change handler to force user-entered numbers to evens
            listeners: {
                change: function(field, value) {
                    value = parseInt(value, 10);
                    field.setValue(value + value % 2);
                }
            }
        },

 

4、datefield

　　　　{
            xtype: 'datefield',
            fieldLabel:'生日（datefield）',
            name:'birthday',
        },

 　　

　　這里補充一點：datefield在數據聯調時直接用setValue是不顯示數據的，這是數據類型的問題，解決方法如下：

{
   name:'beginTime',
   format: 'Y-m-d H:i:s',
   valueToRaw : function(value) {
      return Ext.util.Format.date(new Date(value),'Y-m-d H:i:s');
   },
   allowBlank:false
}

 

5、timefield

    {
            xtype: 'timefield',
            name: 'time',
            fieldLabel: '時間（timefield）',
            minValue: '6:00 AM',
            maxValue: '8:00 PM',
            increment: 30,  //間隔30分鍾
        },    

 

6、radiofield

　　這個是單選的，通常是成組出現。可以用一個fieldcontainer來存放一組radiofield。

　　注意這個用的是boxLabel和inputValue，不知道這個與label和value有什么區別（沒試過，才發現）。

　　　　{
            xtype      : 'fieldcontainer',
            fieldLabel : '學歷（fieldcontainer）',
            defaultType: 'radiofield',
            anchor:'50%',
            defaults: {
                flex: 1
            },
            items: [
                {
                    boxLabel  : '小學（radiofield）',
                    name      : 'size',
                    inputValue: 'm',
                    id        : 'radio1'
                }, {
                    boxLabel  : '初中（radiofield）',
                    name      : 'size',
                    inputValue: 'l',
                    id        : 'radio2'
                }, {
                    boxLabel  : '高中（radiofield）',
                    name      : 'size',
                    inputValue: 'xl',
                    checked   : true,
                    id        : 'radio3'
                }
            ]
        },

 7、checkboxfield

　　這個是可以多選的。

　　checked : true，選中。

{
            xtype: 'fieldcontainer',
            fieldLabel: '愛好（fieldcontainer）',
            defaultType: 'checkboxfield',
            anchor:'50%',
            items: [
                {
                    boxLabel  : '電影（checkboxfield）',
                    name      : 'topping',
                    inputValue: '1',
                    id        : 'checkbox1'
                }, {
                    boxLabel  : '讀書（checkboxfield）',
                    name      : 'topping',
                    inputValue: '2',
                    id        : 'checkbox2'
                }, {
                    boxLabel  : '旅行（checkboxfield）',
                    name      : 'topping',
                    inputValue: '3',
                    checked   : true,
                    id        : 'checkbox3'
                }
            ]
        },

 

　　補充：只有一個checkboxfield，如何獲取是否選中的值，如下：

　　　　　　　　　{
                    xtype: 'checkboxfield',
                    name: 'xxx',
                    boxLabel: '是否啟用',           
                    inputValue:1,
                    uncheckedValue:0
                },

 

8、displayfield

　　這個只顯示，不驗證，不提交。不知道哪里會用到呢。

　　　　{
            xtype: 'displayfield',
            fieldLabel: '只顯示 不驗證 不提交',
            name: 'home_score',
            value: 'displayfield'
        },

 　　補充：這個看到用處啦，很有用的，如下（在框框后面加單位）

　　

　　　　{
            xtype: 'fieldcontainer',
            fieldLabel: 'Time worked',
            combineErrors: false,
            defaults: {
                hideLabel: true,
                margin: '0 5 0 0'
            },
            items: [{
               name : 'hours',
               xtype: 'numberfield',
               minValue: 0,
               width: 95,
               allowBlank: false
           }, {
               xtype: 'displayfield',
               value: 'hours'
           }, {
               name : 'minutes',
               xtype: 'numberfield',
               minValue: 0,
               width: 95,
               allowBlank: false
           }, {
               xtype: 'displayfield',
               value: 'mins'
            }]
        }

 

9、filefield

　　上傳文件的，沒有實際使用過。

    {
            xtype: 'filefield',
            name: 'photo',
            fieldLabel: '選擇圖片（filefield）',
            msgTarget: 'side',   //提示信息在旁邊
            allowBlank: false,   //不能為空
            anchor: '100%',
            buttonText: 'Select Photo...'
        },

 

10、hiddenfield

　　這個是隱藏的，頁面上啥也沒有。應該是用來存放一些數據，但不需要在這里顯示的，就像input類型為hidden時，會存一些url之類的。

    {
            xtype: 'hiddenfield',
            name: 'hidden_field',
            id:'hidden_field',
            value: '這些內容來自看不見的hiddenfield'
        },

11、textareafield

　　就是個大的textfield。

　　grow：true，：框隨着內容增加，可以變大。可以設置最大最小，growMin和growMax。

　　下面的listeners設置了value為hiddenfield的value。

　　{
            xtype     : 'textareafield',
            grow      : true, //內容多，框變大，可設置growMin growMax
            name      : 'message',
            fieldLabel: '隨筆（textareafield）',
            anchor    : '100%',
            listeners:{ afterRender:function(){
                    var hidden_field =  Ext.getCmp("hidden_field").getValue();
                    this.setValue(hidden_field); } }
        },

 12、htmleditor

　　HTML編輯器，感覺用這個編輯HTML不太方便呀，這個一般情況下應該不會用到。

　　　　{
            xtype: 'htmleditor',
            enableColors: false,
            enableAlignments: false,
            anchor: '100%',
            value:'htmleditor'
        }

 

二、vtype

1、自帶vtype

 　　自帶的vtype有4個，分別是‘email’，'url'，'alphanum'(字母數字)，'alpha'(字母)。

　　　　{
            xtype: 'textfield',
            fieldLabel:'郵箱',
            name:'email',
            vtype:'email',
            msgTarget: 'side'
        },

2、自定義vtype

　　在overrides里面新建一個文件夾form，在里面新建VTypes.js，代碼如下：

Ext.define('overrides.VTypes', {
    override: 'Ext.form.VTypes',
    // vtype validation function
    time: function(value) {
        return this.timeRe.test(value);
    },
    // RegExp for the value to be tested against within the validation function
    timeRe: /^([1-9]|1[0-9]):([0-5][0-9])(\s[a|p]m)$/i,
    // vtype Text property: The error text to display when the validation function returns false
    timeText: 'Not a valid time.  Must be in the format "12:34 PM".',
    // vtype Mask property: The keystroke filter mask
    timeMask: /[\d\s:amp]/i
})

　　然后就可以使用vtype了

    　　{
            xtype: 'textfield',
            fieldLabel:'時間',
            name:'time',
            vtype:'time',
            msgTarget: 'side'
        },

 

三、其它設置

form有一些設置項可選，如果你的form有些設置是相同的，這可以寫在 defaults 里面，例如：

defaults: {
        xtype: 'textfield',
        minWidth:350,
        labelAlign: 'right',
        labelWidth:160,        
        padding: 10
    },    

form可以設置的有：①xtype

　　　　　　　　　 ②labelAlign，labelWidth     label的位置和寬度

　　　　　　　　　 ③maxWidth，minWidth     框的寬度

　　　　　　　　　 ④maxLength，minLength  字符串長度

　　　　　　　　　 ⑤maxValue，minValue       最大最小值

　　　　　　　　　 ⑥allowBlank                     是否可以為空

   　　　　　　　　 ⑦msgTarget   　　　　　　 提示的位置

 

 

 完。

人生的一端在居住地，另一端在原始，只有旅行能夠到達原始。