Ext.form.FormPanel
时间: 2024-05-22 15:10:10 浏览: 12
Ext.form.FormPanel 是 Ext JS 框架中的一个组件,用于创建表单界面并处理表单提交。它继承自 Ext.Panel,提供了许多与表单相关的功能和配置项,例如输入字段、表单验证、表单重置、表单提交等。使用 FormPanel 可以快速创建复杂的表单界面,并且可以通过配置项灵活地控制表单的布局和样式。
相关问题
Ext.form.FormPanel 样例
以下是一个基本的 Ext.form.FormPanel 样例:
```javascript
Ext.onReady(function(){
Ext.create('Ext.form.Panel', {
renderTo: Ext.getBody(),
title: '简单表单',
width: 300,
bodyPadding: 10,
defaultType: 'textfield',
items: [{
fieldLabel: '姓名',
name: 'name',
allowBlank: false
}, {
fieldLabel: '密码',
name: 'password',
inputType: 'password',
allowBlank: false
}, {
xtype: 'checkbox',
fieldLabel: '已婚',
name: 'married'
}],
buttons: [{
text: '重置',
handler: function() {
this.up('form').getForm().reset();
}
}, {
text: '提交',
formBind: true,
handler: function() {
var form = this.up('form').getForm();
if (form.isValid()) {
form.submit({
url: 'submit.php',
success: function(form, action) {
Ext.Msg.alert('成功', action.result.msg);
},
failure: function(form, action) {
Ext.Msg.alert('失败', action.result.msg);
}
});
}
}
}]
});
});
```
这个样例创建了一个简单的表单,包含了一个文本框、一个密码框和一个复选框,以及两个按钮:一个用于重置表单,另一个用于提交表单。当用户点击“提交”按钮时,表单将被提交到一个名为“submit.php”的服务器端脚本进行处理。如果表单提交成功,将会弹出一个“成功”提示框,否则将会弹出一个“失败”提示框。
Ext.js formPanel 获取值
可以使用 `getValues()` 方法来获取 `formPanel` 中的所有字段值,返回一个对象,其中键名为字段名称,键值为字段值。示例代码如下:
```javascript
var formPanel = Ext.create('Ext.form.Panel', {
items: [{
xtype: 'textfield',
name: 'name',
fieldLabel: 'Name'
},{
xtype: 'textfield',
name: 'email',
fieldLabel: 'Email'
}]
});
// 获取所有字段值
var values = formPanel.getValues();
// 获取单个字段值
var nameValue = formPanel.getForm().findField('name').getValue();
```
其中,`getForm()` 方法返回 `formPanel` 的 `Ext.form.Basic` 对象,可以通过调用该对象的 `findField()` 方法获取单个字段,然后再调用该字段的 `getValue()` 方法获取其值。