如何在Ext JS的弹出窗口中显示Ext.FormPanel？

在Ext JS中显示包含Ext.FormPanel的弹出窗口

基础概念

Ext JS是一个强大的JavaScript框架，用于构建富客户端Web应用程序。Ext.FormPanel是Ext JS中用于创建表单的容器组件，而弹出窗口通常使用Ext.Window或Ext.window.Window(取决于Ext JS版本)来实现。

实现方法

1. 创建FormPanel

首先需要创建一个表单面板：

var formPanel = Ext.create('Ext.form.Panel', {
    title: '示例表单',
    width: 300,
    bodyPadding: 10,
    items: [{
        xtype: 'textfield',
        fieldLabel: '用户名',
        name: 'username',
        allowBlank: false
    }, {
        xtype: 'textfield',
        fieldLabel: '密码',
        name: 'password',
        inputType: 'password',
        allowBlank: false
    }],
    buttons: [{
        text: '提交',
        handler: function() {
            if(formPanel.getForm().isValid()) {
                formPanel.getForm().submit({
                    url: 'submit.php',
                    success: function(form, action) {
                        Ext.Msg.alert('成功', action.result.msg);
                        win.close();
                    },
                    failure: function(form, action) {
                        Ext.Msg.alert('失败', action.result.msg);
                    }
                });
            }
        }
    }, {
        text: '取消',
        handler: function() {
            win.close();
        }
    }]
});

2. 创建并显示包含FormPanel的窗口

var win = Ext.create('Ext.window.Window', {
    title: '表单窗口',
    height: 200,
    width: 350,
    layout: 'fit',
    modal: true,
    items: [formPanel]
});

win.show();

完整示例代码

Ext.onReady(function() {
    // 创建表单面板
    var formPanel = Ext.create('Ext.form.Panel', {
        title: '用户登录',
        width: 300,
        bodyPadding: 10,
        defaults: {
            anchor: '100%',
            labelWidth: 80
        },
        items: [{
            xtype: 'textfield',
            fieldLabel: '用户名',
            name: 'username',
            allowBlank: false,
            msgTarget: 'under'
        }, {
            xtype: 'textfield',
            fieldLabel: '密码',
            name: 'password',
            inputType: 'password',
            allowBlank: false,
            msgTarget: 'under'
        }],
        buttons: [{
            text: '登录',
            formBind: true, // 只在表单有效时启用
            handler: function() {
                var form = formPanel.getForm();
                if(form.isValid()) {
                    form.submit({
                        url: 'login.php',
                        success: function(form, action) {
                            Ext.Msg.alert('成功', '登录成功');
                            win.close();
                        },
                        failure: function(form, action) {
                            Ext.Msg.alert('失败', action.result.msg);
                        }
                    });
                }
            }
        }, {
            text: '取消',
            handler: function() {
                win.close();
            }
        }]
    });

    // 创建窗口
    var win = Ext.create('Ext.window.Window', {
        title: '登录窗口',
        height: 220,
        width: 400,
        layout: 'fit',
        modal: true,
        closeAction: 'hide',
        items: [formPanel]
    });

    // 显示窗口
    win.show();
});

关键点说明

布局管理：窗口使用'fit'布局，使表单面板填满整个窗口空间
模态窗口：设置modal: true使窗口成为模态对话框
表单验证：使用allowBlank: false设置必填字段，formBind: true使按钮在表单有效时才可用
表单提交：通过getForm()获取表单对象，调用submit()方法提交数据

常见问题及解决方案

表单不显示：
- 确保窗口的layout设置为'fit'
- 检查表单面板的宽度和高度设置

表单提交失败：
- 检查后端接口地址是否正确
- 确保服务器返回正确的JSON格式响应
验证不工作：
- 确认字段设置了allowBlank: false
- 检查msgTarget设置是否正确显示错误信息
窗口关闭问题：
- 使用closeAction: 'hide'可以保留窗口实例以便重复使用
- 调用win.close()或win.hide()关闭窗口