Ext.js formPanel 获取值

可以使用 `getValues()` 方法来获取 `formPanel` 中的所有字段值，返回一个对象，其中键名为字段名称，键值为字段值。示例代码如下：

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()` 方法获取其值。

相关问题

Ext.form.FormPanel 样例

以下是一个基本的 Ext.form.FormPanel 样例：

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上传文件

要在EXT.js中实现上传文件功能，可以使用Ext.form.Panel和Ext.form.field.File组件。具体步骤如下：

1. 创建一个Ext.form.Panel组件，设置属性和方法。

var formPanel = Ext.create('Ext.form.Panel', {
    renderTo: Ext.getBody(),
    width: 400,
    height: 150,
    title: '上传文件',
    bodyPadding: 10,
    frame: true,
    url: 'upload.php', //上传文件处理的URL
    method: 'POST', //上传文件的方式
    items: [{
        xtype: 'filefield', //上传文件的组件
        name: 'file', //上传文件的参数名
        fieldLabel: '选择文件',
        labelWidth: 70,
        msgTarget: 'side',
        allowBlank: false,
        buttonText: '浏览...'
    }],
    buttons: [{
        text: '上传',
        handler: function() {
            var form = this.up('form').getForm();
            if (form.isValid()) {
                form.submit({
                    success: function(form, action) {
                        Ext.Msg.alert('成功', action.result.msg);
                    },
                    failure: function(form, action) {
                        Ext.Msg.alert('失败', action.result.msg);
                    }
                });
            }
        }
    }]
});

2. 创建一个Ext.form.field.File组件，用于选择要上传的文件。

{
    xtype: 'filefield',
    name: 'file',
    fieldLabel: '选择文件',
    labelWidth: 70,
    msgTarget: 'side', //错误提示的位置
    allowBlank: false, //是否允许为空
    buttonText: '浏览...' //选择文件按钮的文本
}

3. 在表单中添加按钮，用于提交表单数据。

{
    xtype: 'button',
    text: '上传',
    handler: function() {
        var form = this.up('form').getForm();
        if (form.isValid()) { //验证表单是否合法
            form.submit({ //提交表单数据
                success: function(form, action) {
                    Ext.Msg.alert('成功', action.result.msg);
                },
                failure: function(form, action) {
                    Ext.Msg.alert('失败', action.result.msg);
                }
            });
        }
    }
}

4. 在服务端处理上传文件。

在上面的代码中，上传文件处理的URL为'upload.php'，需要在该文件中处理上传的文件，将文件保存到服务器上。具体代码如下：

<?php
$targetDir = "uploads/"; //上传文件保存的目录
$targetFile = $targetDir . basename($_FILES["file"]["name"]); //上传文件的路径
$uploadOk = 1;
$imageFileType = strtolower(pathinfo($targetFile,PATHINFO_EXTENSION)); //文件类型

//检查文件是否已经存在
if (file_exists($targetFile)) {
    echo json_encode(array('msg' => '文件已经存在'));
    $uploadOk = 0;
}

//检查文件大小
if ($_FILES["file"]["size"] > 5000000) { // 5MB
    echo json_encode(array('msg' => '文件太大'));
    $uploadOk = 0;
}

//检查文件类型
if($imageFileType != "jpg" && $imageFileType != "png" && $imageFileType != "jpeg"
&& $imageFileType != "gif" ) {
    echo json_encode(array('msg' => '只允许上传jpg、png、jpeg和gif格式的文件'));
    $uploadOk = 0;
}

//上传文件
if ($uploadOk == 0) {
    echo json_encode(array('msg' => '上传失败'));
} else {
    if (move_uploaded_file($_FILES["file"]["tmp_name"], $targetFile)) {
        echo json_encode(array('msg' => '文件上传成功'));
    } else {
        echo json_encode(array('msg' => '上传失败'));
    }
}
?>

以上就是在EXT.js中实现上传文件功能的步骤。