extjs - ExtJS フォームを 2 つのウィンドウに分割する

Question

ある画面のウィンドウにフォームを表示し、同じフォームの一部を含むメインウィンドウを表示するアプリを作成する必要があります-または、これは別のフォームではありません-別の画面に表示されます。これは ExtJs で可能ですか? どのように ？誰かがそのような例やおそらく拡張機能を見たことがありますか?

Answer 1

フォーム内で「カード」レイアウトを使用できます。次の例では、ユーザーに 3 つの異なるページが表示されます。最初の 2 つのページにはフィールドがあり、最後のページにはボタンがあります。

ボタンをクリックすると、フィールドから値が取得されます。これらのコンテナがフォームの「子孫」である限り、フィールドが異なるコンテナにあることは問題ではありません。

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