/**
* ExtJs4
* =》FormFieldTypes示例
* 亮点:form表单所支持的各种元素;
*/
Ext.require([
'Ext.form.*'
]);
Ext.onReady(function() {
var formpanel = Ext.create('Ext.form.Panel', {
renderTo: Ext.getBody(),
title: "FormFields_表单元素汇总",
width: 350,
frame: true,
bodyPadding: 5,
fieldDefaults: {
labelAlign: "right",
labelWidth: 90,
anchor: "100%" // 自动延伸;
},
items: [{
xtype: "textfield", // 文本输入框;
fieldLabel: "Textfield",
name: "textname",
value: "Text field value" // 初始值;
}, {
xtype: "textfield", // 文本输入框_密码类型;
fieldLabel: "PasswordField",
inputType: "password",
name: "pswname"
}, {
xtype: "filefield", // 上传控件;
fieldLabel: "Fileupload",
name: "filename"
}, {
xtype: "textareafield", // 文本区域输入框;
fieldLabel: "TextArea",
name: "textareaname",
value: "Textarea value"
}, {
xtype: "displayfield", // 显示组件;
fieldLabel: "Displayfield",
name: "playname",
value: "<span style='color: green;'>displayvalue</span>"
}, {
xtype: "numberfield", // 数字选择控件;
fieldLabel: "Numberfield",
name: "numbername",
value: 23,
minValue: 0,
maxValue: 230
}, {
xtype: "checkboxfield", // 确认框;
fieldLabel: "Checkbox",
name: "checkboxname",
boxLabel: "<span style='color: green;'>boxLabel</span>",
checked: true
}, {
xtype: 'radiofield', // 两个单选按钮组成组;
fieldLabel: 'RadioButtons',
name: 'radiof',
inputValue: 'radiovfirst', // 注意:如果多个合成组,那就得用inputValue设置值,否则不行;
boxLabel: 'radiofname'
}, {
xtype: 'radiofield',
fieldLabel: '',
labelSeparator: '',
name: 'radiof',
inputValue: 'radiosecond',
hideEmptyLabel: false,
boxLabel: 'radiosname'
}, {
xtype: "radiogroup", // 单选按钮组;
fieldLabel: "Radiogroup",
name: "radiogroupname",
columns: 3, // 三列;
vertical: false,
items: [{
boxLabel: "Item1", name: "radiogroupname", inputValue: "r1"
}, {
boxLabel: "Item2", name: "radiogroupname", inputValue: "r2"
}, {
boxLabel: "Item3", name: "radiogroupname", inputValue: "r3", checked: true
}, {
boxLabel: "Item4", name: "radiogroupname", inputValue: "r4"
}, {
boxLabel: "Item5", name: "radiogroupname", inputValue: "r5"
}]
}, {
xtype: "datefield", // 日期选择控件;
fieldLabel: "DateFieldd",
name: "datename",
format: "Y-m-d",
value: new Date()
}, {
xtype: "timefield", // 时间选择控件;
fieldLabel: "TimeField",
name: "timename",
format: "H:i A", // 24小时制;
value: new Date(),
//value: "21:00 PM",
minValue: "07:00 AM",
maxValue: "23:00 PM"
}],
buttons: [{
text: "获取",
handler: function(btn) {
var bf = btn.up("form").getForm(),
values = bf.getValues(true);
// 打印查看相关数据:
console.log(values.split("&"));
}
}, {
text: "重置",
handler: function(btn) {
btn.up("form").getForm().reset();
}
}]
});
});
* ExtJs4
* =》FormFieldTypes示例
* 亮点:form表单所支持的各种元素;
*/
Ext.require([
'Ext.form.*'
]);
Ext.onReady(function() {
var formpanel = Ext.create('Ext.form.Panel', {
renderTo: Ext.getBody(),
title: "FormFields_表单元素汇总",
width: 350,
frame: true,
bodyPadding: 5,
fieldDefaults: {
labelAlign: "right",
labelWidth: 90,
anchor: "100%" // 自动延伸;
},
items: [{
xtype: "textfield", // 文本输入框;
fieldLabel: "Textfield",
name: "textname",
value: "Text field value" // 初始值;
}, {
xtype: "textfield", // 文本输入框_密码类型;
fieldLabel: "PasswordField",
inputType: "password",
name: "pswname"
}, {
xtype: "filefield", // 上传控件;
fieldLabel: "Fileupload",
name: "filename"
}, {
xtype: "textareafield", // 文本区域输入框;
fieldLabel: "TextArea",
name: "textareaname",
value: "Textarea value"
}, {
xtype: "displayfield", // 显示组件;
fieldLabel: "Displayfield",
name: "playname",
value: "<span style='color: green;'>displayvalue</span>"
}, {
xtype: "numberfield", // 数字选择控件;
fieldLabel: "Numberfield",
name: "numbername",
value: 23,
minValue: 0,
maxValue: 230
}, {
xtype: "checkboxfield", // 确认框;
fieldLabel: "Checkbox",
name: "checkboxname",
boxLabel: "<span style='color: green;'>boxLabel</span>",
checked: true
}, {
xtype: 'radiofield', // 两个单选按钮组成组;
fieldLabel: 'RadioButtons',
name: 'radiof',
inputValue: 'radiovfirst', // 注意:如果多个合成组,那就得用inputValue设置值,否则不行;
boxLabel: 'radiofname'
}, {
xtype: 'radiofield',
fieldLabel: '',
labelSeparator: '',
name: 'radiof',
inputValue: 'radiosecond',
hideEmptyLabel: false,
boxLabel: 'radiosname'
}, {
xtype: "radiogroup", // 单选按钮组;
fieldLabel: "Radiogroup",
name: "radiogroupname",
columns: 3, // 三列;
vertical: false,
items: [{
boxLabel: "Item1", name: "radiogroupname", inputValue: "r1"
}, {
boxLabel: "Item2", name: "radiogroupname", inputValue: "r2"
}, {
boxLabel: "Item3", name: "radiogroupname", inputValue: "r3", checked: true
}, {
boxLabel: "Item4", name: "radiogroupname", inputValue: "r4"
}, {
boxLabel: "Item5", name: "radiogroupname", inputValue: "r5"
}]
}, {
xtype: "datefield", // 日期选择控件;
fieldLabel: "DateFieldd",
name: "datename",
format: "Y-m-d",
value: new Date()
}, {
xtype: "timefield", // 时间选择控件;
fieldLabel: "TimeField",
name: "timename",
format: "H:i A", // 24小时制;
value: new Date(),
//value: "21:00 PM",
minValue: "07:00 AM",
maxValue: "23:00 PM"
}],
buttons: [{
text: "获取",
handler: function(btn) {
var bf = btn.up("form").getForm(),
values = bf.getValues(true);
// 打印查看相关数据:
console.log(values.split("&"));
}
}, {
text: "重置",
handler: function(btn) {
btn.up("form").getForm().reset();
}
}]
});
});