Ext.js各种表单类型的集合(35)

本文展示了各种表单类型的使用,包括普通文本框、隐藏文本框、密码输入框、文件上传、文本区域、只读文本框、数值输入框、复选框、单选按钮、日期选择、时间选择等。

摘要生成于 C知道 ,由 DeepSeek-R1 满血版支持, 前往体验 >

/**
 * This example shows examples of the various supported form field types.
 * 这个例子展示的是不同的表单类型
 */
Ext.define('KitchenSink.view.form.FieldTypes', {
    extend: 'Ext.form.Panel',
    xtype: 'form-fieldtypes',


    frame: true,
    title: 'Form Fields',
    width: 400,
    bodyPadding: 10,
    layout: 'form',

    items: [{
        xtype: 'textfield',//普通的文本框
        name: 'textfield1',
        fieldLabel: 'Text field',
        value: 'Text field value'
    }, {
        xtype: 'hiddenfield',//隐藏的文本框
        name: 'hidden1',
        value: 'Hidden field value'
    },{
        xtype: 'textfield',
        name: 'password1',
        inputType: 'password',//是的输入的内容一密码的形式呈现
        fieldLabel: 'Password field'
    }, {
        xtype: 'filefield',//上传文件的实例加载
        name: 'file1',
        fieldLabel: 'File upload'
    }, {
        xtype: 'textareafield',//输入文本框
        name: 'textarea1',
        fieldLabel: 'TextArea',
        value: 'Textarea value'
    }, {
        xtype: 'displayfield',//只读形式的文本框
        name: 'displayfield1',
        fieldLabel: 'Display field',
        value: 'Display field <span style="color:green;">value</span>'
    }, {
        xtype: 'numberfield',//更改值的输入框
        name: 'numberfield1',
        fieldLabel: 'Number field',
        value: 5,
        minValue: 0,
        maxValue: 50
    }, {
        xtype: 'checkboxfield',
        name: 'checkbox1',
        fieldLabel: 'Checkbox',
        boxLabel: 'box label'
    }, {
        xtype: 'radiofield',
        name: 'radio1',
        value: 'radiovalue1',
        fieldLabel: 'Radio buttons',
        boxLabel: 'radio 1'
    }, {
        xtype: 'radiofield',
        name: 'radio1',
        value: 'radiovalue2',
        fieldLabel: '',
        //labelSeparator 插入到fieldLabel后面的字符 Defaults to: ":"
        labelSeparator: '',
        //当设置为true,如果fieldLabel为空,则标签元素(fieldLabel和labelSeparator)会被自动隐藏。 如果设置为false,会导致空标签元素被渲染,预留空格; 这对于想要在同一个表单里有一个没有标签的域于其他有标签的域对齐很有。如果想无条件隐藏标签,即使一个非空的fieldLabel配置,那么设置hideLabel配置为true。
        hideEmptyLabel: false,
        boxLabel: 'radio 2'
    }, {
        xtype: 'datefield',//日期框
        name: 'date1',
        fieldLabel: 'Date Field'
    }, {
        xtype: 'timefield',//具体的事件框
        name: 'time1',
        fieldLabel: 'Time Field',
        minValue: '1:30 AM',
        maxValue: '9:15 PM'
    }]
});
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值