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

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

      0  

    Default


    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

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

      0  

    Default


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

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

      0  

    Default


    alias: "widget.homePage",

    I think you should remove this one too

Thread Participants: 1

Tags for this Thread

Turkiyenin en sevilen filmlerinin yer aldigi xnxx internet sitemiz olan ve porn sex tarzi bir site olan mobil porno izle sitemiz gercekten dillere destan bir durumda herkesin sevdigi bir site olarak tarihe gececege benziyor. Sitenin en belirgin ozelliklerinden birisi de Turkiyede gercekten kaliteli ve muntazam, duzenli porno izle siteleri olmamasidir. Bu yuzden iste. Ayrica en net goruntu kalitesine sahip adresinde yayinlanmaktadir. Mesela diğer sitelerimizden bahsedecek olursak, en iyi hd porno video arşivine sahip bir siteyiz. "The Best anal porn videos and slut anus, big asses movies set..." hd porno faketaxi