Tabpanel disappears when opening another panel

**stackflower** · 11 Oct 2012 6:15 AM

I have a tabpanel which should always be shown at the bottom of the page.

This tabpanel (main.js) has 3 tabs (home, persoon and todo).
These tabs are "panels" (home.js, persoon.js, todo.js).

Every tab has multiple panels:

Home tab --> home.js, homeOver.js, homeReset.js

Persoon tab --> person.js, personAdd.js, personDetail.js

Todo tab --> todo.js, todoAdd.js, todoDetail.js

When I click at a tab, the correct page will be shown.
When I click at lets say the home tab, the home panel will be shown. When I click within this panel at a button to show another panel within the same tab (home), the tabpanel disappears.
How can I resolve this?

I change the page with the following function:

Code:

                       
    Ext.Viewport.animateActiveItem( { xtype : 'homeovercard'}, {type: 'slide', direction: 'left'});

Here is my complete code:

**app.js:**

Code:

    Ext.application({
    name: 'app',


    controllers: ['HomeController', 'PersoonController'],
    views: ['Main'],


    launch: function() {
        Ext.Viewport.add({
             xclass: 'app.view.Main'
        });
    }
    });

**app.view.Main.js:**

Code:


    Ext.define('app.view.Main', {
    extend:'Ext.TabPanel',
    xtype: 'maincard',


    requires: [
        'app.view.Home',
        'app.view.Persoon',
        'app.view.Todo',
        'app.view.HomeOver',
        'app.view.HomeReset'
    ],


    config: {
        tabBar: {
            docked: 'bottom',
            layout: {
                pack: 'center'
            }
        },
        items: [
            { xtype: 'homecard' },
            { xtype: 'persooncard' },
            { xtype: 'todocard' }
        ]
    }
    });

**app.view.Home.js:**

Code:


    Ext.define('app.view.Home', {
    extend: 'Ext.Panel',
    alias: "widget.homePage",
    xtype: 'homecard',


    config: {
        iconCls: 'home',
        title: 'Home',
        html: 'Dit is de home pagina',
        styleHtmlContent: true,


        items: [{
            docked: 'top',
            xtype: 'toolbar',
            title: 'Home',
            items: [
                {
                    xtype: "button",
                    text:    'Over',
                    action: 'ButtonHomeOverClicked'
                },
                {
                    xtype: "spacer"
                },
                {
                    xtype: "button",
                    text:    'Reset',
                    action: 'ButtonHomeResetClicked'
                    //action:
                }
            ]
        }
        ]
    }
    });

**app.view.HomeOver.js:**

Code:


    Ext.define('app.view.HomeOver', {
    extend: 'Ext.Panel',
    alias: "widget.homeover",
    xtype: 'homeovercard',
    requires: [
        'app.view.Home',
        'app.view.Persoon',
        'app.view.Todo'


    ],
    config: {
        iconCls: 'home',
        title: 'Home',
        html: 'Dit is de home over pagina',


        styleHtmlContent: true,
        items: [
            {
                docked: 'top',
                xtype: 'toolbar',
                title: 'Over pagina',
                items: [
                {
                    xtype: "button",
                    ui: "back",
                    text: "Terug",
                    action: "ButtonBackHome"
                }
                ]
            }
        ]
    }
    });

**app.controller.HomeController:**

Code:




         Ext.define("app.controller.HomeController", {
    extend: "Ext.app.Controller",


    config: {
        refs: {
            // We're going to lookup our views by xtype.
            overButton: "button[action=ButtonHomeOverClicked]",
            resetButton: "button[action=ButtonHomeResetClicked]",
            backButton: "button[action=ButtonBackHome]"
        },
        control: {
            overButton: {
                // The commands fired by the notes list container.
                tap: "onOverCommand"
            },
            resetButton: {
                // The commands fired by the notes list container.
                tap: "onResetCommand"
            },
            backButton: {
                tap: "onBackCommand"
            }
        }
    },


    onOverCommand: function () {
        console.log("Op home over knop gedrukt");
        this.changeScreenToOverPage();
    },
    onResetCommand: function () {
        console.log("Op home reset knop gedrukt");
        this.changeScreenToResetPage();
    },
    onBackCommand: function () {
        console.log("Op back knop gedrukt");
        this.changeScreenToHomePage();
    },




    changeScreenToOverPage: function () {
        console.log("Verander screen!");
        Ext.Viewport.animateActiveItem( { xtype : 'homeovercard'}, {type: 'slide', direction: 'left'});
    },
    changeScreenToResetPage: function () {
        console.log("Verander screen!");
        Ext.Viewport.animateActiveItem( { xtype : 'homeresetcard'}, {type: 'slide', direction: 'left'});
    },


    changeScreenToHomePage: function () {
        console.log("Verander screen!");
        Ext.Viewport.animateActiveItem( { xtype : 'maincard'}, {type: 'slide', direction: 'right'});
       },




    // Base Class functions.
       launch: function () {
        this.callParent(arguments);
       // Ext.getStore("Notes").load();
        console.log("launch");
    },
    init: function () {
        this.callParent(arguments);
        console.log("init");
        //this.onOverCommand();
    }
    });

