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,
                95,
               allowBlank: false
           }, {
               xtype: 'displayfield',
               value: 'hours'
           }, {
               name : 'minutes',
               xtype: 'numberfield',
               minValue: 0,
                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: /[ds: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   　　　　　　 提示的位置

 完。

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