/**
* 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'
}]
});
Ext.js各种表单类型的集合(35)
最新推荐文章于 2025-05-04 16:06:37 发布