extjs不使用表单提交
时间: 2024-06-05 08:10:31 浏览: 94
ExtJS提供了多种方便的方式来发送异步请求而不必使用表单提交。以下是一些常用的方式:
1. Ext.Ajax.request():可以通过此方法发送异步请求。可以指定请求的URL、请求方法、请求参数、请求头等信息。请求成功后,可以通过回调函数来处理返回的数据。
2. Ext.data.proxy.Ajax:可以通过此方式将数据存储到远程服务器中。可以指定请求的URL、请求方法、请求参数、请求头等信息。请求成功后,可以通过回调函数来处理返回的数据。
3. Ext.data.Connection:可以通过此方式发送异步请求。可以指定请求的URL、请求方法、请求参数、请求头等信息。请求成功后,可以通过回调函数来处理返回的数据。
4. Ext.direct.Manager:可以通过此方式发送远程调用请求。可以指定请求的方法名、参数等信息。请求成功后,可以通过回调函数来处理返回的数据。
总之,ExtJS提供了许多强大的工具和API,可以方便地发送异步请求而不必使用表单提交。
相关问题
extjs不使用表单提交导入文件
在 ExtJS 中,可以使用组件 `Ext.form.Panel` 和 `Ext.form.field.File` 来实现文件上传功能,而不需要使用表单提交。
首先,需要创建一个 `Ext.form.Panel` 组件,并设置 `enctype` 属性为 `multipart/form-data`,表示上传文件的数据类型为二进制数据。然后,在该组件中添加一个 `Ext.form.field.File` 组件,用于选择要上传的文件。
在提交表单时,可以通过 `Ext.Ajax.request` 方法发送请求,将上传的文件作为请求参数发送到服务器端。具体实现代码如下:
```javascript
Ext.create('Ext.form.Panel', {
title: '文件上传示例',
width: 400,
bodyPadding: 10,
renderTo: Ext.getBody(),
items: [{
xtype: 'filefield',
name: 'file',
fieldLabel: '选择文件',
labelWidth: 100,
msgTarget: 'side',
allowBlank: false,
anchor: '100%',
buttonText: '浏览...'
}],
buttons: [{
text: '上传',
handler: function() {
var form = this.up('form').getForm();
if (form.isValid()) {
form.submit({
url: 'upload.php',
waitMsg: '正在上传文件,请稍候...',
success: function(form, action) {
Ext.Msg.alert('提示', '文件上传成功!');
},
failure: function(form, action) {
Ext.Msg.alert('错误', '文件上传失败!');
}
});
}
}
}]
});
```
在上述代码中,`Ext.form.Panel` 组件中添加了一个 `Ext.form.field.File` 组件,其 `name` 属性设置为 `file`,表示上传的文件对应的参数名为 `file`。在点击上传按钮时,通过 `Ext.form.Panel` 组件的 `getForm` 方法获取到表单对象,然后通过 `isValid` 方法检查表单是否合法。如果表单合法,则通过 `submit` 方法提交表单数据,其中 `url` 属性设置为上传文件的服务器地址,`waitMsg` 属性设置为上传文件时显示的等待信息。在上传成功或失败后,分别通过 `success` 和 `failure` 回调函数进行处理。
在服务器端,可以使用 PHP 等脚本语言处理上传的文件。例如,以下是一个简单的 PHP 代码示例,用于接收上传的文件并保存到服务器上:
```php
<?php
$targetDir = "uploads/";
$targetFile = $targetDir . basename($_FILES["file"]["name"]);
if (move_uploaded_file($_FILES["file"]["tmp_name"], $targetFile)) {
echo "文件上传成功!";
} else {
echo "文件上传失败!";
}
?>
```
在上述 PHP 代码中,`$_FILES["file"]` 表示上传的文件对象,可以通过 `tmp_name` 属性获取上传文件的临时文件名,通过 `name` 属性获取上传文件的原始文件名。`move_uploaded_file` 函数用于将上传的文件移动到指定目录中。当文件上传成功时,打印出文件上传成功的提示信息,否则打印出文件上传失败的提示信息。
extjs4.2 Form表单 提交
在 ExtJS 4.2 中,可以使用 Ext.form.Panel 类来创建表单,然后使用表单的 submit 方法来提交表单。以下是一个简单的示例:
```javascript
Ext.create('Ext.form.Panel', {
title: 'My Form',
width: 300,
bodyPadding: 10,
renderTo: Ext.getBody(),
url: 'submit.php', // 表单提交的 URL
items: [{
xtype: 'textfield',
name: 'username',
fieldLabel: 'Username'
}, {
xtype: 'textfield',
name: 'password',
inputType: 'password',
fieldLabel: 'Password'
}],
buttons: [{
text: 'Submit',
handler: function() {
var form = this.up('form').getForm();
if (form.isValid()) {
form.submit({
success: function(form, action) {
Ext.Msg.alert('Success', action.result.msg);
},
failure: function(form, action) {
Ext.Msg.alert('Failed', action.result.msg);
}
});
}
}
}]
});
```
在这个示例中,我们创建了一个 Ext.form.Panel 对象,并设置了一些属性,例如标题、宽度、padding、提交的 URL 等等。我们还添加了两个文本框作为表单的输入项,并为它们指定了 name 属性。最后,我们添加了一个提交按钮,并为它指定了一个事件处理函数。
在按钮的事件处理函数中,我们首先获取表单对象,然后调用表单的 isValid 方法来判断表单是否有效。如果表单有效,我们就调用表单的 submit 方法来提交表单。submit 方法接受一个对象作为参数,可以指定一些回调函数来处理提交成功或失败的情况。在这个示例中,我们分别显示了一个成功或失败的提示框。
当用户点击提交按钮时,表单数据将被发送到指定的 URL。在 PHP 中,你可以使用 $_POST 变量来获取表单数据。例如,如果你的表单中有一个名为 username 的文本框,你可以使用 $_POST['username'] 来获取它的值。
阅读全文