Hybrid View

  1. #1
    Sencha User
    Join Date
    Oct 2012
    Posts
    27
    Answers
    2
    Vote Rating
    0
    stackflower is on a distinguished road

      0  

    Default Unanswered: Tabpanel disappears when opening another panel

    Unanswered: Tabpanel disappears when opening another panel


    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.

  2. #2
    Sencha User
    Join Date
    Sep 2011
    Posts
    78
    Vote Rating
    1
    shweta.saxena09 is on a distinguished road

      0  

    Default


    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....

  3. #3
    Sencha User
    Join Date
    Oct 2012
    Posts
    27
    Answers
    2
    Vote Rating
    0
    stackflower is on a distinguished road

      0  

    Default


    How do I set an item index?

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

  4. #4
    Sencha User
    Join Date
    Sep 2011
    Posts
    78
    Vote Rating
    1
    shweta.saxena09 is on a distinguished road

      0  

    Default


    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:
    
    
    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 ???


  5. #5
    Sencha User
    Join Date
    Sep 2011
    Posts
    78
    Vote Rating
    1
    shweta.saxena09 is on a distinguished road

      0  

    Default


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

  6. #6
    Sencha User
    Join Date
    Oct 2012
    Posts
    27
    Answers
    2
    Vote Rating
    0
    stackflower is on a distinguished road

      0  

    Default


    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]



  7. #7
    Sencha User
    Join Date
    Oct 2012
    Posts
    27
    Answers
    2
    Vote Rating
    0
    stackflower is on a distinguished road

      0  

    Default


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

Thread Participants: 1

Tags for this Thread