1

いくつかのタブを含む tabpanel があります。ここでは 6 番目のタブ (navigatingPanels.js ファイル) に集中します。このファイルにはカード レイアウトがあり、ユーザーはフォーム 1 に入力し、送信時にフォーム 2 に移動できます (フォーム 2 へのスライド)。また、ユーザーが必要に応じて form1 に戻ることができるように、戻るボタンを備えたドッキングされたツールバーもあります。エラーが発生します-

Uncaught Error: [ERROR][Ext.Base#callParent] Invalid item given: undefined, must be either the config object to factory a new item, or an existing component instance.

アプリはここで見ることができます - http://maalguru.in/touch/Raxa-70/MyApp/

更新 - 関連するパネルにカードを 1 つ追加し、form1 と form2 (必要なパネル/カード) を削除すると、正常に動作します。この場合、ActiveItem を目的のカード (form1 と form2) に設定する必要があります。変更されたビューポート - http://pastebin.com/P4k04dBQ 2 つのパネル/カードだけで達成できる解決策はありますか?

Viewport.js

Ext.define('MyApp.view.Viewport', {
    extend: 'Ext.TabPanel',
    xtype: 'my-viewport',

    config: {
        fullscreen: true,
        tabBarPosition: 'bottom',

        items: [{
            xclass: 'MyApp.view.navigatingPanels'
        }]
    }
});

NavigatingPanels.js

Ext.define('MyApp.view.navigatingPanels', {
    extend: 'Ext.Panel',
    id: 'navigatingPanels',
    xtype: 'navigatingPanels',
    config: {
        iconCls: 'user',
        title: 'Navigating Panels',
        layout: 'card',
        animation: {
            type: 'slide',
            direction: 'left'
        },
        defaults: {
            styleHtmlContent: 'true'
        },
        items: [{
                docked: 'top',
                xtype: 'toolbar',
                title: 'Registeration Form',
                items: [{
                    text: 'Back',
                    ui: 'back',
                    align: 'centre',
                    //back button to take the user back from form2 to form1
                    handler: function() {
                        Ext.getCmp('navigatingPanels').setActiveItem(form1);

                    }
                }]
            },
            form1,
            form2
        ]
    }

});


var form1 = new Ext.Panel({
    scrollable: 'vertical',
    items: [{
        xtype: 'fieldset',
        title: 'Form 1',
        items: [{
                xtype: 'textfield',
                label: 'Name',
                name: 'name',
            },
            {
                xtype: 'button',
                text: 'Save Data & move to form2',
                ui: 'confirm',
                //TODO add some action: to store data
                //save data & move to form2
                handler: function() {
                    Ext.getCmp('navigatingPanels').setActiveItem(form2, {
                        type: 'slide',
                        direction: 'right'
                    });
                    console.log("Form1");
                }
            }
        ]
    }]
});
var form2 = new Ext.Panel({
    scrollable: 'vertical',
    items: [{
        xtype: 'fieldset',
        title: 'Form 2',
        items: [{
                xtype: 'textareafield',
                label: 'Message',
                name: 'message'
            },
            {
                xtype: 'button',
                text: 'Submit Data',
                ui: 'confirm',
                //TODO add some action: to store data
                //action: 'Submit Data'
            }
        ]
    }]
});

App.js

Ext.Loader.setConfig({
    enabled: true
});
Ext.application({
    name: 'MyApp',

    controllers: ['Main'],

    launch: function() {
        Ext.create('MyApp.view.Viewport', {
            fullscreen: true
        });

    }
});
4

2 に答える 2

2

最後に私は答えを得ました。コンポーネント インスタンスは の項目として指定するのでExt.defineはなく、その構成を指定する必要があります。setActiveItem は通常の方法で呼び出すことができます -

Ext.getCmp('navigatingPanels').setActiveItem(0);

コードスニペット

Ext.define('MyApp.view.navigatingPanels', {
    extend: 'Ext.Panel',
    id: 'navigatingPanels',
    xtype: 'navigatingPanels',
    config: {
        iconCls: 'user',
        title: 'Navigating Panels',
        layout: 'card',
        animation: {
            type: 'slide',
            direction: 'left',
            duration: 300
        },
        defaults: {
            styleHtmlContent: 'true'
        },
        items: [{
                docked: 'top',
                xtype: 'toolbar',
                title: 'Registeration Form',
                items: [{
                    text: 'Back',
                    ui: 'back',
                    align: 'centre',
                    //back button to take the user back from form2 to form1
                    handler: function() {
                        Ext.getCmp('navigatingPanels').setActiveItem(0, {
                            type: 'slide',
                            reverse: 'true',
                            duration: '300'
                        });
                        console.log(Ext.getCmp('navigatingPanels'));

                    }
                }]
            },
            {
                xtype: 'fieldset',
                title: 'Form 1',
                scrollable: 'vertical',
                items: [{
                        xtype: 'textfield',
                        label: 'Name',
                        name: 'name',
                    },
                    {
                        xtype: 'button',
                        text: 'Save Data & move to form2',
                        ui: 'confirm',
                        //TODO add some action: to store data
                        //save data & move to form2
                        handler: function() {
                            Ext.getCmp('navigatingPanels').setActiveItem(1, {
                                type: 'slide',
                                direction: 'right'
                            });
                            console.log("Form1");
                        }
                    }
                ]
            },
            {
                scrollable: 'vertical',
                items: [{
                    xtype: 'fieldset',
                    title: 'Form 2',
                    items: [{
                            xtype: 'textareafield',
                            label: 'Message',
                            name: 'message'
                        },
                        {
                            xtype: 'button',
                            text: 'Submit Data',
                            ui: 'confirm',
                            //TODO add some action: to store data
                            //action: 'Submit Data'
                        }
                    ]
                }]
            }
        ]
    }

});
于 2012-04-16T23:27:19.567 に答える
0

これを試して...

myNavigationPanel = Ext.create('MyApp.view.navigatingPanels');
myNavigationPanel.setActiveItem(0);

Ext.define('MyApp.view.Viewport', {
    extend: 'Ext.TabPanel',
    xtype: 'my-viewport',

    config: {
        fullscreen: true,
        tabBarPosition: 'bottom',

        items: [{
                xclass: 'MyApp.view.Home'
            },
            {
                xclass: 'MyApp.view.Contact'
            },
            {
                xclass: 'MyApp.view.Products'
            },
            {
                xclass: 'MyApp.view.Forms'
            },
            {
                xclass: 'MyApp.view.NestedTabPanels'
            },
            myNavigationPanel
        ]
    }
});
于 2012-04-16T04:56:43.920 に答える