Results 1 to 10 of 58

Thread: Show and Hide Docked Items.

Hybrid View

Previous Post Previous Post   Next Post Next Post
  1. #1

    Question Show and Hide Docked Items.

    Hi,
    I have a panel with Top and Bottom docked items and these docked items are initially Hidden. I want to show these docked items by Clicking a button. How can i achieve this.

    Code:
    var dockedItems = [
        {
            xtype: 'toolbar',
            ui: 'light',
            dock: 'bottom',
            items: buttonsSpecBottom,
            hidden: true
        },
        {
            xtype: 'toolbar',
            ui: 'light',
            dock: 'top',
            items: [buttonsSpecTop,{xtype: 'spacer'}, buttonsSpecHome],
            hidden: true
        }
    ];
    
    
    Application.App = Ext.extend(Ext.Panel, {
        fullscreen: true,
        layout: 'card',
        activeItem: 0,
        dockedItems: dockedItems ,
        initComponent: function() {        
            this.startScreen = new Application.views.login({
                flex: 1
            });
            this.homeScreen = new Application.views.home();
            this.supplementsScreen = new Application.views.supplements();
            this.nutritionScreen = new Application.views.nutrition();
            
            this.items = [this.startScreen, this.homeScreen,this.nutritionScreen,this.supplementsScreen];
            
            Application.App.superclass.initComponent.call(this);
            
        }
    });
    thanks in advance.

  2. #2
    Sencha User AndreaCammarata's Avatar
    Join Date
    Jun 2009
    Location
    Italy
    Posts
    1,395

    Default

    Hi infaniqbal.
    Let's start to set an id to your toolbars:

    PHP Code:
    var dockedItems = [
        {
            
    xtype'toolbar',
            
    id'toolbar1',
            
    ui'light',
            
    dock'bottom',
            
    itemsbuttonsSpecBottom,
            
    hiddentrue
        
    },
        {
            
    xtype'toolbar',
            
    id'toolbar2',
            
    ui'light',
            
    dock'top',
            
    items: [buttonsSpecTop,{xtype'spacer'}, buttonsSpecHome],
            
    hiddentrue
        
    }
    ]; 
    Then when you have to show them simply write

    PHP Code:
    Ext.getCmp('toolbar1').setVisible(true);
    Ext.getCmp('toolbar2').setVisible(true); 
    Hope this helps.
    Sencha Inc
    Andrea Cammarata, Solutions Engineer
    Owner at SIMACS

    @AndreaCammarata
    www.andreacammarata.com
    github: https://github.com/AndreaCammarata

    TUX components bundle for Sencha Touch 2.x.x
    https://github.com/AndreaCammarata/TUX


  3. #3
    Sencha Premium User mitchellsimoens's Avatar
    Join Date
    Mar 2007
    Location
    Gainesville, FL
    Posts
    40,450

    Default

    Ugh.... never gonna get over people using getCmp(). ID independent:

    Code:
    var docked = panel.getDockedItems();
    docked[0].setVisible(true);
    Mitchell Simoens @LikelyMitch
    Modus Create, Senior Fullstack Engineer
    ________________
    Modus Create is based on the model of an open source team. We’re a remote, global team of experts in our field. To find out more about the work we do, head over to our website.

    Check out my GitHub:
    https://github.com/mitchellsimoens

  4. #4
    Sencha User AndreaCammarata's Avatar
    Join Date
    Jun 2009
    Location
    Italy
    Posts
    1,395

    Default

    Michell I don't like it too, but in big project with multi components getCmp() is the only way.
    In this case your solution is good, but I don't like access to component by an index.
    Index should change, id may be te same over time.
    Sencha Inc
    Andrea Cammarata, Solutions Engineer
    Owner at SIMACS

    @AndreaCammarata
    www.andreacammarata.com
    github: https://github.com/AndreaCammarata

    TUX components bundle for Sencha Touch 2.x.x
    https://github.com/AndreaCammarata/TUX


  5. #5
    Sencha Premium User mitchellsimoens's Avatar
    Join Date
    Mar 2007
    Location
    Gainesville, FL
    Posts
    40,450

    Default

    Quote Originally Posted by andreacammarata View Post
    but in big project with multi components getCmp() is the only way.
    That is just incorrect to be honest. Create your own references or use ComponentQuery. Using IDs is really bad, structure of components doesn't change that much and is easily fixed. Everything you do should be extensible, dynamic, and reusable. This is why IDs are bad, you cannot reuse them.
    Mitchell Simoens @LikelyMitch
    Modus Create, Senior Fullstack Engineer
    ________________
    Modus Create is based on the model of an open source team. We’re a remote, global team of experts in our field. To find out more about the work we do, head over to our website.

    Check out my GitHub:
    https://github.com/mitchellsimoens

  6. #6
    Sencha User AndreaCammarata's Avatar
    Join Date
    Jun 2009
    Location
    Italy
    Posts
    1,395

    Default

    Quote Originally Posted by mitchellsimoens View Post
    That is just incorrect to be honest. Create your own references or use ComponentQuery. Using IDs is really bad, structure of components doesn't change that much and is easily fixed. Everything you do should be extensible, dynamic, and reusable. This is why IDs are bad, you cannot reuse them.
    Michell sorry but I don't agree with you!
    If for example I have to dinamically insert a button into a toobar as the first button just in some conditions, this makes your components index change but id is always the same, so sometimes could be really hard to control all your application by index.
    ID are not bad at all, you just have to look out to assign real unique ID.
    Sencha Inc
    Andrea Cammarata, Solutions Engineer
    Owner at SIMACS

    @AndreaCammarata
    www.andreacammarata.com
    github: https://github.com/AndreaCammarata

    TUX components bundle for Sencha Touch 2.x.x
    https://github.com/AndreaCammarata/TUX


  7. #7
    Sencha Premium User mitchellsimoens's Avatar
    Join Date
    Mar 2007
    Location
    Gainesville, FL
    Posts
    40,450

    Default

    A better way for you:

    Code:
    Application.App = Ext.extend(Ext.Panel, {
        fullscreen: true,
        layout: 'card',
        activeItem: 0,
        initComponent: function() {        
            this.dockedItems = this.buildDocks();
            
            this.items = this.buildItems();
            
            Application.App.superclass.initComponent.call(this);
            
        },
        buildItems: function() {
            this.startScreen = new Application.views.login({
                flex: 1
            });
            this.homeScreen = new Application.views.home();
            this.supplementsScreen = new Application.views.supplements();
            this.nutritionScreen = new Application.views.nutrition();
            return [
                this.startScreen,
                this.homeScreen,
                this.nutritionScreen,
                this.supplementsScreen
            ];
        },
        buildDocks: function() {
            return [
                {
                    xtype: 'toolbar',
                    ui: 'light',
                    dock: 'bottom',
                    items: buttonsSpecBottom,  //redo
                    hidden: true
                },
                {
                    xtype: 'toolbar',
                    ui: 'light',
                    dock: 'top',
                    items: [buttonsSpecTop,{xtype: 'spacer'}, buttonsSpecHome], //redo
                    hidden: true
                }
            ];
        }
    });
    This is a better application structure. Your toolbar buttons need to be moved inside the App also tho and then you will get the scope of the application.
    Mitchell Simoens @LikelyMitch
    Modus Create, Senior Fullstack Engineer
    ________________
    Modus Create is based on the model of an open source team. We’re a remote, global team of experts in our field. To find out more about the work we do, head over to our website.

    Check out my GitHub:
    https://github.com/mitchellsimoens

  8. #8

    Default

    Quote Originally Posted by andreacammarata View Post
    Hi infaniqbal.
    Let's start to set an id to your toolbars:

    PHP Code:
    var dockedItems = [
        {
            
    xtype'toolbar',
            
    id'toolbar1',
            
    ui'light',
            
    dock'bottom',
            
    itemsbuttonsSpecBottom,
            
    hiddentrue
        
    },
        {
            
    xtype'toolbar',
            
    id'toolbar2',
            
    ui'light',
            
    dock'top',
            
    items: [buttonsSpecTop,{xtype'spacer'}, buttonsSpecHome],
            
    hiddentrue
        
    }
    ]; 
    Then when you have to show them simply write

    PHP Code:
    Ext.getCmp('toolbar1').setVisible(true);
    Ext.getCmp('toolbar2').setVisible(true); 
    Hope this helps.
    Thanks all for contributing your thoughts in this thread.

    @Andrea: I have used your code snippet in my app but did not get required result. In my case, i have a login page and Other pages which were included in a Main Panel. and I did not want to show toolbars at Login page that is why i set toolbar's "hidden: true" initially. and as the user authenticate from server i call following function:
    Code:
    var isLoginItem = function(){
    
        Ext.getCmp('toolbar1').setVisible(true);
        Ext.getCmp('toolbar2').setVisible(true);
    
        app.doLayout();
        app.doComponentLayout();
    }
    which does not show toolbars properly. i have also attached screen shot that page. Please tell me where i m wrong. thanks in advance.
    Attachment 24414

Similar Threads

  1. difference between items and docked items
    By thomas12 in forum Sencha Touch 1.x: Discussion
    Replies: 1
    Last Post: 6 Dec 2010, 7:45 AM
  2. How to hide/show items.
    By TheBigOnion in forum Ext 3.x: Help & Discussion
    Replies: 2
    Last Post: 2 Jun 2010, 4:10 AM
  3. dynamically add/remove/show/hide items from toolbar
    By aj3423 in forum Ext 3.x: Help & Discussion
    Replies: 0
    Last Post: 27 Mar 2010, 4:30 AM
  4. EditorGrid - show/hide items
    By soma13 in forum Ext GWT: Help & Discussion (1.x)
    Replies: 2
    Last Post: 26 Mar 2009, 4:39 AM

Tags for this Thread

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •