extjs - 在两个窗口之间划分 ExtJS 表单

Question

我需要制作一个应用程序，在一个屏幕上的一个窗口中显示一个表单，并且在另一个屏幕上显示具有相同表单的一部分的主窗口 - 或者这可能是另一种表单。这可能与 ExtJs 吗？如何 ？有没有人见过这样的例子或扩展？

Answer 1

您可以在表单中使用“卡片”布局。在下面的示例中，用户看到三个不同的页面，前两个页面有字段，最后一个页面有按钮。

单击该按钮可从字段中检索值。字段位于不同的容器中并不重要，只要这些容器是表单的“后代”即可。

Ext.application({
    name : 'MyApp',
    launch : function() {
        Ext.create('Ext.form.Panel', {
            renderTo: Ext.getBody(),
            layout:'card',
            activeItem: 0,
            bbar: [{
                text: '« Previous',
                handler: function(button) {
                    var cardlayout = button.up('form').getLayout();
                    var prev = cardlayout.getPrev();
                    if (prev) {
                        cardlayout.setActiveItem(prev);
                    }
                }
            },{
                text: 'Next »',
                handler: function(button) {
                    var cardlayout = button.up('form').getLayout();
                    var next = cardlayout.getNext();
                    if (next) {
                        cardlayout.setActiveItem(next);
                    }
                }
            }],
            items: [{
                xtype: 'container',
                items: [{
                    xtype: 'textfield',
                    fieldLabel: 'First name',
                    name: 'firstName'
                }]
            },{
                xtype: 'container',
                items: [{
                    xtype: 'textfield',
                    fieldLabel: 'Last name',
                    name: 'lastName'
                }]
            },{
                xtype: 'container',
                items: [{
                    xtype: 'button',
                    text: 'Submit',
                    handler: function(button) {
                        var formValues = button.up('form').getValues();
                        alert('Name: ' + formValues.firstName
                              + ' ' + formValues.lastName);
                    }
                }]
            }]
        });
    }
});