I hope my question is clear.

Thanks in advance for your help.

**shweta.saxena09** · 11 Oct 2012 10:21 PM

Code:

                       
    Ext.Viewport.animateActiveItem( { xtype : 'homeovercard'}, {type: 'slide', direction: 'left'});

use index of the item not a xtype... like
if homecard is first card then use 0 for it....... then 1 for 2nd........... change the indexing for rest of all...

Code:

                       
    Ext.Viewport.animateActiveItem( 0, {type: 'slide', direction: 'left'});

hope you understand what i want to say....

**stackflower** · 11 Oct 2012 11:41 PM

How do I set an item index?

I tried what you said but nothing happens when I tap / click on the button.

**shweta.saxena09** · 11 Oct 2012 11:53 PM

Alright got it....

see ....

tabpanel - home , person, todo

you have to set layout of each main three panel is card

like this **app.view.Home.js:**

Code:

Ext.define('app.view.Home', {
    extend: 'Ext.Panel',
    alias: "widget.homePage",
    xtype: 'homecard',




    config: {
        iconCls: 'home',
id:'Home',
        title: 'Home',
        html: 'Dit is de home pagina',
        styleHtmlContent: true,
layout:'card',
........
................  // see bold items

give id to this panel

Okay then other pages set as a items of this panel....
then add your function on the handler of the button

Code:

 Ext.getCmp('Home').animateActiveItem( 0, {type: 'slide', direction: 'left'});

make sense ???

**shweta.saxena09** · 12 Oct 2012 12:01 AM

See the code

make your each panel (todo, person) of tabpanel like this

Code:

Ext.define('app.view.Home', { /// your have to make your tab as parent panel    extend: 'Ext.Panel',
    alias: "widget.homePage",
    xtype: 'home',
	requires: [
        'app.view.Home',
        'app.view.HomeOver',
        'app.view.HomeReset'
    ],
	
    config: {
        iconCls: 'home',
        title: 'Home',
        html: 'Dit is de home pagina',
        styleHtmlContent: true,
	layout:'card',
	id:'Home',
        items: [{
            docked: 'top',
            xtype: 'toolbar',
            title: 'Home',
            items: [
                {
                    xtype: "button",
                    text:    'Over',
                    action: 'ButtonHomeOverClicked'
                },
                {
                    xtype: "spacer"
                },
                {
                    xtype: "button",
                    text:    'Reset',
                    action: 'ButtonHomeResetClicked'
                    //action:
                }
            ]
        },
	{xtype: 'homecard'},
	{xtype: 'homeovercard'},
	{xtype: 'homereset'}
        ]
    }
    });

**stackflower** · 12 Oct 2012 12:18 AM

Now I get an error when opening the page.

Shall I upload my project?
I think I do something wrong and I don't know what..

Errors with Chrome debugger:

[COLOR=red !important]Uncaught Error: Deadlock detected while loading dependencies! 'app.view.Home' and 'undefined' mutually require each other. Path: app.view.Home -> app.view.Home sencha-touch-debug.js:8248[/COLOR]

[COLOR=red !important]Uncaught Error: Deadlock detected while loading dependencies! 'app.view.Persoon' and 'undefined' mutually require each other. Path: app.view.Persoon -> app.view.Persoon sencha-touch-debug.js:8248[/COLOR]

[COLOR=red !important]Uncaught RangeError: Maximum call stack size exceeded[/COLOR]

[COLOR=red !important]Uncaught Error: The following classes are not declared even if their files have been loaded: ''. Please check the source code of their corresponding files for possible typos: ' sencha-touch-debug.js:8002

[/COLOR]

**stackflower** · 12 Oct 2012 1:47 AM

The error is resolved.

Now the main problem is still not solved.

I see multple panels when I click at a tab. (see picture below)
Wrong ST2.PNG
I clicked at Home tab and I see the panels: "home" and "homeover".
This isn't what I want.

Short explanation:
Tabpanel "Main" has 3 tabs which refer to the panels "home", "person", "todo".
When I click within the home panel at the button "over", the "homeover" panel should open in the same tab, which is "home".

Thanks to shweta.saxena09 I know I have to use card layouts.

The code of my "Main" tabpanel is now:

Code:

Ext.define('app.view.Main', {
    extend:'Ext.TabPanel',
    xtype: 'maincard',


    requires: [
        'app.view.Home',
        'app.view.Persoon',
        'app.view.Todo'
    ],


    config: {
        tabBar: {
            docked: 'bottom',
            layout: {
                pack: 'center'
            }
        },
        items: [
            { xtype: 'homecard'},
            { xtype: 'persooncard' },
            { xtype: 'todocard' }
        ]
    }
});

The code of my "Home" panel is now:

Code:

Ext.define('app.view.Home', { 
    extend: 'Ext.Panel',
    alias: "widget.homePage",
    xtype: 'homecard',
    requires: [
        //'app.view.Home',
        'app.view.HomeOver',
        'app.view.HomeReset'
    ],


    config: {
        iconCls: 'home',
        title: 'Home',
        html: 'Dit is de home pagina',
        styleHtmlContent: true,
        layout:'card',
        id:'Home',
        items: [{
            docked: 'top',
            xtype: 'toolbar',
            title: 'Home',
            items: [
                {
                    xtype: "button",
                    text:    'Over',
                    action: 'ButtonHomeOverClicked'
                },
                {
                    xtype: "spacer"
                },
                {
                    xtype: "button",
                    text:    'Reset',
                    action: 'ButtonHomeResetClicked'
                    //action:
                }
            ]
        },
            //{xtype: 'homecard'},
            {xtype: 'homeovercard'},
            {xtype: 'homereset'}
        ]
    }
});

The code of my "HomeOver" panel is now:

Code:

Ext.define('app.view.HomeOver', {
    extend: 'Ext.Panel',
    alias: "widget.homeover",
    xtype: 'homeovercard',
    config: {
        iconCls: 'home',
        title: 'Home',
        html: 'Dit is de home over pagina',
        layout:'card',
        styleHtmlContent: true,
        items: [
            {
                docked: 'top',
                xtype: 'toolbar',
                title: 'Over pagina',
                items: [
                {
                    xtype: "button",
                    ui: "back",
                    text: "Terug",
                    action: "ButtonBackHome"
                }


                ]
            }
        ]
    }
});

**shweta.saxena09** · 12 Oct 2012 3:04 AM

Code:

Ext.define('app.view.HomeOver', {    extend: 'Ext.Panel',
    alias: "widget.homeover",
    xtype: 'homeovercard',
    config: {
        iconCls: 'home',
        title: 'Home',
        html: 'Dit is de home over pagina',
      
        styleHtmlContent: true,
        items: [
            {
                docked: 'top',
                xtype: 'toolbar',
                title: 'Over pagina',
                items: [
                {
                    xtype: "button",
                    ui: "back",
                    text: "Terug",
                    action: "ButtonBackHome"
                }




                ]
            }
        ]
    }
});

remove layout card item from item panel..... i'll give you the code which you want

**stackflower** · 12 Oct 2012 3:09 AM

remove layout card item from item panel..... i'll give you the code which you want

Result is the same if I do that.

Note that I commented 2 things in my home panel. If I uncomment these 2 things, the app won't start en gives errors (like I gave in some posts before).

Code:

Ext.define('app.view.Home', {
    extend: 'Ext.Panel',
    alias: "widget.homePage",
    xtype: 'homecard',
    requires: [
        //'app.view.Home',
        'app.view.HomeOver',
        'app.view.HomeReset'
    ],


    config: {
        iconCls: 'home',
        title: 'Home',
        html: 'Dit is de home pagina',
        styleHtmlContent: true,
        layout:'card',
        id:'Home',
        items: [{
            docked: 'top',
            xtype: 'toolbar',
            title: 'Home',
            items: [
                {
                    xtype: "button",
                    text:    'Over',
                    action: 'ButtonHomeOverClicked'
                },
                {
                    xtype: "spacer"
                },
                {
                    xtype: "button",
                    text:    'Reset',
                    action: 'ButtonHomeResetClicked'
                }
            ]
        },
            //{xtype: 'homecard'},
            {xtype: 'homeovercard'},
            {xtype: 'homereset'}
        ]
    }
});

**shweta.saxena09** · 12 Oct 2012 3:14 AM

alias: "widget.homePage",

I think you should remove this one too

Tabpanel disappears when opening another panel

Thread Tools

Search Thread

Display

Unanswered: Tabpanel disappears when opening another panel

Unanswered: Tabpanel disappears when opening another panel

Tags for this Thread