1. #1
    Sencha User
    Join Date
    Nov 2010
    Posts
    73
    Vote Rating
    0
    irfaniqbal is on a distinguished road

      0  

    Question Show and Hide Docked Items.

    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 - Services Team AndreaCammarata's Avatar
    Join Date
    Jun 2009
    Posts
    1,394
    Vote Rating
    22
    AndreaCammarata has a spectacular aura about AndreaCammarata has a spectacular aura about

      0  

    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
    CEO at SIMACS

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

    TUX components bundle for Sencha Touch 2.x.x
    http://www.tux-components.com/


  3. #3
    Sencha - Senior Forum Manager mitchellsimoens's Avatar
    Join Date
    Mar 2007
    Location
    Gainesville, FL
    Posts
    37,010
    Vote Rating
    846
    mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute

      0  

    Default


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

    Code:
    var docked = panel.getDockedItems();
    docked[0].setVisible(true);
    Mitchell Simoens @SenchaMitch
    Sencha Inc, Senior Forum Manager
    ________________
    Check out my GitHub, lots of nice things for Ext JS 4 and Sencha Touch 2
    https://github.com/mitchellsimoens

    Think my support is good? Get more personalized support via a support subscription. https://www.sencha.com/store/

    Need more help with your app? Hire Sencha Services services@sencha.com

    Want to learn Sencha Touch 2? Check out Sencha Touch in Action that is in print!

    When posting code, please use BBCode's CODE tags.

  4. #4
    Sencha - Services Team AndreaCammarata's Avatar
    Join Date
    Jun 2009
    Posts
    1,394
    Vote Rating
    22
    AndreaCammarata has a spectacular aura about AndreaCammarata has a spectacular aura about

      0  

    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
    CEO at SIMACS

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

    TUX components bundle for Sencha Touch 2.x.x
    http://www.tux-components.com/


  5. #5
    Sencha - Senior Forum Manager mitchellsimoens's Avatar
    Join Date
    Mar 2007
    Location
    Gainesville, FL
    Posts
    37,010
    Vote Rating
    846
    mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute

      0  

    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 @SenchaMitch
    Sencha Inc, Senior Forum Manager
    ________________
    Check out my GitHub, lots of nice things for Ext JS 4 and Sencha Touch 2
    https://github.com/mitchellsimoens

    Think my support is good? Get more personalized support via a support subscription. https://www.sencha.com/store/

    Need more help with your app? Hire Sencha Services services@sencha.com

    Want to learn Sencha Touch 2? Check out Sencha Touch in Action that is in print!

    When posting code, please use BBCode's CODE tags.

  6. #6
    Sencha - Senior Forum Manager mitchellsimoens's Avatar
    Join Date
    Mar 2007
    Location
    Gainesville, FL
    Posts
    37,010
    Vote Rating
    846
    mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute

      0  

    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 @SenchaMitch
    Sencha Inc, Senior Forum Manager
    ________________
    Check out my GitHub, lots of nice things for Ext JS 4 and Sencha Touch 2
    https://github.com/mitchellsimoens

    Think my support is good? Get more personalized support via a support subscription. https://www.sencha.com/store/

    Need more help with your app? Hire Sencha Services services@sencha.com

    Want to learn Sencha Touch 2? Check out Sencha Touch in Action that is in print!

    When posting code, please use BBCode's CODE tags.

  7. #7
    Sencha - Services Team AndreaCammarata's Avatar
    Join Date
    Jun 2009
    Posts
    1,394
    Vote Rating
    22
    AndreaCammarata has a spectacular aura about AndreaCammarata has a spectacular aura about

      0  

    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
    CEO at SIMACS

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

    TUX components bundle for Sencha Touch 2.x.x
    http://www.tux-components.com/


  8. #8
    Sencha - Senior Forum Manager mitchellsimoens's Avatar
    Join Date
    Mar 2007
    Location
    Gainesville, FL
    Posts
    37,010
    Vote Rating
    846
    mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute

      0  

    Default


    It goes against good OOP practices. Guess we are not going to agree with this so as long as you are ok with it, let's not get into a thread fight
    Mitchell Simoens @SenchaMitch
    Sencha Inc, Senior Forum Manager
    ________________
    Check out my GitHub, lots of nice things for Ext JS 4 and Sencha Touch 2
    https://github.com/mitchellsimoens

    Think my support is good? Get more personalized support via a support subscription. https://www.sencha.com/store/

    Need more help with your app? Hire Sencha Services services@sencha.com

    Want to learn Sencha Touch 2? Check out Sencha Touch in Action that is in print!

    When posting code, please use BBCode's CODE tags.

  9. #9
    Sencha - Services Team AndreaCammarata's Avatar
    Join Date
    Jun 2009
    Posts
    1,394
    Vote Rating
    22
    AndreaCammarata has a spectacular aura about AndreaCammarata has a spectacular aura about

      0  

    Default


    Quote Originally Posted by mitchellsimoens View Post
    It goes against good OOP practices. Guess we are not going to agree with this so as long as you are ok with it, let's not get into a thread fight
    Absolutely...the last thing I want is to go into a thread fight, if you can convince me that using id is bad I'm glad to follow your street
    I agree with you when you when you say that everything has to be dynamic and reusable but id don't mess with that and I don't understand why you say it goes against OOP practices.
    Remember that Sencha Touch / Ext component are nothing more than div created inside your page, and, as W3C say, every dom node should have an unique id.
    So setting the id on you component makes your div created with an unique id.
    Yes, it's better don't use too much getCmp() because the ComponentManager should look for the wanted component through all the existing components in your application and this is not really the best, but sometime I think you have no choise.
    Obviously if you are creating your custom component extending from an existing Sencha component you should not set id inside the class, but you will asign the id on the new class that you are going to create with type of your custom defined class.
    Anyway absolutely no problem Michell, this doesn't want to be a fight but just a way to help all the new Sencha Touch users
    Sencha Inc
    Andrea Cammarata, Solutions Engineer
    CEO at SIMACS

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

    TUX components bundle for Sencha Touch 2.x.x
    http://www.tux-components.com/


  10. #10
    Sencha - Senior Forum Manager mitchellsimoens's Avatar
    Join Date
    Mar 2007
    Location
    Gainesville, FL
    Posts
    37,010
    Vote Rating
    846
    mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute

      0  

    Default


    Keeping it light, Sencha will automatically set a unique ID. But when you try to refer to it, how can you get this unique ID.

    When I create an App, I don't just add some Panels. Each "screen" is actually just an extension of another component. Then I instantiate that extension when needed. This is reusable.

    If a function is used more than once, it is abstracted out and that creates a base for what to extend upon. This is reusable and extensible. Think of how Panel extends Component. Component code is reusable so Panel just extends it.

    So say I have an App and it the basis is a Panel. Panel uses CardLayout. Each "card" under it is an extension of an abstract. My secret for performance is to only have 1 or 2 cards rendered at once. I destroy what isn't being viewed and recreate it when needed. This makes all my animations smooth versus others that are choppy (even on the contest winners). So managing all the unique IDs is just not feasible and since I only have 1 card rendered, I can use getActiveItem(). The active card then holds references to the components under it that I need. Keeping with performance, each card doesn't have much on it so managing those references are now simple. I don't create references to everything, just what I need.

    So I accomplished 2 things. Never use IDs and unmatched performance.
    Mitchell Simoens @SenchaMitch
    Sencha Inc, Senior Forum Manager
    ________________
    Check out my GitHub, lots of nice things for Ext JS 4 and Sencha Touch 2
    https://github.com/mitchellsimoens

    Think my support is good? Get more personalized support via a support subscription. https://www.sencha.com/store/

    Need more help with your app? Hire Sencha Services services@sencha.com

    Want to learn Sencha Touch 2? Check out Sencha Touch in Action that is in print!

    When posting code, please use BBCode's CODE tags.

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

Thread Participants: 9

Tags for this Thread