1. #1
    Sencha User
    Join Date
    Sep 2010
    Location
    Netherlands
    Posts
    190
    Vote Rating
    0
    kevinv1990 is on a distinguished road

      0  

    Default setactiveitem is worst part of Sencha Touch?

    setactiveitem is worst part of Sencha Touch?


    Hello everyone,

    After 6 months, 4 days a week, 8 hours a day i can say that i am not a newbie in sencha touch anymore. (Did 6 months for my internship).

    Now i get this problem everytime.

    I really need you help. And don't post link to layout videos, I have seen them all, no kidding.

    My app looks like this:

    Main panel - contains 2 docked items (bottom Toolbar and top Toolbar).

    Panels = they are loaded inside the Main panel, so panel.setActiveItem(here panel name);

    HomePanel. this is just a panel like the one above, but with toolbars hidden

    DetailPage. this is just a panel like above but with the two toolbars shown and an extra one, which is in de detailpage panel -> dockedItems: 3th toolbar; section.

    Above is not very important, but just so you understand a little of the difficulty i got with the app.

    My question is, how can i create a function which does the good layout/componentlayout for this app, so that everything is shown or hidden properly, please believe me, i tried a lot, like setTimeout('panel.doComponentLayout();', 10); which did fix some problems, but not all.

    I appreciate all help

    Greetz,
    Kevin

  2. #2
    Sencha User
    Join Date
    Sep 2010
    Location
    Netherlands
    Posts
    190
    Vote Rating
    0
    kevinv1990 is on a distinguished road

      0  

    Default haha

    haha


    haha i believe i'm not the only one with troubles?

  3. #3
    Sencha User
    Join Date
    Sep 2010
    Location
    Netherlands
    Posts
    190
    Vote Rating
    0
    kevinv1990 is on a distinguished road

      0  

    Default


    Someone?

  4. #4
    Ext JS Premium Member SimonFlack's Avatar
    Join Date
    Jul 2010
    Location
    Norway
    Posts
    241
    Vote Rating
    3
    SimonFlack is on a distinguished road

      0  

    Default


    I'll try... Since you dont like video I'll try some very basic code just to make sure we are on the same page. I gather what you have looks something like this?

    Main panel - contains 2 docked items (bottom Toolbar and top Toolbar).
    Code:
    Ext.setup({
        onReady: function() {
            var mainpanel = new Ext.Panel({ 
                                          layout: 'card', 
                                          fullscreen: true, 
                                          id: 'MainPanel',
                                          dockedItems: [{
                                               xtype: 'toolbar',
                                               id: 'TopToolbar',
                                               dock: 'top',
                                               items: [{xtype: 'button', text: 'navigate', handler: function(){
                                                    //Navigate to secondpanel
                                                    Ext.getCmp('MainPanel').setActiveItem(1);
                                               }}]
                                          },{
                                               xtype: 'toolbar',
                                               id: 'BottomToolbar',
                                               dock: 'bottom',
                                               items: [{xtype: 'button', text: 'navigate', handler: function(){
                                                    //Navigate to firstpanel
                                                    Ext.getCmp('MainPanel').setActiveItem(0);
                                               }}]
                                          }]
                                    });
        }
    });
    Panels = they are loaded inside the Main panel, so panel.setActiveItem(here panel name);
    HomePanel. this is just a panel like the one above, but with toolbars hidden

    DetailPage. this is just a panel like above but with the two toolbars shown and an extra one, which is in de detailpage panel -> dockedItems: 3th toolbar; section.
    Code:
    Ext.setup({
        onReady: function() {
            var mainpanel = new Ext.Panel({ 
                                          layout: 'card', 
                                          fullscreen: true, 
                                          id: 'MainPanel',
                                          //Remove this toolbar
                                          //dockedItems: [{
                                          //   xtype: 'toolbar',
                                          //   dock: 'top',
                                          //   items: [{xtype: 'button', text: 'navigate', handler: function(){
                                          //          //Navigate to DetailPanel
                                          //          Ext.getCmp('MainPanel').setActiveItem(1);
                                          //     }}]
                                          //}],
                                          //items go here
                                          items: [{
                                                xtype: 'panel',
                                                id: 'HomePanel',
                                                layout: 'fit' //Always remember to specify a layout
                                                //If you want toolbars in here then you should probably not need them in the              
                                                //MainPanel
                                                dockedItems: [{
                                                    xtype: 'toolbar',
                                                    dock: 'top',
                                                    items: [{xtype: 'button', text: 'navigate', handler: function(){
                                                        //Navigate to DetailPanel
                                                        Ext.getCmp('MainPanel').setActiveItem(1);
                                                   }}]
                                              }],
                                          },{
                                                xtype: 'panel',
                                                id: 'DetailPanel',
                                                layout: 'fit' //Always remember to specify a layout
                                                //If you want toolbars in here then you should probably not need them in the              
                                                //MainPanel
                                          }]
            });
        }
    });
    My question is, how can i create a function which does the good layout/componentlayout for this app, so that everything is shown or hidden properly, please believe me, i tried a lot, like setTimeout('panel.doComponentLayout();', 10); which did fix some problems, but not all.
    It is really difficult to understand what you are actually struggling with. Does this look like it may help. Note: I wrote the code here and it is not tested so there may be mistakes.

    If you are trying to collaps a toolbar and reclaim the space it took up you will need to use css or an animation to set the height of the toolbar. Setting it to hidden will only make it invisible. It will still take up the same amount of space on the screen.

    Maybe you could post some mockup pictures of what you are trying to achieve?
    Simon Flack
    CEO and UX Designer
    WhiteFox AS, Norway

    Web: www.whitefox.no

    Facebook: www.facebook.com/WhiteFoxAS

    Twitter: @WhiteFoxAS

Similar Threads

  1. Replies: 10
    Last Post: 20 Jan 2012, 10:10 AM
  2. [OPEN-770] setActiveItem failing on iPod Touch
    By ynonp in forum Sencha Touch 1.x: Bugs
    Replies: 0
    Last Post: 13 Feb 2011, 2:02 AM
  3. Sencha Touch on iPhone v1 / iPod touch v1 ?
    By palnap in forum Sencha Touch 1.x: Discussion
    Replies: 4
    Last Post: 28 Oct 2010, 5:30 PM
  4. Replies: 2
    Last Post: 9 Sep 2010, 10:24 AM

Thread Participants: 1