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

Question

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

Answer 1

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

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

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);
                    }
                }]
            }]
        });
    }
});