Question

我正在尝试实施向导，而我正在使用CardLayout。该向导有3个屏幕，其中包含一些表单元素。所以，基本上我需要有一个分为3个屏幕的表单，只有输入的数据有效，用户才能从一个屏幕移动到下一个屏幕。

问题是，我如何表示表格？当用户最终完成向导时，我将需要提交所有数据。我尝试了这两种方法：

在表单面板上使用卡片布局。在这种情况下，表单元素无法正确呈现。
在卡片布局面板中为每个屏幕使用表单面板。在此可以呈现表单并且UI功能良好。但是，如何将三种形式的数据发送到一个post方法？

那么，我该怎么办？想法和建议请...

Answer 1

选项编号1是最佳解决方案，实际上我甚至不会考虑编号2，因为它的可扩展性不高。

我假设“表单元素未正确呈现”，您在每张卡片中都缺少表单布局。

items: [{
    id: 'card-0',
    layout: 'form',
    items: [{
        //items here
    }]
},{
    //other cards
}]

Answer 2

考虑在CardLayout的每个项目中使用Ext.form.FormPanel的选项，您可以阻止提交每个表单，并在最后一个表格中附加一个监听器来“循环”CardLayout面板中的项目的“提交”按钮并通过在每个上调用BasicForm的getFieldValues（）方法获取所有表单值。

var formValues = {};

CardLayoutPanel.items.each(function(panel){
    if (panel.isXType('form')) {
        Ext.apply(formValues, panel.getForm().getFieldValues());
    }
});

// Now you can dispatch an ajax request with Ext.Ajax that sends the
// formValues variable as parameters to your backend to process
// all values from the three forms.

使用CardLayout和FormPanels

2 个答案: